ES2015がリリースされると、スプレッド演算子も使用されます
スプレッド演算子（スプレッド）は3つのドット（...）です。これは、配列をコンマで区切られたパラメーターのシーケンスに変換する、restパラメーターの逆演算のようなものです。
...演算子は、主に配列とオブジェクトの一部の操作に使用されます。
関数呼び出し
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
上記の例からわかるように、spread演算子の最初の機能は、配列を一連のパラメーターに変換することです。
上記の機能によってもたらされる最も重要な便利さは、applyメソッドを置き換えることです。元々、applyはパラメーターを渡すために配列を必要としますが、今では...演算子を使用するだけで済みます。
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
上記の例は非常に直感的であり、これ以上説明する必要はないと思います。
配列をコピーする
配列は参照型であり、直接割り当てられることは誰もが知っています。2つの配列のポインタは、同じ参照アドレスを指します。配列の内部メンバーの1つの値を変更すると、他の配列の対応する値も変更されます。 。
したがって、es5では、concactメソッドを使用して配列のクローンを作成します。
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
...演算子を使用すると、次のように記述できます。
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
配列をマージ
上記のクローン配列の記述では、es5で、空の配列をマージすることによってクローン配列の効果をシミュレートしていることがわかります。したがって、...演算子を使用して配列をマージすることもできます。
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
ただし、どちらの方法も浅いコピーであるため、使用する際には注意が必要です。元の配列のメンバーが変更されると、それらは新しい配列に同期的に反映されます。
文字列を配列に変換する
[...'hello'] // [ "h", "e", "l", "l", "o" ]
...演算子は、Unicode文字の長さを計算する問題も解決します。
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
文字列を配列に変換することに加えて、...イテレータインターフェイスを定義する任意のオブジェクトを実際の配列に変換することもできます。
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
オブジェクトをマージ
... ES2018でオブジェクトに導入されたため、オブジェクトを配列のように組み合わせることができます。
ES2015では、Object.assign（）を使用してオブジェクトをマージします。ES2018では、代わりに...演算子を使用できます。
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);