ES6解构赋值
2018-01-15 本文已影响0人
不流泪的洋葱
ES6解构赋值
什么是解构赋值
MDN解释: 解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。
从数组中提取值
- 变量与数组中的变量一一对应(包括类型):
var [a,b,c] = [1,2,3];
console.log(a); //1
console.log(b); //2
console.log(c); //3
- 数组中含有嵌套的对象或数组,根据解析深度的不同可解析到不同的对象(解析粒度)
解析嵌套对象:
解析粒度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
解析嵌套数组:
解析粒度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
上述例子说明了根据具体需可选择不同的解析粒度.
- 变量数量小于数组变量长度(不完全解析)
var [a,b] = [1,2,3];
console.log(a); //1
console.log(b); //2
- 变量数量大于数组长度
var [a,b,c] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //undefined
使用解构赋值表达式时，如果指定的局部变量名称在数组或对象中不存在(解构不成功)，那么这个局部变量会被赋值为undefined
- 为了防止从数组中取出一个变量为undefined的对象，可以对赋值表达式左边的变量设置默认值。
var [a,b,c=3] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //3
若能够解析到数组中的变量,赋值表达式左边变量默认值会被覆盖
var [a,b,c=3] = [1,2,4];
console.log(a); //1
console.log(b); //2
console.log(c); //4
- 在一个解构表达式中可以交换两个变量的值。
- 在不使用解构表达式的情况下,交换两个值需要临时创建一个变量用于存储中间值
var a = 1;
var b = 3;
var c; //临时变量
c = a;
a = b;
b = c;
console.log(a); //3
console.log(b); //1
- 使用解构表达式能够降低代码量,减少同质化代码,更加优雅
var a = 1;
var b = 3;
[a, b] = [b, a]
console.log(a); //3
console.log(b); //1
- 将剩余数组赋值给一个变量(剩余模式)
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
- 解构失败
var [a,b,c] = [1,2];
console.log(a); //1
console.log(b); //2
console.log(c); //undefined
解构以下类型会引发报错
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
......
从对象中提取值
- 变量名与对象属性名称相同
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
- 解构嵌套对象
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
当然像数组一样也可实现不同的解析粒度
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
