ES6解构赋值

写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