ES6解構(gòu)賦值
什么是解構(gòu)賦值
MDN解釋: 解構(gòu)賦值語法是一個(gè) Javascript 表達(dá)式，這使得可以將值從數(shù)組或?qū)傩詮膶?duì)象提取到不同的變量中。
從數(shù)組中提取值
- 變量與數(shù)組中的變量一一對(duì)應(yīng)(包括類型):
var [a,b,c] = [1,2,3];
console.log(a); //1
console.log(b); //2
console.log(c); //3
- 數(shù)組中含有嵌套的對(duì)象或數(shù)組,根據(jù)解析深度的不同可解析到不同的對(duì)象(解析粒度)
解析嵌套對(duì)象:
解析粒度1
var [one,two,three] = [1,{a:{n1:2,n2:3},b:4,c:5},6];
console.log(one); //1
console.log(two); //{a:{n1:2,n2:3},b:4,c:5}
console.log(three); //6
解析粒度2
var [one,{a,b,c}, three] = [1,{a:{n1:2,n2:3},b:4,c:5},6];
console.log(one); //1
console.log(a); //{2,3}
console.log(b); //4
console.log(c); //5
console.log(three); //6
解析粒度3
var [one,{a:{n1,n2},b,c}, three] = [1,{a:{n1:2,n2:3},b:4,c:5},6];
console.log(one); //1
console.log(n1); //2
console.log(n2); //3
console.log(b); //4
console.log(c); //5
console.log(three); //6
解析嵌套數(shù)組:
解析粒度1
var [one,two,three] = [1,[[2,3],4,5],6];
console.log(one); //1
console.log(two); //[[2,3],4,5]
console.log(three); //6
解析粒度2
var [one,[a,b,c],three] = [1,[[2,3],4,5],6];
console.log(one); //1
console.log(a); //[2,3]
console.log(b); //4
console.log(c); //5
console.log(three); //6
解析粒度3
var [one,[[n1,n2],b,c],three] = [1,[[2,3],4,5],6];
console.log(one); //1
console.log(n1); //2
console.log(n2); //3
console.log(b); //4
console.log(c); //5
console.log(three); //6
上述例子說明了根據(jù)具體需可選擇不同的解析粒度.
- 變量數(shù)量小于數(shù)組變量長度(不完全解析)
var [a,b] = [1,2,3];
console.log(a); //1
console.log(b); //2
- 變量數(shù)量大于數(shù)組長度
var [a,b,c] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //undefined
使用解構(gòu)賦值表達(dá)式時(shí)，如果指定的局部變量名稱在數(shù)組或?qū)ο笾胁淮嬖?解構(gòu)不成功)，那么這個(gè)局部變量會(huì)被賦值為undefined
- 為了防止從數(shù)組中取出一個(gè)變量為undefined的對(duì)象，可以對(duì)賦值表達(dá)式左邊的變量設(shè)置默認(rèn)值。
var [a,b,c=3] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //3
若能夠解析到數(shù)組中的變量,賦值表達(dá)式左邊變量默認(rèn)值會(huì)被覆蓋
var [a,b,c=3] = [1,2,4];
console.log(a); //1
console.log(b); //2
console.log(c); //4
- 在一個(gè)解構(gòu)表達(dá)式中可以交換兩個(gè)變量的值。
- 在不使用解構(gòu)表達(dá)式的情況下,交換兩個(gè)值需要臨時(shí)創(chuàng)建一個(gè)變量用于存儲(chǔ)中間值
var a = 1;
var b = 3;
var c; //臨時(shí)變量
c = a;
a = b;
b = c;
console.log(a); //3
console.log(b); //1
- 使用解構(gòu)表達(dá)式能夠降低代碼量,減少同質(zhì)化代碼,更加優(yōu)雅
var a = 1;
var b = 3;
[a, b] = [b, a]
console.log(a); //3
console.log(b); //1
- 將剩余數(shù)組賦值給一個(gè)變量(剩余模式)
var [a,b, ...c] = [1,2,3,4,5];
console.log(a); //1
console.log(b); //2
console.log(c); //3,4,5
console.log(Array.prototype.isPrototypeOf(c)) //true
- 忽略部分值
var [a, ,b, ,c] = [1,2,3,4,5];
console.log(a); //1
console.log(b); //3
console.log(c); //5
- 解構(gòu)失敗
var [a,b,c] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //undefined
解構(gòu)以下類型會(huì)引發(fā)報(bào)錯(cuò)
var [a,b,c] = null; //null is not iterable
var [a,b,c] = undefined; //undefined is not iterable
var [a,b,c] = 0; //0 is not iterable
var [a,b,c] = NaN; //NaN is not iterable
var [a,b,c] = true; //true is not iterable
......
從對(duì)象中提取值
- 變量名與對(duì)象屬性名稱相同
var {name,age} = {name:"Nicholas CZ",age:18};
console.log(name); //Nicholas CZ
console.log(age); //18
順序可以不同
var {age,name} = {name:"Nicholas CZ",age:18};
console.log(name); //Nicholas CZ
console.log(age); //18
- 解構(gòu)嵌套對(duì)象
var o = {
person:{
name:{
firstName:"Nicholas",
lastName:"CZ"
},
age:18
},
job:"JS Expert"
}
var {person, job} = o;
console.log(person); //{name: {…}, age: 18}
console.log(job); //18
當(dāng)然像數(shù)組一樣也可實(shí)現(xiàn)不同的解析粒度
var o = {
person:{
name:{
firstName:"Nicholas",
lastName:"CZ"
},
age:18
},
job:"JS Expert"
}
var {person:{name:{firstName,lastName},age}, job} = o;
console.log(firstName); //Nicholas
console.log(lastName); //CZ
console.log(age); //18
console.log(job); //JS Expert
