javascript - ES2015 / ES6 での Spread 構文と Rest パラメータ

Question

ES2015 のスプレッド構文とレスト パラメータについて混乱しています。適切な例でそれらの違いを説明できる人はいますか?

Answer 1

Javascript の3 つのドット ( ...) 演算子は、次の 2 つの方法で使用できます。

1. Rest パラメータ: 残りのすべての要素を配列に収集します。

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"]

2. Spread operator : iterables(配列/オブジェクト/文字列)を単一の引数/要素に展開できるようにします。

var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

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

Answer 2

3つのシナリオを検討

1] 演算子を使用せずに

function add(x, y) {
  return x + y;
}

add(1, 2, 3, 4, 5) // returns 3  (function will takes first 2 arg only)

2] 残りの演算子を使用

function add(...args) {
  let result = 0;

  for (let arg of args) result += arg;

  return result
}

add(1) // returns 1
add(1,2) // returns 3
add(1, 2, 3, 4, 5) // returns 15

- 任意の数の引数を配列に集めることができます

3]スプレッド演算子を使用

const arr = ["Joy", "Wangari", "Warugu"];
const newArr = ["joykare", ...arr];

The value of newArr will be [ 'joykare', 'Joy', 'Wangari', 'Warugu' ]

もう一つ

function add(a, b, c) {
  return a + b + c ;
}
const args = [1, 2, 3];

add(...args);

-We have been using arrays to demonstrate the spread operator, 
but any iterable also works. So, if we had a 
string const str = 'joykare', [...str] translates to [ 'j', 'o', 'y', 'k', 'a', 'r', 'e' ]