ES6

1.对象解构

//原始获取对象属性时的写法，需要不停的声明变量来获取const Asher = {
    name: 'Asher Zhang',
    age: 5,
    family: {
        mother: 'North Zhang',
        father: 'Richard Zhang',
        brother: 'Howard Zhang'    }}const name = Asher.name;           //Asher Zhangconst age = Asher.age;                //5

//对象结构的写法，意思是先声明变量name和age，然后在对象Asher中寻找同名属性，最后将属性值赋值给变量name和ageconst {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所对应的值并将其赋值给fconst father = '';const {father:f,mother,brother} = Asher.family;          console.log(f);               //Richard Zhang

//获取对象上并没有的属性会返回undefinedconst {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);      //appleconsole.log(others);    //["coconut", "mango", "durian"]//rest参数只能作为 最后一个参数使用const [apple,...others,durian] = fruits;     //Rest element must be last element

//同对象，获取数组中没有的值返回undefinedconst 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