ES 6展開演算子の一般的な使い方

2210 ワード

ES 6の出現に伴い、JavaScriptの作成がますます柔軟になってきました.新しい構文はコードをより簡潔にし、より可読性が高いです.ES 6には多くの特性が追加されています.拡張演算子はその一つです.シンプルな3つのポイントは、もともと煩雑だったコードを瞬間的にシンプルで優雅にします.では、よくある使い方を見てみましょう.
関数のアプリ呼び出し方式を過去にします.Function.prototype.applyを通して関数を呼び出す必要がある場合があります.パラメータは一つの配列に入れます.
function doStuff (x, y, z) { }
var args = [0, 1, 2];

//        
doStuff.apply(null, args);

今は展開演算子があります.applyを使用することは完全に避けられます.関数を呼び出したときに、行列の前に演算子を展開するだけでいいです.
doStuff(...args);

コードがより短くなり、より簡潔になり、無駄なnullも必要ではない.
行列の結合
連結配列には様々な方法がありますが、演算子を展開することにより、新しいアイデアが提供されます.
arr1.push(...arr2) //         arr2     
arr1.unshift(...arr2) //        arr2     

2つの配列を結合したい場合、配列内の任意の位置に要素を置くことができます.
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]

コードが少なくなりました.位置も自由にコントロールできます.
コピー配列
コピー配列は一般的なタスクであり、以前はArray.prototype.sliceを使って行われていましたが、現在は行列のコピーを展開演算子で得ることができます.
var arr = [1,2,3];
var arr2 = [...arr]; //     arr.slice()
arr2.push(4)

ここで注意したいのですが、配列内のオブジェクトは依然として参照タイプですので、実際にはすべてのコンテンツが「コピー」されているわけではありません.
パラメータまたはNodeListを行列に変換します.
コピー配列と同様に、Array.Prototype.sliceNodeListargumentsオブジェクトを本物の配列に変換しましたが、今は展開演算子を使ってこのタスクを完了できます.
[...document.querySelectorAll('div')]

関数の署名から行列形式のパラメータを得ることもできます.
var myFn = function(...args) {
// ...
}

Array.fromも同じことができます.Mathオブジェクト内の相関関数を使用します.
パラメータの個数が不確定な関数に展開演算子を使うのが最適です.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

オブジェクトの解凍
解凍操作は、変数の大量割当値において非常に便利であり、煩雑な声明と割当操作を省略している.展開演算子の使用に合わせて、動作をさらに簡略化します.
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

ES 6はJavaScriptの開発効率を高めるだけでなく、コードを書くことも楽しみになります.現代のブラウザは新しいES 6文法をサポートしていますので、まだ遊んだことがないなら、試してみる価値があります.
ここでは、演算子を展開するいくつかの一般的な使い方を紹介します.何かいい例があれば、追加してください.