为什么需要解构赋值
解构赋值可以让我们的代码更加简洁明了,大大减少我们的代码量
解构赋值可以分为数组解构,对象解构,字符串解构
1、对象解构
不使用对象解构的情况:
const person = {
name: 'little bear',
age: 18,
sex: '男'
}
let age = person.age
let name = person.name
let sex = person.sex
而使用对象解构之后,以上的代码就可以变成下面的形式:
const person = {
name: 'little bear',
age: 18,
sex: '男'
}
let { name,age,sex } = person
对象解构的书写方式:
let {a,b} = {a:'值a',b:'值b'};
console.log(a + '|' + b); //值a|值b
对象解构没有次序之分:
let {a,b} = {b:'值b',a:'值a'};
console.log(a + '|' + b); //值a|值b
如果在对象解构前就已经定义了变量,那么解构就会报错:
let a;
{a,b} = {b:'值b',a:'值a'};
console.log(a + '|' + b); //报错(Unexpected token =)
上方的代码如果想不报错,只要在对象解构的外面加上一个()就可以了:
let a;
({a,b} = {b:'值b',a:'值a'});
console.log(a + '|' + b); //值a|值b
2、数组解构
以前的变量赋值方式:
let a = 1;
let b = 1;
let c = 1;
用数组解构赋值的方式就可以将上方的代码变为:
let [a,b,c] = [1,1,1];
数组解构的两边格式要一致,如下的形式就会报错:
let [a,[b],c] = [1,1,1];
console.log(a + '|' + b + '|' + c); //报错( [1,1,1] is not iterable)
将上面的形式改成如下格式就可以了(保证数组两边形式一致):
let [a,[b],c] = [1,[1],1];
console.log(a + '|' + b + '|' + c); //1|1|1
数组解构与对象解构不同,数组解构是有次序之分的:
let [a,b] = [1,2];
和let [b,a] = [2,1]
的a,b的值前后是不一样的
解构是可以有默认值的:
let [a,b=1] = [2];
console.log(a + '|' + b); //2|1
而如果是以下的形式:(与函数的默认参数类似)
let [a=1,b] = [2];
console.log(a + '|' + b); //2|undefined
默认值中undefined和null的区别:
//undefined相当于没有写,所以b是默认值
let [a,b=2] = [2,undefined];
console.log(a + '|' + b); //2|2
//null相当于写值了,值就是null
let [a,b=2] = [2,null];
console.log(a + '|' + b); //2|null
3、字符串解构
let [a,b,c] = 'ES6';
console.log(a + '|' + b + '|' + c); //E|S|6