ES6-对象解构与数组解构

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