1.对象解构
//原始获取对象属性时的写法，需要不停的声明变量来获取
const Asher = {
name: 'Asher Zhang',
age: 5,
family: {
mother: 'North Zhang',
father: 'Richard Zhang',
brother: 'Howard Zhang'
}
}
const name = Asher.name; //Asher Zhang
const age = Asher.age; //5
//对象结构的写法，意思是先声明变量name和age，然后在对象Asher中寻找同名属性，最后将属性值赋值给变量name和age
const {name,age} = Asher; //Asher Zhang;5
//如果在此之前已经声明过变量name了，会报错
//加上()之后就可以了，因为不加()时，浏览器会将{}解析为代码块，而不是解构
let name = '';
const {name,age} = Asher; //Identifier 'name' has already been declared
({name,age} = Asher); //Asher
//解构是可以嵌套的
const {father,mother,brother} = Asher.family; //Richard Zhang,North Zhang,Howard Zhang
//嵌套中出现已声明的变量再次被声明使用，同样会报错，所以...
//这里意思是先声明一个变量f，然后找到father所对应的值并将其赋值给f
const father = '';
const {father:f,mother,brother} = Asher.family;
console.log(f); //Richard Zhang
//获取对象上并没有的属性会返回undefined
const {father,mother,brother,sister} = Asher.family;
console.log(sister); //undefined
//可以给没有的属性加上默认值
const {father,mother,brother,sister = 'have no sister'} = Asher.family;
console.log(sister); //have no sister
//默认值只在该属性真的没有值的或值为undefined的时候才会返回
const Asher = {
name: 'Asher Zhang',
age: 5,
family: {
mother: 'North Zhang',
father: 'Richard Zhang',
brother: 'Howard Zhang',
sister: null
}
}
const {father,mother,brother,sister = 'have no sister'} = Asher.family;
console.log(sister); //null
2.数组解构
const fruits = ['apple','coconut','mango','durian'];
//原始获取数组项的写法
const durian = fruits[3]; //durian
//数组解构写法，和对象解构类似
const [apple,coconut] = fruits;
console.log(apple,coconut); //apple coconut
//获取间隔位置的值
const [,coconut,,durian] = fruits;
console.log(coconut,durian); //coconut durian
//获取数组第一项已经其他项，其他项会新生成一个数组
const [apple,...others] = fruits;
console.log(apple); //apple
console.log(others); //["coconut", "mango", "durian"]
//rest参数只能作为 最后一个参数使用
const [apple,...others,durian] = fruits; //Rest element must be last element
//同对象，获取数组中没有的值返回undefined
const cont = ['Asher','jianshu.com'];
const [name,website,lan] = cont;
console.log(name,website,lan); //Asher jianshu.com undefined
//同对象，一样可以给没有的项加默认值
const [name,website,lan = 'PHP'] = cont;
console.log(name,website,lan); //Asher jianshu.com undefined
//undefined只在数组项没有内容的时候可用
const cont = ['Asher','jianshu.com',null];
const [name,website,lan = 'PHP'] = cont;
console.log(name,website,lan); //Asher jianshu.com null
//应用场景：利用数组解构交换变量值
let a = 100;
let b = 20;
[a,b] = [b,a]
console.log(a,b); //20 100
