ES 6展開演算子の一般的な使い方
2210 ワード
ES 6の出現に伴い、JavaScriptの作成がますます柔軟になってきました.新しい構文はコードをより簡潔にし、より可読性が高いです.ES 6には多くの特性が追加されています.拡張演算子はその一つです.シンプルな3つのポイントは、もともと煩雑だったコードを瞬間的にシンプルで優雅にします.では、よくある使い方を見てみましょう.
関数のアプリ呼び出し方式を過去にします.
行列の結合
連結配列には様々な方法がありますが、演算子を展開することにより、新しいアイデアが提供されます.
コピー配列
コピー配列は一般的なタスクであり、以前は
パラメータまたはNodeListを行列に変換します.
コピー配列と同様に、
パラメータの個数が不確定な関数に展開演算子を使うのが最適です.
解凍操作は、変数の大量割当値において非常に便利であり、煩雑な声明と割当操作を省略している.展開演算子の使用に合わせて、動作をさらに簡略化します.
ここでは、演算子を展開するいくつかの一般的な使い方を紹介します.何かいい例があれば、追加してください.
関数のアプリ呼び出し方式を過去にします.
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.slice
でNodeList
とarguments
オブジェクトを本物の配列に変換しましたが、今は展開演算子を使ってこのタスクを完了できます.[...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文法をサポートしていますので、まだ遊んだことがないなら、試してみる価値があります.ここでは、演算子を展開するいくつかの一般的な使い方を紹介します.何かいい例があれば、追加してください.