ES6解構(gòu)賦值

Muninn 發(fā)布于2019-08-21 15:11 / 3446人閱讀

摘要：一數(shù)組解構(gòu)賦值解構(gòu)賦值也可嵌套賦值結(jié)果結(jié)果結(jié)果結(jié)果如果解構(gòu)不成功，變量就會(huì)等于。解構(gòu)賦值允許指定默認(rèn)值。例如數(shù)組對(duì)象如果變量名與屬性名稱不一致必須寫成下面這樣和不允許重新聲明其他同數(shù)組解構(gòu)賦值。

一、數(shù)組解構(gòu)賦值：
var a = 1;
var b = 2;
var c = 3;
解構(gòu)賦值：
var [a,b,c] = [1,2,3];
let [a,b,c] = new Set([1,2,3]);
也可嵌套賦值：
let [foo,[[bar],[baz]]] = [1,[[2],[3]]];
結(jié)果：
foo //  1; bar // 2; baz // 3;
 
let [,,third] == ["foo","bar","baz"];
結(jié)果：
third // "baz";
 
let [head, ...tail] = [1,2,3,4];
結(jié)果：
head // 1;
tail // [2,3,4];
 
let [x, y, ...z] = ["a"];
結(jié)果: 
x // "a"; 
y // undefined;
z // [];
 
如果解構(gòu)不成功，變量就會(huì)等于undefined。
var [foo] == [];  foo // undefined
var [bar,foo] == [1];  foo // undefined
 
 
不完全解構(gòu)
let [x,y] = [1,2,3];
x // 1
y // 2
 
let [a,[b],c] = [1,[2,3],4];
a // 1;
b // 2;
c // 4;
 
只要某種數(shù)據(jù)解構(gòu)具有迭代接口，都可以采用數(shù)組形式的解構(gòu)賦值。
 
解構(gòu)賦值允許指定默認(rèn)值。
var [foo = true] = []; foo // true
let [x, y="b"] = ["a"]; //x = "a"; y = "b"
let [x, y="b"] = ["a",undefined]; //x = "a"; y = "b"
ES6內(nèi)部使用（===）完全等于來(lái)判斷一個(gè)位置是否有值，所以，如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined，默認(rèn)值不會(huì)生效。
var [x = 1] = [undefined]; x // 1
var [x = 1] = [null]; x // null
上面如果一個(gè)數(shù)組成員是null，默認(rèn)值就不會(huì)生效，因?yàn)閚ull不嚴(yán)格等于undefined
 
解構(gòu)賦值的惰性取值：
function f(){ return "aaa"};
let [x = f()] = [1];
x // 1
上面代碼中x可以取到值1，所以就不會(huì)執(zhí)行表達(dá)式，所以x = 1,等價(jià)于下面代碼
var x;
if([1][0] === undefined){x =f()}else{x = [1][0]}
變賦值之前必須聲明
二、對(duì)象解構(gòu)賦值
var {foo, bar} = {foo:"aaa", bar:"bbb"};
foo // "aaa"
bar // "bbb"
*對(duì)象的解構(gòu)賦值與數(shù)組一個(gè)重要的不同。數(shù)組必須是按次序排列，變量取值由未知決定；
而對(duì)象的屬性沒次序，變量必須與屬性同名，才能取到正確的值。例如：
數(shù)組：let [x,y] = [1,2];  // x = 1,  y = 2
對(duì)象：var {foo, bar} = {bar:"aaa", foo:"bbb"}; // foo = "bbb", bar = "aaa"
var {baz} = {bar:"aaa"} // baz = "undefined"
如果變量名與屬性名稱不一致；必須寫成下面這樣：
var {foo：baz} = {foo: "aaa", bar: "bbb"};  // baz = "aaa"
let和const不允許重新聲明！
其他同數(shù)組解構(gòu)賦值。
三、字符串解構(gòu)賦值
const [a,b,c,d,e] = "hello"; // a="h", b="e"... e="o";
類似與數(shù)組對(duì)象都有長(zhǎng)度(length屬性)；因此還可以對(duì)這個(gè)屬性解構(gòu)賦值
let {length : len} = "hello"; // len = 5
四、數(shù)值和布爾值得解構(gòu)賦值
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
[[1,2],[3,4]].map(([a,b]) => a+b); // [3,7];
函數(shù)參數(shù)的解構(gòu)也可以使用，默認(rèn)值
function move({x=0, y=0} = {}){
        return [x,y];
}
move({x:3,y:8}); // [3,8];
move({x:3}); // [3,0];
move({});//[0,0]
move();//[0,0]
undefined會(huì)觸發(fā)函數(shù)的默認(rèn)值
[1,undefined,3].map((x = "yes")=>x) // [1,"yes",3]