Edited at

#6. スプレッド演算子

スプレッド演算子の役割は、以下の4種類。


1. 引数の適用(Apply)

ex. myArgs配列を前から順番に引数(arguments)に展開する

// 長さ、幅、高さより体積を計算し、結果を返す関数

const calcVolume = (length, width, height) => {
return length * width * height;
};

// 関数に渡す引数(パラメータ)を配列で定義
const myLength = 1;
const myWidth = 3;
const myHeight = 5;
const myArgs = [myLength, myWidth, myHeight];

// 体積を計算する関数にスプレッド演算子を用いて引数を適用させる
const volume = calcVolume(...myArgs);
console.log(volume);
// console => 15


2. 分解(Destructuring)

ex. 配列を要素x , 要素y , 残りの配列(要素)に分解する

var [x, y, ...rest] = [1, 2, 3, 4];

console.log(x, y, rest);
// console => 1, 2, [3, 4]


3. 配列の代入(Assignment)

ex. 配列myListの先頭に新しい配列(要素)を追加する

var myList = [1, 2];

myList = [...myList, 3, 4];
console.log(myList);
// console => [1, 2, 3, 4]

ex. 配列myListの指定の位置に新しい配列(要素)を挿入する

var myList = [1, 2];

myList = [0, ...myList, 4];
console.log(myList);
// console => [0, 1, 2, 4]

ex. 配列myListの末尾に新しい配列(要素)を追加する

var myList = [1, 2];

myList = [0, 4, ...myList];
console.log(myList);
// console => [0, 4, 1, 2]


4. オブジェクト展開(Spread)

ex. myDesign1 オブジェクトを展開し、新規 myDesign2 オブジェクトを作成する

// デザイン1オブジェクトを作成

const myDesign1 = {
name: 'document1',
type: '2D',
size: {
length: 1,
width: 2
}
};

// デザイン1オブジェクトの値の確認する
console.log(myDesign1);
// console => {name: "document1", type: "2D", size: { length: 1, width: 2 }}

// デザイン1オブジェクトをデザイン2オブジェクトに展開し、作成する
const myDesign2 = {...myDesign1};

// デザインデータ2の値を変更する
myDesign2.name = 'document2';
myDesign2.type = '3D';
myDesign2.size.length = 3;
myDesign2.size.width = 4;

// サイズ情報(長さ、幅)に、新しいサイズ情報(高さ)を追加する
myDesign2.size.height = 5;

// デザインデータ2の値の確認する
console.log(myDesign2);
// console => {name: "document2", type: "3D", size: { length: 3, width: 4, height: 5 }}