web-dev-qa-db-ja.com

ES2015 / ES6のスプレッド構文とRESTパラメーター

ES2015のspread構文とrestパラメーターについて混乱しています。誰かがそれらの違いを適切な例で説明できますか？

javascriptecmascript-6variadic-functionsspread-syntax
53
Nur Rony

スプレッドを使用する場合、単一の変数をさらに拡張します：

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

残余引数を使用する場合、関数の残りのすべての引数を1つの配列にまとめます：

function sum( first, ...others ) {
    for ( var i = 0; i < others.length; i++ )
        first += others[i];
    return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;
110
TbWill4321

ES6には、新しい機能3つのドット...

これらのドットの使用方法は次のとおりです。

休息/収集家/収集として

var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

ここに ...mはコレクターであり、残りのパラメーターを収集します。内部的に私たちが書くとき：

var [c, ...m] = [1,2,3,4,5]; JavaScriptは以下を行います

var c = 1,
    m = [2, 3, 4, 5];

スプレッドとして

var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

ここに、 ...paramsは、そのすべての要素をotherに割り当てるように広がります。

内部的にjavaScriptは以下を行います

var other = [1, 2].concat(params);

お役に立てれば。

59
Manishz90

概要：

JavaScriptでは...は過負荷です。演算子が使用される場所に基づいて、異なる操作を実行します。

  1. 関数の関数引数で使用する場合宣言/式残りの引数を配列に変換します。このバリアントはRest parameters構文と呼ばれます。
  2. 他の場合には、ゼロ個以上の引数（関数呼び出し）または要素（配列リテラル）が期待される場所で反復可能な値を広げます。このバリアントはSpread構文と呼ばれます。

例：

レストパラメーターの構文：

function rest(first, second, ...remainder) {
  console.log(remainder);
}

// 3, 4 ,5 are the remaining parameters and will be 
// merged together in to an array called remainder 
rest(1, 2, 3, 4, 5);

スプレッド構文：

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// the numbers array will be spread over the 
// x y z parameters in the sum function
console.log(sum(...numbers));


// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers);
9
Willem van der Veen

コードに「...」が表示されている場合は、残りのパラメーターまたはスプレッド演算子です。

それらを区別する簡単な方法があります：

...が関数パラメーターの最後にある場合、それは「残りのパラメーター」であり、リストの残りを配列に収集します。関数呼び出しなどで...が発生した場合、「スプレッド演算子」と呼ばれ、配列をリストに展開します。パターンを使用する：

残りのパラメーターは、任意の数の引数を受け入れる関数を作成するために使用されます。 spread演算子は、多くの引数のリストを通常必要とする関数に配列を渡すために使用されます。これらを組み合わせることで、リストとパラメーターの配列間を簡単に移動できます。詳細については ここをクリック

5
jack

ES6に追加されたこれら3つのドット_..._には、Spread演算子とRestパラメーターの2つの意味があります

スプレッド演算子：3つのドットを使用して、iterablesをiterablesで展開します。つまり、arrays、stringなどを引数として使用します。たとえば、Math.max()関数は不定の数の引数を想定しているため、Spread演算子を使用して、Math.max()関数の引数として要素を展開できます。 mdn の例

_console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

var array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3
_

別のユースケースは、たとえばこの配列を追加することです

_const videoGames = ['mario galaxy', 'zelda wind waker', 'ico'];
_

別の配列に追加できます

_const favoritesVideoGames = ['Shadow of the colosus', ...videoGames];
_

favoritesVideoGames値は

_[ 'Shadow of the colosus', 'mario galaxy', 'zelda wind waker', 'ico' ]
_

Restパラメーターについて、ここでは [〜＃〜] mdn [〜＃〜] 定義

残りのパラメーター構文により、不特定数の引数を配列として表すことができます。

これは、多くの要素を単一の要素にパックできることを意味します

ここでMDNからの例

_function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10
_

私は通常、これらの3つのポイントと混同されます。この イラスト by @ stephaniecodes は、その論理を思い出すのに役立ちます。この質問に答えるためにこのイラストからインスピレーションを得たと言います。

役に立つことを願っています。

3
user615274

基本的にPythonのように：

>>> def func(first, *others):
...    return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']
3
Andy Mikhaylenko

Javascriptのつのドット（...）operatorは、2つの異なる方法で使用できます。

  1. レストパラメーター：残りのすべての要素を配列に収集します。
var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, Sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(Sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]
  1. スプレッド演算子：イテラブル（配列/オブジェクト/文字列）を単一の引数/要素に展開できます。
var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

スプレッド演算子は最初の要素にできますが、残りの要素を収集するには、残りのパラメーターが最後のである必要があることに注意してください。

2
Warasint