1槽华、數(shù)組的解構(gòu)賦值
1.1、基本用法
ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值祟敛,對(duì)變量進(jìn)行賦值疤坝,這被稱為解構(gòu)(Destructuring)。
很久很久以前馆铁,我們?yōu)檫@里賦值跑揉,只能直接指定值。
let a = "x";
let b = "x";
let c = "b";
現(xiàn)在叼架,用ES6畔裕,我們可以寫成:
let [a, b, c] = ["x", "x", "b"];
使用嵌套數(shù)組進(jìn)行結(jié)構(gòu)例子。
let [a, ...b] = [1, 2, 3, 4];
// 輸出
a // 1
b // [2, 3, 4]
let [x, y, ...z] = ["x"];
x // "x"
y // undefined
z // []
如果解構(gòu)不成功乖订,變量的值就等于undefined
let [x] = [];
let [a, b] = [1];
1.2扮饶、默認(rèn)值
解構(gòu)賦值允許指定默認(rèn)值。
let [a = true] = [];
let [x, y = "b"] = ["a", "diudiudiu"];
let [o, p = "hehe'] = ["haha", undefined];
注意乍构,ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符(===)甜无,判斷一個(gè)位置是否有值。所以哥遮,如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined
岂丘,默認(rèn)值是不會(huì)生效的。
2眠饮、對(duì)象的解構(gòu)賦值
let {a, b} = {a: "x", b: "y"};
對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同奥帘。數(shù)組的元素是按次序排列的,變量的取值由它的位置決定仪召;而對(duì)象的屬性沒(méi)有次序寨蹋,變量必須與屬性同名,才能取到正確的值扔茅。
如果變量名與屬性名不一致已旧,必須寫成下面這樣。
let {a: c} = {a: "x", b: "y"};
c // x
let o = {first: "x", last: "b"};
let {first: f, last: l} = o;
這實(shí)際上說(shuō)明召娜,對(duì)象的解構(gòu)賦值是下面形式的簡(jiǎn)寫运褪。
let { foo: foo, bar: bar } = { foo: "x", bar: "b" };
也就是說(shuō),對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制玖瘸,是先找到同名屬性秸讹,然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者雅倒,而不是前者璃诀。
let {a: c} = {a: "x", b: "y"};
上面代碼中,a
是匹配的模式屯断,c
才是變量文虏。真正被賦值的是變量c
,而不是模式a
殖演。
對(duì)象的解構(gòu)也可以指定默認(rèn)值氧秘。
let {a: b = 1} = {a: 0};
let {x: y = 3} = {x: 5};
默認(rèn)值生效的條件是,對(duì)象的屬性值嚴(yán)格等于undefined趴久。
如果解構(gòu)不成功丸相,變量的值就等于undefined
let {a} = {b: "c"};
a // undefined
由于數(shù)組本質(zhì)是特殊的對(duì)象,因此可以對(duì)數(shù)組進(jìn)行對(duì)象屬性的解構(gòu)彼棍。
let arr = [1, 2, 3];
let {0: first, [arr.length - 1]: last} = arr;
first // 1
last // 3
數(shù)組arr
的0
鍵對(duì)應(yīng)的值是1
灭忠,[arr.length - 1]
就是2
鍵,對(duì)應(yīng)的值是3
座硕。
3弛作、字符串的解構(gòu)賦值
字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí)华匾,字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象映琳。
let [a, b, c] = "xxb";
類似數(shù)組的對(duì)象都有一個(gè)length屬性,因此還可以對(duì)這個(gè)屬性解構(gòu)賦值蜘拉。
let {length: len} = "xxb666";
————
前端·小b
紙上學(xué)來(lái)終覺(jué)淺萨西,絕知此事要躬行