ES6 スプレッド演算子

ES6 のスプレッド演算子は、複数パラメータ関数へのパラメータの受け渡し、Apply の置換、配列の結合、値の分解と代入に非常に便利であるため、非常に便利であると言えます。

スプレッド演算子は 3 つのドット「...」です。これは、Iterator インターフェイスを実装するオブジェクトの各要素が 1 つずつ反復され、個別に使用されるように取り出されるという意味です。

この例を見てください:

console.log(...[3, 4, 5])

結果:

3 4 5

実際の呼び出しは次のとおりです:

console.log(3, 4, 5)

配列を結合する

使用可能スプレッド演算子は複数を結合します配列 。

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log([...arr1, ...arr2, ...arr3])

結果:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

関数の複数パラメータの受け渡し、置換Apply

まずパラメータを配列として定義し、関数が定義されます。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
  console.log( a1, a2, a3, a4)
}

ES6 より前では、関数を呼び出すには配列パラメータを渡すか、添え字に従って配列要素にアクセスする必要がありました。欠点は、配列の数と関数のパラメータの数が完全に一致することです。境界があり、1 つの数値が変更される場合は、変更する必要があります。

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

または、Apply を使用して呼び出すだけでも、結果はもちろん問題なく、ES6 より前では最もよく使用されていました。

fun1.apply(null, arr4)

スプレッド演算子を使うと便利です。

fun1(...arr4)

結果:

arg1 arg2 arg3 arg4

通話はシンプルで爽快です。

分割および代入

と組み合わせて使用​​すると、配列の最初の要素以降のすべての要素を別の配列に抽出できます。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)

結果:

1[ 2, 3, 4, 5, 6 ]

ただし、分割演算と組み合わせた場合、スプレッド演算子は最後の演算子でのみ使用でき、それ以外の場合はエラーが報告されることに注意してください。

Iterator インターフェースを実装するオブジェクトを展開できます

たとえば、Map、Set、配列は Iterator インターフェースから実装されますが、Object は実装されていないため、Object を拡張するとエラーが報告されます。

セットを展開します。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)

結果:

1 2 3

拡張マップ。

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)

結果:

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

マップのキーと値のペアの構造に従って、展開された配列には 2 つの要素があり、1 つは key 、もう 1 つは value であることに注意してください。

Objectを拡張するとエラーが報告されます。

以上がES6 スプレッド演算子の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。