JavaScript解构赋值常用操作

数组解构

所谓数组解构，就是获取数组中一部分有用的数据，例子：

let arr = ['first', 'second', 'rqz']
let [x, y, z] = arr //解构操作

console.log(x, y) //first second
console.log(z) //rqz

数组解构还可以和split函数配合使用，优雅又高端：

let [x, y] = 'hello world'.split(' ')

console.log(x) //hello
console.log(y) //world

解构不改变原数组

解构也可以叫做“解构赋值”，其本质就是把数组的元素复制给变量，所以原数组没有发生任何的变化

忽略数组元素

在使用解构赋值的时候，希望得到数组的第1、3个元素，但是不要第2个元素

let [x, , z] = ['first', 'second', 'third']

console.log(x, z) //first third

可迭代对象使用解构

解构赋值不一定用在数组上，在任何可迭代对象上都是可以使用的

let [x, y, z] = 'xyz'
let [a, b, c] = new Set(['a', 'b', 'c'])

console.log(x, y, z) //x y z
console.log(a, b, c) //a b c
// 解构赋值会对右侧的值进行迭代，然后对左侧的变量进行赋值

赋值给任何变量

在解构赋值的=右侧可以是任何和迭代的对象，而左侧则可以是任何可以赋值的变量，并不局限于简单的变量

let country = {};
[country.name, country.desc] = 'China Beautiful'.split(' ')
console.log(country.name, country.desc) //China Beautiful

注意：代码第一行的分号必须要加，否则将遇到错误！

与.entries()方法结合

Object.entries(obj)方法会返回对象obj的属性列表，可以将解构语法用在这里：

let country = {
  name: 'China',
  desc: 'a beautiful country'
}
for (let [k, v] of Object.entries(country)) {
  console.log(k, v)
}
// name China
// desc a beautiful country

与Map结合

由于Map对象本身就是可迭代的，所以可以直接使用for...of语法结合解构语法：

let map = new Map()
map.set('name', 'China')
map.set('desc', 'Beautiful Country')
for (let [k, v] of map) {
  console.log(k, v)
}
// name China
// desc a beautiful country

变量交换

解构赋值有一个著名技巧，交换两个变量的值：

let a = 1;
let b = 2;
[a, b] = [b, a]
console.log(`a=${a},b=${b}`) //a=2,b=1

多余的元素

在执行解构赋值的过程中，存在两种情况：

1. 左侧元素多于右侧元素，左侧值使用undefined填充；
2. 右侧元素多余左侧元素，忽略多余项，也可以使用...收集；

左侧多于右侧：

let [a, b, c] = 'ab'
console.log(a, b, c) //a b undefined
// 可见最后一个变量c被赋值undefined

也可以为多余的左侧变量赋予默认值

let [a = 0, b = 0, c = 0] = 'ab'
console.log(c) //0

右侧多于左侧：

let [a, b] = 'abcd'
console.log(a, b) //a b

如果需要获得其他元素

let [a, b, ...others] = 'abcdefg'
console.log(others) //[ 'c', 'd', 'e', 'f', 'g' ]
// 这里的变量others就将所有剩余选项全部都收集了起来，others可以是任何合法的变量名，不局限于others本身

对象解构

解构语法同样使用于对象，只不过语法上稍有不同

let {var1, var2} = {...}

例子：

let country = {
  name: 'China',
  desc: 'Beautiful'
};
let { name, desc } = country;
console.log(name, desc) //China Beautiful

属性变量映射

可以指定变量和属性的映射，例如：

let country = {
  name: 'China',
  desc: 'Beautiful'
}
//对应的规则：{对象属性:目标变量}
let { name: desc, desc: name } = country;
console.log(`name:${name},desc:${desc}`) //name:Beautiful,desc:China

默认值

和数组一样，我们也可以使用=为变量指定默认值

let obj = {
  name: 'xiaoming',
  age: 18
}
let { name = 'xiaohong', age = 19, height = 180 } = obj
console.log(height) //180

多余的属性

// 可以使用...将剩余的属性重新打包为一个新对象
let obj = {
  x: 'x',
  y: 'y',
  z: 'z'
}
let { x, ...others } = obj
console.log(others) //{ y: 'y', z: 'z' }

多层解析

如果对象出现了嵌套，相应的也可以使用对应的嵌套层次进行解析

let People = {
    head:{
        leftEye:'le',
        rightEye:'re'
    },
    hands:['left-hand','right-hand'],
    others:'others'
}
let {
    head:{
        leftEye,
        rightEye
    },
    hands:[left_hand,right_hand],
    others
} = People;
console.log(leftEye,right_hand) //le right-hand