🥑

Javascriptの3つのドット(...)でありますまいか

2021/01/30に公開1

スプレッド構文 と呼ばれる。

spread 演算子は、JavaScript ES6 の演算子に新たに追加されたもの。この演算子は、イテレート可能な配列(配列など)を受け取り、それを個々の要素に展開する。
spread 演算子は、JS オブジェクトの浅いコピーを作成するために一般的に使用される。この演算子を使用すると、コードが簡潔になり、可読性が向上する。

構文
スプレッド演算子は3つのドット で表される。

let array = [...value]

例としては、以下のようなものがある。

1. 配列のコピー

配列2に、配列1の要素がコピーされる。配列1に加えられた変更は配列2には反映されず、その逆も同様。
単純代入演算子を使用した場合、配列2には配列1への参照が代入され、一方の配列で行われた変更がもう一方の配列に反映されることになるが、これはほとんどの場合好ましくない。

let array1 = ['h', 'e', 'l', 'l', 'o'];
let array2 = [...array1];
console.log(array2);
['h', 'e', 'l', 'l', 'o'] // output

2. ある配列の要素を別の配列に挿入する

第2の配列の任意の要素の後に1つの配列を付加することができる。

let desserts = ['cake', 'cookie', 'donut'];
let desserts1 = ['icecream', 'flan', 'frozen yoghurt', ...desserts];
console.log(desserts);
//Appending baked_desserts after flan
let desserts2 = ['icecream', 'flan', ...desserts, 'frozen yoghurt'];
console.log(desserts2);
// output
[ 'icecream', 'flan', 'frozen yoghurt', 'cake', 'cookie', 'donut' ] [ 'icecream', 'flan', 'cake', 'cookie', 'donut', 'frozen yoghurt' ]

3. 配列から引数へ


function multiply(number1, number2, number3) {
  console.log(number1 * number2 * number3);
}
let numbers = [1,2,3];
multiply(...numbers);

spread 演算子を使うことで、配列の要素を個別の引数として渡すことができるようになる。

//Passing elements of the array as arguments to the Math Object
let numbers = [1,2,300,-1,0,-100];
console.log(Math.min(...numbers));

1行のコードで配列を複数の引数に展開してくれる。

Discussion