🔰spread operator (...)

[...iterable], {...obj}, f(...iterable).

JS ⟩ statement ⟩ expression ⟩ operator ⟩ spread

(⭐️ ES2018)

• expands an iterable in places where arguments / elements are expected.

• adds all enumerable own properties of an object to an object literal.

f(...iterable)                // spread arguments
[...iterable, 1, 2, 3]        // spread elements
{...obj, key: 'value'}        // spread properties ⭐️ 

// shallow copy
let arr = [1,2,3];
let copy = [...arr];

⚠️ spread operator (...) is not a true operator, it cannot be evaluated to produce a value❗ (👉 table of operators)

👥 相關

• ...obj only spreads enumerable own properties, 👉 property enumeration.

• can be used to assign default values instead of using Object.assign().

• destructuring assignment

• rest operator (...)

• spread operator (...)

  • can be used in an array literal.

  • "spreads out" an iterable into array elements or function arguments.

• ℹ️ punctuators used： 3 dots (...)

💈範例

const defaults = {x: 0, y: 0, z: 0};    // default values
let r = {x: 3};
r = {...defaults, ...r};                // { x: 3, y: 0, z: 0 }

📗 參考

• JavaScript: The Definitive Guide ⟩ 6.10.4 Spread Operator

📘 手冊

• Spread syntax (...)

• Rest parameters