解构赋值是对赋值运算符的扩展。解构赋值主要分为数组的解构和对象的解构。
1、数组解构 按照顺序解构,赋值给前面对应下标的变量
var [a,b,c]=[1,2,3]; console.log(a,b,c);//1,2,3
- 交换,交换让数组中两个数据交换数值变得非常方便,比如冒泡排序中的数据交换
var a=3; var b=4; [a,b]=[b,a];
//冒泡
[arr[i],[arr[i+1]]]=[arr[i+1],arr[i]];
- 函数中解构赋值时,变量设置了初始值0,如果给一个赋值,b就是3,如果没有给赋值,b就是初始值0
var [a,b=0]=[3]; console.log(a,b); function fn([a,b=0]){ console.log(a,b); } fn([4,3]);
2、对象解构赋值时按照属性名解构,与顺序无关,没有该属性是无法解构赋值的
var {a,b,c}={b:1,a:2}; console.log(a,b);
- 对象解构必须按照结构解构,如果解构时属性名有重复,可以在属性名后:新名称来解构,后面有:就查不到了
var {a,b:{a:a1}}={a:5,b:{a:6}}; console.log(a,a1);
let {p:[x,{y}]}={p:["Hello",{y:"World"}],}; console.log(x,y); var obj={ a:1, b:{ a:2, b:{ a:3, b:{ a:4 } } } } let {a,b:{a:a1,b:{a:a2,b:{a:a3}}}}=obj; console.log(a,a1,a2,a3);
3、字符串解构,str有length属性
var str="abcdef"; let {length}=str; console.log(length);
4、在对象中如果方法中有this这种方法不能被解构(3的方法)