es6學(xué)習(xí)之解構(gòu)時應(yīng)該注意的點
前言
本文主要給大家介紹了關(guān)于在es6解構(gòu)時需要注意的一些事項，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。
如果要將一個已經(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ù)的默認(rèn)值。
[1, undefined, 3].map((x = 'yes') => x); // [ 1, 'yes', 3 ]
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
- ES6知識點整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
- 解析JavaScript的ES6版本中的解構(gòu)賦值
- 深入淺出講解ES6的解構(gòu)
- ES6解構(gòu)賦值實例詳解
- 深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法
- ES6解構(gòu)賦值的功能與用途實例分析
- ES6學(xué)習(xí)之變量的解構(gòu)賦值
- ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法示例
- 基于ES6作用域和解構(gòu)賦值詳解
- ES6 對象的新功能與解構(gòu)賦值介紹
- ES6知識點整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
相關(guān)文章
在JavaScript中,類是通過class關(guān)鍵字來定義的,它的本質(zhì)是一種語法糖,仍然是基于原型鏈的,class 內(nèi)部的屬性和方法最終都會添加到構(gòu)造函數(shù)的 prototype 屬性上,本文給大家介紹了JavaScript Class的正確打開方式,需要的朋友可以參考下2025-03-03
uni-file-picker文件選擇上傳功能實現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
在java中有private屬性，強大的功能js不能實現(xiàn)就矮人一截，匿名函數(shù)，發(fā)揚廣大2010-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉刷新和輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
詳解JavaScript的Symbol類型、隱藏屬性、全局注冊表
這篇文章主要介紹了JavaScript的Symbol類型、隱藏屬性、全局注冊表,本文主要對其使用方法和使用場景做個簡單的介紹，需要的朋友可以參考下2022-05-05
javascript 動態(tài)table添加colspan\rowspan 參數(shù)的方法
動態(tài)的給某個表對象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。2009-07-07
本文通過實例代碼給大家分享了JavaScript貪吃蛇小組件功能 ,需要的朋友可以參考下2017-08-08
現(xiàn)代瀏覽器里提供的新的API越來越傾向于移動手機應(yīng)用，這篇文章主要為大家詳細(xì)介紹了JavaScript手機振動API的相關(guān)資料,需要的朋友可以參考下2016-06-06
Date對象，是操作日期和時間的對象。Date對象對日期和時間的操作只能通過方法。本文就給大家簡單講述一下DATE類型的使用。2015-09-09
在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項目的時候可以使用mock.js來模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實現(xiàn),感興趣的可以了解一下2023-11-11