数组的解构赋值
数组的解构赋值需要左边的变量结构需要等于右边的值的结构,即给对应位置的变量声明对应位置的值,变量的取值由位置决定
只要某种数据类型具有迭代器(iterator)接口,就可以使用数组的解构赋值,不一定非是数组
es6中具有iterator接口的数据类型有:数组,类数组对象,字符串,Set,Map,Generator函数
注:对象不具有iterator接口,需要自己配置
var [a,b,c] = ['a','b'];
console.log(a); //a
console.log(b); //b
var [a,[[b],c]] = [1,[[2],3]];
console.log(a); //1
console.log(b); //2
console.log(c); //3
//不完全解构,左边只是右边的一部分,但是模式是正确的
var [a,,c] = ['a1','b1','c1','d1'];
console.log(a); //a1
console.log(c); //c1
var [a,...b] = ['a2','b2','c2','d2'];
//rest参数:...b 获取多余的数组元素,组成一个新数组,常用于函数参数中,作用与arguments类似,arguments是类数组
console.log(a); //a2
console.log(b); //['b2','c2','d2']
var [a,b,...c] = ['a3'];
//rest参数必须是最后一个元素
console.log(a); //a3
console.log(b); //undefined 解构不成功就是undefined
console.log(c); //[] rest参数解构不成功是空数组[]
//字符串具有iterator接口
var [a,b,c] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
var [a,b,c] = new Set(['aa','bb','cc']);
console.log(a); //aa
console.log(b); //bb
console.log(c); //cc
对象的解构赋值
对象的属性没有次序,变量必须与属性同名,才能取到正确的值,即变量名与属性名一一对应,次序不重要
var {foo,bar} = {bar: 'aaa', foo: 'bbb'}
console.log(foo); //bbb
console.log(bar); //aaa
var {foo} = {baz: 'ccc'}
console.log(foo); //undefined 因为变量与属性名不一致
//解决办法
//在变量前指定对应的属性名使用:隔开
var {baz:foo} = {baz: 'ddd'}
console.log(foo); //ddd foo指向baz属性对应的值
//还可以用于嵌套结构对象, 不过应该很少会这么做吧。。。
var obj = {
p: [
'Gary',
{
y: 'Guo'
}
]
}
var {
p: [
x,
{
y
}
]
} = obj;
console.log(x); //Gary
console.log(y); //Guo
如果是先声明了变量再进行对象解构赋值则需要加上括号,否则js回你认为{}是一个代码块,而不是解构赋值
var bar;
{bar} = {bar:1} //SyntaxError: expected expression, got '='
console.log(bar);
var bar;
({bar} = {bar:111})
console.log(bar); //111 实际开发中不推荐这么做
对象解构赋值的小应用:求最大值
//正常方法
var arr = [2,5,1,8,4,2];
console.log(Math.max.apply(this, arr)); //8
//简化
var {max} = Math;
console.log(max.apply(this, arr)); //8
即是将现有方法赋值到变量上使用