其餘與展開運算子 在

關於 其餘與展開運算子

JavaScript 有一個內建的...運算子，可以更輕鬆地處理數量不確定的元素。視情境而定，它稱為其餘運算子或展開運算子。

其餘運算子

其餘元素

當...出現在賦值式的左側時，這三個點就稱為rest運算子。三個點加上一個變數名稱，稱為其餘元素。它會收集零個或多個值，並把它們存進單一陣列。

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

注意，在 JavaScript 中，與某些其他語言不同，其餘元素後面不能有尾隨逗號。它必須是解構賦值中的最後一個元素。下面的例子會拋出SyntaxError：

const [...items, last] = [2, 4, 8, 16]

其餘屬性

和陣列類似，其餘運算子也可以用來收集一個或多個物件屬性，並把它們存進單一物件中。

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

其餘參數

當...出現在函式定義中、緊接在最後一個引數旁邊時，該參數就稱為其餘參數。它讓函式可以接受數量不確定的引數，並以陣列的形式呈現。

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

展開

展開元素

當...出現在賦值式的右側時，它稱為spread運算子。它會把陣列展開成一串元素。和其餘元素不同，它可以出現在陣列實體表達式中的任何位置，而且可以出現多個。

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

展開屬性

和陣列類似，展開運算子也可以用來把屬性從一個物件複製到另一個物件。

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }