es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)

前言

本文主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)需要注意的一些事項(xiàng)，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

如果要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值，必須非常小心。

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

上面代碼的寫法會(huì)報(bào)錯(cuò)，因?yàn)?JavaScript 引擎會(huì)將{x}理解成一個(gè)代碼塊，從而發(fā)生語(yǔ)法錯(cuò)誤。只有不將大括號(hào)寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個(gè)問(wèn)題。

// 正確的寫法
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'
//這實(shí)際上說(shuō)明，對(duì)象的解構(gòu)賦值是下面形式的簡(jiǎn)寫
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也要作為變量賦值，可以寫成下面這樣。

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é)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com