こんにちは!セミマサです。この記事はスプレッド構文の備忘録になります。スプレッド構文を使うと引数を展開して渡すことができます。
実際に書いてみよう
展開したい要素の前に「…」をつけます。
配列で使う
1 2 3 | constspread1=[2,3]; constarray1=[1,...spread1,4,5]; console.log(array1);//[1, 2, 3, 4, 5] |
配列array1に配列spread1を展開して渡しています。
オブジェクトに対して使う
1 2 3 4 5 6 7 8 9 10 11 12 | constspread2={ name:"Taro", age:20 }; constspread3={ name:"Ziro", location:"Kyoto" }; console.log({ ...spread2, ...spread3 });//{name: "Ziro", age: 20, location: "Kyoto"} |
オブジェクトspread2とオブジェクトspread3を展開して出力しています。被っているnameプロパティは後ろにあるspread3のものが優先されていますね。
関数に対して使う
1 2 3 | constSpreadTest=(x,y,z)=>[x,y,z]; constspread4=[0,1,2]; console.log(SpreadTest(...spread4));//[0, 1, 2] |
関数に渡す引数に対してもスプレッド構文は使用可能です。
1 2 | constSpreadTest2=(v,w,x,y,z)=>[v,w,x,y,z]; console.log(SpreadTest2(...spread4,3,4));//[0, 1, 2, 3, 4] |
引数の一部だけスプレッド構文を使うこともできます。
おわりに
JavaScriptのスプレッド構文に関しての備忘録でした。新しい発見があったら追記していきます!