概要
スプレッド構文についての記事です。
スプレッド構文は配列内での使用と関数内での使用があります。
スプレッド構文
配列を展開して渡すことができます。
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);
});
//りんごです
//ばななです
//ぶどうです
//いちごです
↧