对象取物之解构

图片来源于网络，如有侵权请联系删除

前言

在面向对象的javascript编程当中，对象和数组是最常见的数据结构，我们会经常使用这些数据解构来完成各种功能的开发。对象让我们能够创建通过键来存储数据项的单个实体，数组则让我们能够将数据收集到一个有序的集合中。但是，当我们把它们传递给函数时，它可能不需要一个整体的对象/数组，而是需要单个块。而解构就是一种特殊的语法，能够获取到我们所需要的属性而摒弃冗余的属性。

基本用法

• 对象解构

const user = {
  name: '张三',
  age: 18,
  sex: '男'
}
// 下列代码结果
// name = '张三'
// age = 18
let { name, age } = user
// 下列代码结果
// str1 = undefined
// str2= undefined
let { str1, str2 } = user

// 对象对应属性名称进行解构取得对象里边的值
// 没有对应的属性名称将会默认赋值undefined

• 数组解构

const arr = [ '李四', '王五', '赵六']
// 下列代码结果
// str1 = '李四'
// str2= '王五'
let [ str1, str2 ] = arr
// 越位解构
let [ str1,, str2 ] = arr
// 下列代码结果
// str1 = '李四'
// str2=  '赵六'

坑位

当你对象解构是先声明后解构赋值时，你会这么写，然而会报错。

const user = {
  name: '张三',
  age: 18,
  sex: '男'
}
let name,sex;
// 像下面这样写将会报错
// 错误信息为： Uncaught SyntaxError: Unexpected token '='
// 而解决方法为 将这一块代码包裹使其变为代码块即可解决
{ name, sex } = user
// 解决示例
({ name, sex } = user)