关于ES6的解构赋值，看完这篇就懂了

简介

ES6里面增加很多很多的各种各样的方法，解构赋值就是其中之一

数组解构

在ES5的时候，想要获取一个数组对应的内部值，会比较麻烦，使用的方法类似于这样

let data = [1,2,3,4,5];
let firstData = data[0];
let twiceData = data[1];
console.log(firstData,twiceData);  // 1 2

在ES5里面获取相对应的值，是通过数组对应的下标索引来获取的，同时想要获取对应的值必须声明很多次，这个对从客户端性能来说，是不太友好的。

那么在ES6里面，就方便很多了，只需要声明一次就可以了，同时获取不同位置的数组内容手法也不太一样

let data = [1,2,3,4,5];
let [firstData,twiceData] = data;
console.log(firstData,twiceData); //1 2

let [, , , fourthData] = data;
console.log(fourthData); // 4

适用于几乎所有的数据结构

不管是什么类型的数据结构，都可以通过解构的形式来进行赋值，这个就是解构的强大的地方，上面已经说到了数组

String

let data = '12345';
let [firstData,twiceData] = data;
console.log(firstData,twiceData); //1 2

let [, , , fourthData] = data;
console.log(fourthData);  // 4

对于 Object 的属性值赋值也同样适用

let data = {};
[data.firstData,data.twiceData] = "haha";

console.log(data.firstData,data.twiceData); // h a

这里有一个需要注意的，就是因为data已经声明了，所以在为data的属性赋值的时候，是不需要重复声明的

循环体赋值
在遍历数据的过程中，例如使用for…of…进行遍历的时候，同样也可以适用解构赋值的方法

 let data = {
            name:'Yao',
            age:18
        	}
for (let [key,value] of Object.entries(data)) {
    console.log(key,value); //name Yao  
    						//age 18
}

数据默认值

在结构数据的过程中，如果对于没有数据的一个情况的话，解构会返回数据 undefined。
所以为了避免这种情况，我们对于一个数据进行解构赋值的时候，会先给它一个默认值，而在解构赋值里面，给默认值得方法也非常简单

let data = [1];
let [firstData , twiceData , thirdData=2] = data;
console.log(firstData , twiceData , thirdData);
// 1 undefined 2 

搭配rest使用

在业务开发的过程中，请求到的数据量往往是比较大的，但是我们在使用的时候，可能暂时用不上那么多的数据，如果每次使用都请求一次会很麻烦，所以有时候可以暂时把用不上的数据另外存储起来，而这种就用到了rest

let data = [1,2,3,4,5,6]
let [firstData,twiceData , ...rest] = data
console.log(firstData,twiceData,rest)
// 1 2 [3,4,5,6]

对象解构

前面也提到了，解构赋值几乎适用于所有的数据结构，不管多复杂都可以使用，这一小节，来对对象的解构赋值进行更深入的了解

在对对象进行解构赋值的时候需要注意的是，赋值的Key值，必须跟对象内的Key值一样，才可以找到对应的数据，如果想要对Key进行更改，可以这样

let data = {
        name:'Yao',
        age:18
}
let {name:Myname,age} = data
console.log(Myname,age); // Yao 18

解构赋值真正强大的地方是体现在对于复杂数据结构上的，例如下面这种情况

let data = {
        name:'Yao',
        age:18,
        honor:['MVP'],
        teammate:{
            name:'McGrady',
            age:19,
            honor:['FMVP']
        },
    }

像这种错层嵌套的数据结构是非常常见的，那么如果说想要获得姚明队友麦迪所获得的荣誉的时候，要怎么做？

同样的使用解构赋值就可以很轻松的完成这个操作

let {teammate: {honor:[one]} } = data
    console.log(one); //FMVP

是不是非常的简单嘞！！

写作不易，希望大家可以多多支持，如果觉得本篇文章对你有所帮助，点个赞把！！！