写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
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/212161.html原文链接：https://javaforall.net
