變量的解構(gòu)賦值

harriszh 發(fā)布于2019-08-20 18:34 / 2841人閱讀

摘要：數(shù)組的解構(gòu)賦值基本用法允許按照一定模式從數(shù)組和對(duì)象中提取值對(duì)變量進(jìn)行賦值這被稱(chēng)為解構(gòu)可以從數(shù)組中提取值按照位置的對(duì)應(yīng)關(guān)系對(duì)變量賦值本質(zhì)上這種寫(xiě)法屬于模式匹配只要等號(hào)兩邊的模式相同左邊的變量就會(huì)被賦予對(duì)應(yīng)的值如果結(jié)構(gòu)不成功變量的值就等于另一種

數(shù)組的解構(gòu)賦值

1.基本用法
ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱(chēng)為解構(gòu).
可以從數(shù)組中提取值,按照位置的對(duì)應(yīng)關(guān)系對(duì)變量賦值.
本質(zhì)上,這種寫(xiě)法屬于模式匹配,只要等號(hào)兩邊的模式相同,左邊的變量就會(huì)被賦予對(duì)應(yīng)的值.

var [a, b, c] = [1, 2, 3];
var [d, ...array] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(array); // [2, 3]

let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
console.log(bar);
console.log(baz);

let [, , third] = [1, 2, 3];
console.log(third); // 3

2.如果結(jié)構(gòu)不成功,變量的值就等于undefined.
另一種情況是不完全解構(gòu),即等號(hào)左邊的模式只匹配等號(hào)右邊數(shù)組的一部分,
這種情況下,解構(gòu)依然可以成功.
如果等號(hào)的右邊不是數(shù)組(或者嚴(yán)格的說(shuō),不是可遍歷的結(jié)構(gòu)),那么將會(huì)報(bào)錯(cuò).

let [bar1, foo1] = [1];
console.log(bar1);  // 1
console.log(foo1);  // undefined

3.默認(rèn)值
解構(gòu)賦值允許指定默認(rèn)值
注意,ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符(===)判斷一個(gè)位置是否有值,所以,如果一個(gè)數(shù)組成員
不嚴(yán)格等于undefined,默認(rèn)值是不會(huì)生效的.

var [foo = true] = [];
console.log(foo); // true
var [x, y = "b"] = ["a"];
console.log(x); // "a"
console.log(y); // "b"

var [xx, yy = "b"] = ["a", undefined];
console.log(xx);    // "a"
console.log(yy);    // "b"

// 如果一個(gè)數(shù)組成員是null,默認(rèn)值就不會(huì)生效,因?yàn)閚ull不嚴(yán)格等于undefined
var [xxx = 1] = [undefined];
var [yyy = 1] = [null];
console.log(xxx);   // 1
console.log(yyy);   // null

// 如果默認(rèn)值是一個(gè)表達(dá)式,那么這個(gè)表達(dá)式是惰性求值的,即只有在用到的時(shí)候才會(huì)求值
// 因?yàn)閤能取到值,所以函數(shù)f根本不會(huì)執(zhí)行
function f() {
    console.log("aaa");
}
let [xxxx = f()] = [1];

// 默認(rèn)值可以引用解構(gòu)賦值的其他變量,但該變量必須已經(jīng)聲明
let [x = 1, y = x] = [];
console.log(x); // 1
console.log(y); // 1

let [xx = 1, yy = xx] = [2];
console.log(xx);    // 2
console.log(yy);    // 2

let [xxx = 1, yyy = xxx] = [1, 2];
console.log(xxx);   // 1
console.log(yyy);   // 2

let [xxxx = yyyy, yyyy = 1] = []; // ReferenceError
console.log(xxxx);  // undefined
console.log(yyyy);  // 1

對(duì)象的解構(gòu)賦值

