写vue或react项目，我们经常在接收到数据的时候，需要对数据进行二次加工操作，一些传统的办法可以实现对数据的加工。但利用到ES6的解构赋值，则更为简单。

解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们的赋值是这样的

let arr = [1,2,3]

let a= arr[0]

let b= arr[1]

let c= arr[2]

这样写很繁琐，解构赋值可以轻松解决上面的问题。

一、数组的解构赋值

let arr = [0,1,2]

let [a,b,c]=arr

console.log(a)//0

console.log(b) //1

console.log(c) //2

但是很多时候，数据并非一一对应的，并且我们希望得到一个默认值

let arr = [,1,2]

let [a='我是默认值',b,c] =arr

console.log(a)//'我是默认值'

console.log(b) //1

console.log(c) //2

从这个例子可以看出，在解构赋值的过程中，a=undefined时，会使用默认值

那么当a=null时呢？当a=null时，那么a就不会使用默认值，而是使用null

//数组的拼接

let a = [0,1,2]

let b= [3,4,5]

let c=a.concat(b)

console.log(c)//[0,1,2,3,4,5]

let d=[...a,...b]

console.log(d)//[0,1,2,3,4,5]

//数组的克隆//假如我们简单地把一个数组赋值给另外一个变量

let a = [0,1,2,3]

let b=a

b.push(4)

console.log(a)//[0,1,2,3,4]

console.log(b) //[0,1,2,3,4]

因为这只是简单的把引用地址赋值给b，而不是重新开辟一个内存地址，所以a和b共享了同一个内存地址，该内存地址的更改，会影响到所有引用该地址的变量，那么用下面的方法，把数组进行克隆一份，互不影响。

let a = [0,1,2,3]

let b=[...a]

b.push(4)

console.log(a)//[0,1,2,3]

console.log(b) //[0,1,2,3,4]

二、对象的解构赋值

对象的解构赋值和数组的解构赋值其实类似，但是数组的数组成员是有序的

而对象的属性则是无序的，所以对象的解构赋值简单理解就是等号的左边和右边的解构相同

let {name,age} = {name:"swr",age:28}

console.log(name)//'swr'

console.log(age) //28

对象的解构赋值是根据key值进行匹配

let { name:Name,age } = { name:'swr',age:28}

console.log(Name)//'swr'

console.log(age) //28