ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构
一.数组解构
// 1.数组的解构赋值 let arr = [1,2,3]; let[a,b,c] = arr; console.log(a,b,c); // 2.二维数组 let[a,[b,c],d] = [1,[2,3],4]; console.log(a,b,c,d); // 3.:省略变量 let[a,c] = [1,2,3]; console.log(a,c); //4.合并数组的值 let[a,...b] = [1,'a','b','c']; console.log(b);//数组 console.log(...b);//a,b,c // 5.默认值 如果是undefined 默认值生效 let[a,b='2']=[1,undefined]; console.log(b);
ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
二.对象解构
//根据key解构 let person = {name:"小帅",age:18}; let {name,age,height} = person; console.log(name);//小帅 console.log(age);//18 console.log(height);//undefined
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值,否则解构失败就是undefined。
//根据key更改变量名 let { realname: myname,height=173 } = { realname: '张三', age: 18}; console.log(Myname);//张三 console.log(Myage)//18 console.log(realname)//realname is not defined console.log(height)//当属性没有的时候支持默认值
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let Person = {realname:"张三",age:19}; let {realname:myrealname,age,height=173} = Person;//重命名 console.log(myrealname,age,height);
三.字符串解构
let [a,b,c] = "hello"; console.log(a);//h console.log(b);//2 console.log(c);//l
四.解构应用
1:交换两个变量的值 let a=1; let b=2; [b,a] = [a,b]; console.log(a,b); 2:"结构函数" function func(){ return [1,2,3,4]; } let [a,b,c,d] = func(); console.log(a,b,c,d);