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

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

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

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

1.基本用法
ES6允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu).
可以從數(shù)組中提取值,按照位置的對應(yīng)關(guān)系對變量賦值.
本質(zhì)上,這種寫法屬于模式匹配,只要等號兩邊的模式相同,左邊的變量就會被賦予對應(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),即等號左邊的模式只匹配等號右邊數(shù)組的一部分,
這種情況下,解構(gòu)依然可以成功.
如果等號的右邊不是數(shù)組(或者嚴(yán)格的說,不是可遍歷的結(jié)構(gòu)),那么將會報錯.

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

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

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"

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

// 如果默認(rèn)值是一個表達(dá)式,那么這個表達(dá)式是惰性求值的,即只有在用到的時候才會求值
// 因為x能取到值,所以函數(shù)f根本不會執(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

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

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

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

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

// 如果變量名與屬性名不一致,必須寫成下面這樣
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)的對象

// 注意,這時p是模式,不是變量,因此不會被賦值
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都是模式,不會被賦值
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是一個對象
console.log(arr);   // [true], arr[0]被賦值為true,所以arr是一個數(shù)組