ES6里面的解构赋值最佳使用位置

1、使用数组成员对变量赋值时，优先使用解构赋值。

const arr=[3,54,6,6];

//这是不好的写法
const first=arr[0];
const second=arr[1];

//最佳表示
const [first,second]=arr;        //first:3  second:54

2、函数的参数如果是对象的成员，优先使用解构赋值。

function getFullName(user){
   const firstName= user.firstName;
   const lastName=user.lastName;
}

//以上写法可以利用解构赋值优化      可优化成以下样式
function getFullName(obj){
   const {firstName,lastName}=obj;
}

//最佳写法如下：
function getFullName({firstName,lastName}){}

3、如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。

function processInput(input){
   return [left,right,top,bottom];
}

//以上写法不利于以后添加值，以及更改返回值的顺序。

//以对象的形式作为返回值，是最佳的，便于以后添加返回值，以及更改返回值的顺序。

function processInput(input){
   return {left,right,top,bottom};
}

const {left,right}=processInput(input);

总结：解构赋值是我们ES6里面新添加的一个特性，主要是用在从数组与对象中提取数据，直接对应的获取就ok了;比起ES5里面的获取数据要更加简洁，清晰易懂，还能达到减少代码量的目的。

4、由以上的分解，可清晰的了解到解构赋值分为两种：  数组解构  与   对象解构。

数组解构的深层嵌套：

const arrs = [
                       'simth', 
                       ['Tom', 'Rose'], 
                       ['Tony', 'James']
                    ];

   // 数组解构赋值
   const [firstName, [secondName, threeName], [fourName, fiveName]] = arrs;
const arrs = [
                       'simth', 
                       ['Tom', 'Rose'], 
                       ['Tony', 'James']
                    ];

   // 数组解构赋值
   const [firstName, [secondName, threeName], [fourName, fiveName]] = arrs;




   //上面的得到的结果值
   // firstName = 'simth
   // second = 'Tom'
   // threeName = 'Rose'
   // fourName = 'Tony'
   // fiveName = 'James'



5、利用数组解构深层次的解构一个值出来。


// 从该数组中提取 出Rose
   const arrs = [
                        'simth', 
                        [['Tom', 'Rose'], 'Steve'], 
                        ['Tony', 'James']
                    ];

   // Destructure
   const [ , // 跳过 'simth'
             [[ , // 跳过 'Tom'
             Name // Rose 赋值给变量 'Name'
         ]]] = arrs;

   // 请注意：你也可以这样写
   // const [, [[, Name ]]] = arrs;

   // 输出 Name: rose
  Name;

6、除了以上的情况，还可以利用rest（...）操作符捕获所有剩下的数值。


const arrs = [
                       'simth', 
                       ['Tom', 'Rose'], 
                       ['Tony', 'James']
                    ];

   // 数组解构赋值
   const [firstName, ...Names] = arrs;     //[...Names]=[['Tom','Rose'],['Tony','James']];

7、对象解构赋值：
//简单的对象解构赋值

const {name:a}={name:'simth'};

//输出变量 a 为 simth。
 // 创建对象，并在对象里提取多个属性值：
  const obj = {
    ironMan: 'Tony Stark', 
    cap: 'Steve Rogers', 
    blackWidow: 'Natasha Romanoff'
  };

  // 解构对象进行单个的获取
  const { 
    ironMan: a, 
    cap: b, 
    blackWidow: c 
  } = avengers;

  // a = 'Tony Stark '
  // b = 'Steve Rogers'
  // c ='Natasha Romanoff'

  // 输出 a:Tony Stark
  a;




ES6里面的解构赋值操作的使用参考：最深刻而易懂的ES6解构教程。      以及阮一峰的ES6基础入门。