es6學習之解構時應該注意的點，es6學習之解構

es6學習之解構時應該注意的點，es6學習之解構

前言

本文主要給大家介紹了關於在es6解構時需要注意的一些事項，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

如果要將一個已經聲明的變數用於解構賦值，必須非常小心。

// 錯誤的寫法let x;{x} = {x: 1};// SyntaxError: syntax error

上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。只有不將大括弧寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個問題。

// 正確的寫法let x;({x} = {x: 1});

如果變數名與屬性名稱不一致，必須寫成下面這樣。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };baz // "aaa"let obj = { first: 'hello', last: 'world' };let { first: f, last: l } = obj;f // 'hello'l // 'world'//這實際上說明，對象的解構賦值是下面形式的簡寫let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };baz // "aaa"foo // error: foo is not defined

let obj = { p: [ 'Hello', { y: 'World' } ]};let { p: [x, { y }] } = obj;x // "Hello"y // "World"

注意：這時p是模式，不是變數，因此不會被賦值。如果p也要作為變數賦值，可以寫成下面這樣。

let obj = { p: [ 'Hello', { y: 'World' } ]};let { p, p: [x, { y }] } = obj;x // "Hello"y // "World"p // ["Hello", {y: "World"}]

解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象

let {toString: s} = 123;s === Number.prototype.toString // truelet {toString: s} = true;s === Boolean.prototype.toString // true

函數的參數也可以使用解構賦值。

function add([x, y]){ return x + y;}add([1, 2]); // 3

上面代碼中，函數add的參數表面上是一個數組，但在傳入參數的那一刻，數組參數就被解構成變數x和y。對於函數內部的代碼來說，它們能感受到的參數就是x和y

undefined就會觸發函數參數的預設值。

[1, undefined, 3].map((x = 'yes') => x);// [ 1, 'yes', 3 ]

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援。