es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
前言
本文主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)需要注意的一些事項(xiàng)，分享出來(lái)供大家參考學(xué)習(xí)，下面話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
如果要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值，必須非常小心。
// 錯(cuò)誤的寫(xiě)法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
上面代碼的寫(xiě)法會(huì)報(bào)錯(cuò)，因?yàn)?JavaScript 引擎會(huì)將{x}理解成一個(gè)代碼塊，從而發(fā)生語(yǔ)法錯(cuò)誤。只有不將大括號(hào)寫(xiě)在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個(gè)問(wèn)題。
// 正確的寫(xiě)法
let x;
({x} = {x: 1});
如果變量名與屬性名不一致，必須寫(xiě)成下面這樣。
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'
//這實(shí)際上說(shuō)明，對(duì)象的解構(gòu)賦值是下面形式的簡(jiǎn)寫(xiě)
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
也就是說(shuō)，對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(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"
注意：這時(shí)p是模式，不是變量，因此不會(huì)被賦值。如果p也要作為變量賦值，可以寫(xiě)成下面這樣。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象
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ù)表面上是一個(gè)數(shù)組，但在傳入?yún)?shù)的那一刻，數(shù)組參數(shù)就被解構(gòu)成變量x和y。對(duì)于函數(shù)內(nèi)部的代碼來(lái)說(shuō)，它們能感受到的參數(shù)就是x和y
undefined就會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值。
[1, undefined, 3].map((x = 'yes') => x); // [ 1, 'yes', 3 ]
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- ES6知識(shí)點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
- 解析JavaScript的ES6版本中的解構(gòu)賦值
- 深入淺出講解ES6的解構(gòu)
- ES6解構(gòu)賦值實(shí)例詳解
- 深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法
- ES6解構(gòu)賦值的功能與用途實(shí)例分析
- ES6學(xué)習(xí)之變量的解構(gòu)賦值
- ES6新特性之解構(gòu)、參數(shù)、模塊和記號(hào)用法示例
- 基于ES6作用域和解構(gòu)賦值詳解
- ES6 對(duì)象的新功能與解構(gòu)賦值介紹
- ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
相關(guān)文章
這篇文章主要介紹了如何基于原生javaScript生成帶圖片的二維碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
分包加載是一種小程序優(yōu)化技術(shù),將小程序不同功能的代碼,分別打包成不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶(hù)在使用時(shí)按需進(jìn)行加載,在構(gòu)建小程序分包項(xiàng)目時(shí),構(gòu)建會(huì)輸出一個(gè)或多個(gè)分包,這篇文章主要介紹了微信小程序---分包加載,需要的朋友可以參考下2024-07-07
java必學(xué)必會(huì)之static關(guān)鍵字
java必學(xué)必會(huì)之static關(guān)鍵字，static關(guān)鍵字是很多朋友在編寫(xiě)代碼和閱讀代碼時(shí)碰到的比較難以理解的一個(gè)關(guān)鍵字，下面結(jié)合大家一起學(xué)習(xí)static關(guān)鍵字2015-12-12
這篇文章主要介紹了JavaScript 函數(shù)柯里化的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
在JavaScript中如何訪(fǎng)問(wèn)暫未存在的嵌套對(duì)象
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何訪(fǎng)問(wèn)暫未存在的嵌套對(duì)象的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
js實(shí)現(xiàn)HTML中Select二級(jí)聯(lián)動(dòng)的實(shí)例
下面小編就為大家分享一篇js實(shí)現(xiàn)HTML中Select二級(jí)聯(lián)動(dòng)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本文主要介紹了js實(shí)現(xiàn)常見(jiàn)的工具條效果的實(shí)例。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
本文主要是為了讓大家更好的理解js的面向?qū)ο螅ㄟ^(guò)實(shí)現(xiàn)拖拽效果向大家展示js面向?qū)ο?，非常不錯(cuò)，這里推薦給大家。2015-02-02
Vue3中使用typescript封裝axios的實(shí)例詳解
這篇文章主要介紹了使用typescript封裝axios的實(shí)例代碼，為了方便，在vue3的配置里面按需加載element-plus，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
webpack是一種前端資源構(gòu)建工具,一個(gè)靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于Webpack完整打包流程的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12