es6學習之解構(gòu)時應(yīng)該注意的點
前言
本文主要給大家介紹了關(guān)于在es6解構(gòu)時需要注意的一些事項,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧。
如果要將一個已經(jīng)聲明的變量用于解構(gòu)賦值,必須非常小心。
// 錯誤的寫法 let x; {x} = {x: 1}; // SyntaxError: syntax error
上面代碼的寫法會報錯,因為 JavaScript 引擎會將{x}理解成一個代碼塊,從而發(fā)生語法錯誤。只有不將大括號寫在行首,避免 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' //這實際上說明,對象的解構(gòu)賦值是下面形式的簡寫 let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
也就是說,對象的解構(gòu)賦值的內(nèi)部機制,是先找到同名屬性,然后再賦給對應(yīng)的變量。真正被賦值的是后者,而不是前者。
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"}]
解構(gòu)賦值時,如果等號右邊是數(shù)值和布爾值,則會先轉(zhuǎn)為對象
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
函數(shù)的參數(shù)也可以使用解構(gòu)賦值。
function add([x, y]){ return x + y; } add([1, 2]); // 3
上面代碼中,函數(shù)add的參數(shù)表面上是一個數(shù)組,但在傳入?yún)?shù)的那一刻,數(shù)組參數(shù)就被解構(gòu)成變量x和y。對于函數(shù)內(nèi)部的代碼來說,它們能感受到的參數(shù)就是x和y
undefined就會觸發(fā)函數(shù)參數(shù)的默認值。
[1, undefined, 3].map((x = 'yes') => x); // [ 1, 'yes', 3 ]
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- ES6知識點整理之函數(shù)數(shù)組參數(shù)的默認值及其解構(gòu)應(yīng)用示例
- 解析JavaScript的ES6版本中的解構(gòu)賦值
- 深入淺出講解ES6的解構(gòu)
- ES6解構(gòu)賦值實例詳解
- 深入理解ES6之數(shù)據(jù)解構(gòu)的用法
- ES6解構(gòu)賦值的功能與用途實例分析
- ES6學習之變量的解構(gòu)賦值
- ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法示例
- 基于ES6作用域和解構(gòu)賦值詳解
- ES6 對象的新功能與解構(gòu)賦值介紹
- ES6知識點整理之數(shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
相關(guān)文章
js實現(xiàn)HTML中Select二級聯(lián)動的實例
下面小編就為大家分享一篇js實現(xiàn)HTML中Select二級聯(lián)動的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01