ES6 解构特性 简述

解构是es6中新增的一个特性 ，主要是使数据访问更便捷  ，有哪些可以解构呢？ 对象可以 ，数组可以 

一 . 对象解构      

1. 定义一个对象 //

           let user = {   name:'wang'， age:18}

          原来访问对象属性需要这样

                  let name = user. name; //

                  let age = user.age; //

       使用解构，花括号的变量会和user 同名属性进行一一对应,并把值赋给变量

        let { name, age } = user;

        console.log(name);

          console.log(age);

 2. 解构赋值  

 let user = {   name:'wang'， age:18}

    let name = 'li';

    let  age = 2;

    // 解构并改变原有变量的值

    ({ name, age } = user); // 外面有个小括号是语法问题。 花括号不能在最左边，或是第一个元素。

    console.log(name, age);   //wang, age  

3. 为非同名局部变量，解构赋值

 let user = {   name:'wang'， age:18}

    // 这个语法的含义就是读取名为name的属性并将其值存储给变量niceName

 let { name: niceName, age: niceAge } = user;

     console.log(niceName, niceAge );   //wang, 18

4.设置默认值，当解构时候，没有对应的属性时，给个默认值 

  let user = {   name:'wang'， age:18}

    // 解构时候如果没有sex 这个属性时候，设置默认值为girl

  let { name, age , sex = ' girl' } = user; 

  console.log(niceName, niceAge,sex );   //wang, 18,girl

5.嵌套对象解构

 let user = {   name:'wang'， age:18 ，userInfo: {  

               learningSubjects：{  line:'chinese'

                 }，

              hobby: {  ...}

}}

 解构

 let { userinfo: { learningSubjects } } = user;

 console.log(learningSubjects.line); // chinese

6.数组解构

  数组解构和对象解构类似 ，示列

let  names = ['wang','li','chen'];

解构

let [ firstName, secondName ] = names;

如果只想取最后一个值需要占位符

let [ , , lastName] = names;

7.不定元素  

在数组中可以通过... 语法将数组中的其余元素赋值给一个特定的变量，泪如

let  names = ['wang','li','chen'];

let [ firstName, ...otherName] = names;

console.log(otherName.length) // 应该是等于2; 值应该是li,chen

使用不定元素进行数组复制

let [...newNames] = names;

console.log(newNames.length); // 应该是3