1、关于解构的理解
ES6允许通过某种模式,从数组和对象中提取数据给变量进行赋值,这就被称为解构
// 如果想赋值多个变量
1. ES5的模式(进行多次声明变量进行赋值)
var a = 1;
var b = 2;
var c = 3;
2. ES5的模式(一次生命多次赋值)
var a = 1, b = 2, c = 3;
3. ES6语法模式( 将1,2,3分别赋给a,b,c )
let [a,b,c] = [1,2,3];
这就是解构,将数据赋值到想要的结构中去,实质上是一种模式对应机制,右边的数据会赋给左边对应的变量中去。
注意:左右两边的结构格式必须要保持一致
let [a,b,c] = [1,[2,3],[4,5,6]];
//此时a=1,b是数组[2,3],c是数组[4,5,6]
let [a,[b,c]] = [1,[2,3]];
//此时a=1,b=2,c=3
let [ , , c] = [1,2,3];
//此时c=3
let [a, , c] = [1,2 ,3];
//此时a=1,c=3
1.1 解构失败的情况
let [a,b,c] = [1,2];
//此时c为undefined
1.2 解构不完全的情况
let [a,b] = [1,2,3,4];
//此时a=1,b=2,但是右边的数据还多出了两个
1.3 解构赋值报错的情况
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
1.4 使用解构默认值的情况
let [a,b,c="默认值"] = [1,2];
//此时c=“默认值”
let [a,b,c="默认值"] = [1,2,3];
//此时c=3
let [a,b,c="默认值"] = [1,2,undefined];
//此时c依旧=“默认值”
let [a,b,c="默认值"] = [1,2,null];
//null表示一个空对象,此时c为null
ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。
注意:ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。
1.5 默认值为表达式
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值
function f() {
console.log('aaa');
}
let [ x = f() ] = [1];
//等价于
let x;
if([1][0] == undefined){
x=f();
}else{
x = [1][0];
}
1.6 默认值可以引用解构赋值的其他变量
前提是该变量必须是已经声明的
let [x=1,y=x] = []
//此时 x=1默认值传进去,然后x的值再赋给y,因此y=1
let [x=1,y=x] = [2]
//此时x=1,但右边2会再次赋给x,x=2,然后x的值再赋给y,此时y=2
let [x=1,y=x] = [1,2]
//此时x=1,右边数据也为1,x的值再赋给y,但是右边数据y=2,所以最后x=1,y=2
let [x=y,y=1] = []
//报错y赋给x的时候,y还并未声明
1.7 利用解构赋值交换两个值
let a=1;
let b=2;
[a,b] = [b,a];
console.log(a,b); //a=2,b=1
2. 对象的解构赋值
2.1 对象解构赋值
对象解构的内部机制,是先找到同名的属性,然后再赋给对应的位置,真正被赋值的是后者,而不是前者。
解构不仅可以用于数组,还可以用于对象
let json = {
name:'小陈',
age:22,
sex:'男'
}
let {name,age,sex} = json;//解构对象
2.2 对象解构赋值属性名一定要相同
对象的解构与数组有一个重要的不同,数组的元素是按次序排序的,变量的取值由他的位置决定,而对象的属性没有次序,变量名必须与属性同名
// 这里解构的属性名必须和对象的属性名相同,否则解不出来全是undefined
let json = {
name:'小陈',
age:22,
sex:'男'
}
let {a,b,c} = json;//全为undefined
2.3 自定义变量名与属性名不同
//如果想自己定义更改属性名可以如下操作
let json = {
name:'小陈',
age:22,
sex:'男'
}
let { name:a,age:b,sex:c } = json; //这样依然可以改属性名,并打印解构出来的值
console.log(a,b,c)
2.4 解构可以用于嵌套结构
let obj = {
p:[
'objx',
{ y:'objy' }
]
};
let { p: [ x,{ y } ]} = obj; //x为objx,y为objy
2.5 对象的解构赋值也可以指定默认值
var {x=3} = {}; //x:3
var {x,y=5} = {x:1}; //x:1 y:5
var {x:y=3} = {}; //y:3
var {x:y=3} = {x:5} //y:5
var {message:msg='something'} = {} //msg:'something'
//默认值生效的条件是 ,对象的属性值严格等于undefined
var {x=3} = {x:null} //x:null