Rest演算子とSpred演算子
rest演算子とは
配列の引数を可変にする。
spred演算子とは
restと逆で、まとまっているものを分解してくれる。 ...を使うことで、配列の中身を展開しながら出力してくれる
spread構文
rest演算子について
function addNumbers(a,b,c,d) {
const numbers = [1,2,3,4]
return numbers.reduce((sum, number) => {
return sum + number;
}, 0);
}
console.log(addNumbers(1,2,3,4,5,6,7)); //結果 10
この書き方だと、引数の数に固定された結果しか返ってこない
function addNumbers(numbers) {
return numbers.reduce((sum, number) => {
return sum + number;
}, 0);
}
console.log(addNumbers([1,2,3,4,5,6,7])); //結果 28
もっとスマートにしたい。
rest演算子を使った書き方をする
rest演算子.js
function addNumbers(...numbers) { //この ...number!!
return numbers.reduce((sum, number) => {
return sum + number;
}, 0);
}
console.log(addNumbers(1,2,3,4,5,6,7));
spread演算子
以下のコードをspred演算子に書き換えてみる。
const defaultColors = ['red','blue'];
const userFavoriteColors = ['pink','purple'];
console.log(defaultColors.concat(userFavoriteColors));
//結果 (4) ["red", "blue", "pink", "purple"]
↓
const defaultColors = ['red','blue'];
const userFavoriteColors = ['pink','purple'];
console.log([...defaultColors, ...userFavoriteColors]);
//結果 ["red", "blue", "pink", "purple"]
...を使うことで、中身を展開しながら出力してくれる。
下記のような場合、
console.log([...defaultColors, userFavoriteColors]);
//出力結果 ["red", "blue", ["pink", "purple"]]
第二引数userFavoriteColorsは...無し。そうすると、結果が展開されず配列で返されてしまうので、思った挙動にならない。
こんなこともできる
今までは配列をconcatしてきたけど、一個だけ色を持ってきたい、先頭に。間に。
const defaultColors = ['red','blue'];
const userFavoriteColors = ['pink','purple'];
const OthelloColors = ['black','white'];
console.log([`gray`, ...defaultColors, `beige`, userFavoriteColors, ...OthelloColors]);
//["gray", "red", "blue", "beige", Array(2), "black", "white"]
このように、新しい配列を展開しながらて配列を作ることも可能。