【JS】JavaScript中数组和对象的解构赋值

解构赋值

数组的解构赋值

现有数组 arr=[1,2,3]

原始赋值

const a = arr[0]
const b = arr[1]
console.log(a,b)   // 1  2

解构

const [a,b] = arr
console.log(a,b)   // 1  2

使用场景

1. 交换两个变量的位置

   let a = 10
   let b = 20
   
   [a,b] = [b,a]
   console.log(a,b) // 20,10
   

2. 交换数组中两个元素的位置

   let arr = [1,3,2]
   
   [arr[1],arr[2]] = [arr[2],arr[1]]
   console.log(arr) // [1,2,3]
   

3. 配合展开运算符完成深拷贝

   const newArr = [...arr]
   console.log(newArr)  // [1,2,3]
   

对象的解构赋值

现有对象 obj={ name:‘小明’,age:22,gender:‘男’ }

原始赋值

const name = obj.name
const age = obj.age
const gender = obj.gender

解构

键名即为变量名

const {name,age,gender} = obj
console.log(name,age,gender) // 小明 22 男

自定义变量名

let a,b,c
({name:a,age:b,gender:c}) = obj
console.log(a,b,c) // 小明 22 男

使用场景

1. 配合展开运算符完成深拷贝

   const newObj = {...obj}
   console.log(newObj) // { name:'小明',age:22,gender:'男' }