スプレッド演算子...

1.意味

1. 配列をコンマで区切られた一連のパラメータに変換します。
関数が呼び出されたときのみ、スプレッド演算子を括弧で囲むことができることに注意してください。そうしないと、エラーが報告されます。

console.log(...[1, 2, 3])
// 1 2 3
console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

2. この演算子は、主に関数呼び出しに使用されます。この演算子は、配列を一連の引数に変換します。

function add(x, y) {
    
    
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

2. 代替関数の apply() メソッド

apply() の詳細
関数: apply( ) メソッドは、指定された this 値と、配列 (または配列のようなオブジェクト) として提供されるパラメーターを使用して関数を呼び出します。
パラメーター: 全部で 2 つのパラメーターがあり、どちらもオプションです.
最初のパラメーター:
this が指す. (これは、このメソッドによって表示される実際の値ではない場合があります。この関数が非厳密モードの場合、null または未定義として指定されている場合、グローバルオブジェクトへのポインターに自動的に置き換えられ、元の値は2 番目のパラメーター:
配列
または配列のようなオブジェクト。(配列要素は個別のパラメーターとして func 関数に渡されます。パラメーターの値が null または未定義の場合、パラメーターを渡す必要がないことを意味します。) パラメーターが渡されない場合: グローバル変数です
。

スプレッド演算子は配列を拡張できるため、配列を関数パラメーターに変換するために apply() メソッドは不要になりました。

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))

// ES6
new Date(...[2015, 1, 1]);

3.スプレッドオペレーターの適用

(1) 配列をコピーする

配列は複合データ型です。直接コピーする場合は、新しい配列を複製するのではなく、基になるデータ構造にポインタをコピーするだけです。

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;
a1 // [2, 2]

上記のコードでは、a2 は a1 のクローンではなく、同じデータを指す別のポインターです。a2 を変更すると、a1 が直接変更されます。

ES5 は、回避策を使用して配列をコピーすることしかできません。

const a1 = [1, 2];
const a2 = a1.concat();

a2[0] = 2;
a1 // [1, 2]

上記のコードでは、a1 は元の配列のクローンを返し、a2 を変更しても a1 には影響しません。

スプレッド演算子は、配列をコピーする便利な方法を提供します。

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

上記の 2 つの書き方では、a2 は a1 のクローンです。

(2) 配列のマージ

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

ただし、これら 2 つの方法は浅いコピーであるため、使用する際には注意が必要です。

const a1 = [{
    
     foo: 1 }];
const a2 = [{
    
     bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true

上記のコードでは、a3 と a4 は 2 つの異なる方法でマージされた新しい配列ですが、それらのメンバーはすべて元の配列メンバーへの参照であり、浅いコピーです。参照が指す値が変更されると、新しい配列に同期的に反映されます。

(3) 分解代入と組み合わせる

スプレッド演算子を分割代入と組み合わせて、配列を生成できます。

// ES5
a = list[0], rest = list.slice(1)

// ES6
[a, ...rest] = list

配列の割り当てにスプレッド演算子を使用する場合、パラメーターの最後の位置にのみ配置できます。そうしないと、エラーが報告されます。

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

(4)ひも

スプレッド演算子は、文字列を実数配列に変換することもできます。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

4 バイトの Unicode 文字が正しく認識されます。
JavaScript は 4 バイトの Unicode 文字を 2 文字として認識し、スプレッド演算子にはそのような問題はありません。したがって、文字列の長さを正しく返す関数は次のように記述できます。

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

function length(str) {
    
    
  return [...str].length;
}

length('x\uD83D\uDE80y') // 3

(5) Iterator インタフェースを実装するオブジェクト