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 サイトの他の関連記事を参照してください。