Spread Operator, Rest Operator, The three Dots in JavaScript

展開與其餘運算子，三個點是什麼魔法？

@ JavaScript

什麼是三個點？

... 運算子可在陣列中使用，是一種實用的語法讓資料處理變得更簡潔，快速的將內容展開到新的陣列中，它有兩種用法：

  • 展開運算子 (Spread Operator)
  • 其餘運算子 (Rest Operator)

語法一模一樣都是三個點，但在不同的位置會有不同的效果。

展開運算子 (Spread Operator)

可將陣列「展開」成個別的值，或是將可迭代(iterable)的物件如：String、Array、TypedArray、Map、Set、函式中的 arguments🔗、 DOM 中的 HTMLCollection🔗 與 NodeList🔗 轉變為陣列。

範例一：將陣列展開並相加

const foo = [1, 2, 3];
const bar = [4, 5, 6];
const foobar = [...foo, ...bar]; // [1, 2, 3, 4, 5, 6]

展開 foo 與 bar 陣列，並將其合併成 foobar 陣列，展開是以潛拷貝的形式，也就是說 foobar 陣列中的值是 foo 與 bar 陣列的值的複製，而不是參考的複製，這樣展開複製的做法合適用在不想修改原本的陣列的狀況下產生新陣列。

範例二：作為函式的參數

function addNumbers(a, b, c) {
  return a + b + c;
}


addThreeNumbers(...[0, 1, 2]);

展開的值可以作為函式的參數，這樣就不用一個一個的傳入參數。

範例三：轉換類陣列或可迭代物件為陣列

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
const list = document.querySelector('#list');


console.log(list.children);
// HTMLCollection(3) [li, li, li]


console.log([...list.children]);
// [li, li, li]

或是把一些類陣列物件轉換成陣列，這樣可以讓不具備陣列方法的類陣列物件成為真正的陣列並使用陣列具備的方法。

其餘運算子 (Rest Operator)

其餘運算子用途明確，就是用來收集剩餘的參數為陣列，將「所有剩餘」的參數給打包為一個陣列，必須在陣列參數的最後一位，如果無傳入值就會是一個空陣列。

function sum(...numbers) {
  return numbers.reduce((total, number) => total + number, 0);
}


sum(1, 20, 30, 2); // 53

物件的 rest、spread 屬性

陣列的 rest、spread 則是 ES6 語法，而物件的 rest、spread 屬性是 ES2018 才有的語法，用法基本相似。

const obj = { a: 1, b: 2, c: 3, d: 4 };


const { a, b, ...rest } = obj;
console.log(a); // 1
console.log(b); // 2
console.log(rest); // { c: 3, d: 4 }

參考資料