35.JavaScript对象和数组的解构赋值基础详解、let陷阱、函数参数解构

---

文章目录

• 35.JavaScript对象和数组的解构赋值
• • 数组解构
  • • 解构不改变原数组
    • 忽略数组元素
    • 可迭代对象使用解构
    • 赋值给任何变量
    • 与.entries()方法结合
    • 与Map结合
    • 变量交换
    • 多余的元素
  • 对象解构
  • • 属性变量映射
    • 默认值
    • 多余的属性
    • let陷阱
    • 多层解析
  • 函数参数解析
  • 总结

35.JavaScript对象和数组的解构赋值

对象（Object）和数组（Array）是JavaScript中最常用的两种数据结构，二者的共同特点是都可以存储大量的数据。

问题是，当我们再参数传递和计算过程中，可能只需要对象和数组中的一部分内容，而不是整个对象/数组。

此时，就需要使用解构赋值将对象/数组拆包，获取其内部的一部分数据，下面会使用案例介绍解构赋值在编程中的应用。

数组解构

所谓数组解构，就是获取数组中一部分对我们有用的数据，举个栗子：

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

console.log(x,y)

代码执行结果如下：

代码的内容非常简单，把数组中的内容赋值给了俩个变量，然后输出。

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

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

console.log(x, y)

代码执行结果如下：

解构不改变原数组

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

let [x, y] = arr //{1}

let x = arr[0]   //{2}
let y = arr[1]
<