JS~スプレッド構文~

概要

スプレッド構文についての記事です。
スプレッド構文は配列内での使用と関数内での使用があります。

スプレッド構文

配列を展開して渡すことができます。

1.配列内
fruitsの配列内の要素をfruit2に追加します。

index.js

 const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];
 const fruits2= ["パパイヤ", "パイナップル", "みかん", ...fruits];

 console.log(fruits2);
//["パパイヤ", "パイナップル", "みかん", "りんご", "ばなな", "ぶどう", "いちご"]

forEachを使用しても結果は同じでした。
このように繰り返し処理を使用して要素の展開をせずにfruits2に追加することができます。

index.js

const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];
const fruits2= ["パパイヤ", "パイナップル", "みかん"];

fruits.forEach((fruit) =>{
 console.log(fruit);
 fruits2.push(fruit)
});

console.log(fruits2);

//["パパイヤ", "パイナップル", "みかん", "りんご", "ばなな", "ぶどう", "いちご"]

2.関数での使用

またこのスプレッド構文は関数内でも使用することができます。

関数に値を渡すときに配列を展開して渡す方法です。
関数に引数が複数ある場合、配列の要素を1つずつ展開して渡すのは記述量も多くなり大変です。そこで[...]を使用することで配列の要素を1つずつ渡すことができます。

index.js

function fruitsOrder(f1,f2,f3,f4) {
  console.log(f1,f2,f3,f4);
}

const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];

fruitsOrder(...fruits);
//りんご ばなな ぶどう いちご

index.js

function fruitsOrder(f1,f2,f3,f4) {
 const fruits2 = [f1,f2,f3,f4];
 fruits2.forEach(fruits3=>{console.log(`${fruits3}です`);});
}

const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];

fruitsOrder(...fruits);

//りんご です
//ばななです
//ぶどうです
//いちごです

index.js

function fruitsOrder(fruit) {
　console.log(`${f}です`);
}

const fruits = ["りんご", "ばなな", "ぶどう", "いちご"];

fruits.forEach(fruit => {
 fruitsOrder(fruit);
});
//りんごです
//ばななです
//ぶどうです
//いちごです