⭐destructuring assignment

JS ⟩ operator ⟩ assignment ⟩ destructuring

⭐️ ES6 (2015)

in a destructuring assignment,

• right-hand side： an array / object (a “structured” value)

• left-hand side： specifies one or more variable names using a syntax that mimics array / object literal syntax.

// destructuring assignment
let {a} = {a: 1, b: 2};
let [a, b=0, , ...rest] = iterable;

🔴 主題

• destructuring array

• destructuring array (e.g. *integers())

• object destructuring

• nested destructuring

• destructuring arguments

  • rest parameters as object

👥 相關

• destructuring assignment can be used to provide initial value(s).

• often used in tagged template.

• spread operator (...)

• can be used with iterables.

💈範例

// ⭐ array destructuring
let [
    a,
    b = 0,                   // default value
    ,                        // ignore element
    ...rest                  // rest elements as an "array"
] = array

// ⭐ object destructuring
let {
    a,
    b = 0,                    // default value
    c: newPropName,           // new variable name
    ...rest                   // rest properties as an "object"
} = object

// ⭐ smart function parameters
function f(a, b, {
    c,
    d: newPropName = 0,       // new parameter name (with default value)
    ...rest
} = {}){ 
    // do something with: a, b, c, newPropName, rest
}

📗 參考

• JS.info ⟩ Destructuring Assignment
• freeCodeCamp ⟩ How to Use Array and Object Destructuring in JavaScript
• JavaScript: The Definitive Guide ⟩

  • 3.10.3 Destructuring Assignment

  • 8.3.5 Destructuring Function Arguments into Parameters

📘 手冊

• Destructuring assignment