1.解構(gòu)不僅可以用于數(shù)組,還可以用于對(duì)象.
對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同,數(shù)組的元素是按次序排列的,變量的取值由它的位置決定.
而對(duì)象的屬性沒(méi)有次序,變量必須與屬性同名,才能取到正確的值.
也就是說(shuō),對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制,是先找到同名屬性,然后再賦給對(duì)應(yīng)的變量.
真正被賦值的是后者,而不是前者.
這實(shí)際上說(shuō)明,對(duì)象的解構(gòu)賦值是以下形式的簡(jiǎn)寫(xiě).

var { foo: foo, bar: bar } = {
    foo: "aaa",
    bar: "bbb"
};

var { foo, bar } = {
    foo: "aaa",
    bar: "bbb"
};
console.log(foo);   // "aaa"
console.log(bar);   // "bbb"

// 如果變量名與屬性名不一致,必須寫(xiě)成下面這樣
var { foo1: baz1 } = {
    foo1: "aaa",
    bar: "bbb"
};
// console.log(foo1);   // Uncaught ReferenceError: foo1 is not defined
console.log(baz1);  // "aaa"

let { first: f, last: l } = { first: "hello", last: "world" };
console.log(f); // "hello"
console.log(l); // "world"

2.和數(shù)組一樣,解構(gòu)也可以用于嵌套解構(gòu)的對(duì)象

// 注意,這時(shí)p是模式,不是變量,因此不會(huì)被賦值
var obj = {
    p: [
        "hello",
        { y: "wrold" }
    ]
};
var { p: [x, { y }] } = obj;
console.log(x); // "hello"
console.log(y); // "world"

// 只有l(wèi)ine是變量,loc和start都是模式,不會(huì)被賦值
var node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};
var { loc: { start: { line } } } = node;
console.log(line);

// 嵌套賦值
let obj1 = {};
let arr = [];
({ foo: obj1.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj1);  // {prop:123}, obj1.prop被賦值123,所以obj1是一個(gè)對(duì)象
console.log(arr);   // [true], arr[0]被賦值為true,所以arr是一個(gè)數(shù)組

GPU云服務(wù)器云服務(wù)器解構(gòu)賦值 php的變量賦值 php 賦值類(lèi)的變量外部變量賦值

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84717.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

harriszh

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

BUI Webapp用于項(xiàng)目中的一點(diǎn)小心得

閱讀 1694·2019-08-30 15:54
前端面試題總結(jié)——綜合問(wèn)題(持續(xù)更新中)

閱讀 3346·2019-08-26 17:15
在瀏覽器調(diào)起本地應(yīng)用的方法

閱讀 3536·2019-08-26 13:49
leetcode 鏈表相關(guān)題目解析

閱讀 2589·2019-08-26 13:38
【刷算法】丑數(shù)

閱讀 2301·2019-08-26 12:08
webstorm預(yù)覽html配置localhost為本機(jī)ip地址

閱讀 3065·2019-08-26 10:41
籃球即時(shí)比分api接口調(diào)用示例代碼

閱讀 1378·2019-08-26 10:24
Webpack包教不包會(huì)

閱讀 3387·2019-08-23 18:35

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

變量的解構(gòu)賦值

相關(guān)文章

**ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值**

**ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值**

**es6 - 解構(gòu)賦值**

**ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值**

**ES6-變量的解構(gòu)賦值(3)**

**《ES6學(xué)習(xí)2》變量的解構(gòu)賦值**

發(fā)表評(píng)論

0條評(píng)論

harriszh

男|高級(jí)講師

TA的文章

BUI Webapp用于項(xiàng)目中的一點(diǎn)小心得

前端面試題總結(jié)——綜合問(wèn)題(持續(xù)更新中)

在瀏覽器調(diào)起本地應(yīng)用的方法

leetcode 鏈表相關(guān)題目解析

【刷算法】丑數(shù)

webstorm預(yù)覽html配置localhost為本機(jī)ip地址

籃球即時(shí)比分api接口調(diào)用示例代碼

Webpack包教不包會(huì)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

變量的解構(gòu)賦值

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！