スプレッド構文と残りのパラメーター: 違いを理解する

ES2015 の 2 つの新機能、スプレッド構文と残りのパラメーターは、次の強力な方法を提供します。配列とオブジェクトを操作します。どちらも似ているように見えますが、異なる目的を果たし、それぞれに独自の機能があります。

スプレッド構文

スプレッド構文 (3 つのドット「...」で表されます) ) を使用すると、反復可能 (配列やオブジェクトなど) を別の反復可能内の個々の要素に分散または拡張できます。この機能を使用すると、複数の配列またはオブジェクトを新しいものに簡単にマージまたは結合できます。

たとえば、次のコードを考えてみましょう:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

このスニペットでは、...abc と ... def スプレッド構文は、abc 配列と def 配列を個別の要素に展開し、両方の配列のすべての要素を含む新しいアルファ配列を作成します。

Rest Parameter

一方、残りのパラメーター (識別子が前に付いた 3 つのドット "..." で示される) は、関数に渡された残りの引数を 1 つの配列に収集します。残りのパラメータは、関数のパラメータ リストの最後のパラメータである必要があります。

動作中の残りのパラメータの例は次のとおりです。

function sumAll(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total  = num;
  }
  return total;
}

let result = sumAll(1, 2, 3, 4, 5);
console.log(result); // result == 15

このコードでは、...numbers 残りのパラメータは sumAll 関数に渡される残りの引数 (この場合は 1、2、3、4、および 5) を収集し、単一の数値配列。