这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

解构赋值

ES2015的标准增加了：destructuring即解构赋值，这篇文章我们就来了解一下什么是解构赋值。

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

如何使用

解构数组的时候，你可以先定义变量在解构，也可以通过解构分离声明变量并赋予其值。我们在项目中用到的时候，一般使用第二种，使用如下：

const [cnName, enName] = ['也笑', 'slifree']

console.log(cnName, enName); // 也笑 slifree

我们在赋值的时候也可以给个默认值：

const [cnName, enName, deName = 'test'] = ['也笑', 'slifree']
console.log(cnName, enName, deName ); // 也笑 slifree test

我们还可以忽略一些数据，只要我们想要的数据，如下：

const [, enName] = ['也笑', 'slifree']
console.log(enName); // slifree

我们还可以将剩余数据赋值给一个变量：

const [a, ...rest] = [1, 2, 3, 4, 5, 6]
console.log(a, rest); // 1 [ 2, 3, 4, 5, 6 ]

解构对象与解构数组类似，使用如下：

const { name, age } = { name: '也笑', age: '812' }
console.log(name, age); // 也笑 812

解构赋值不仅可以给默认值，还可以改变变量的名字，如下：

const { a: aA = 0, b: bB } = { a: 10, b: 20 }
console.log(aA, bB); // 10 20

我们可以把嵌套的对象和数组同时解构赋值，如下：

const obj = {
    a: { name: '也笑' },
    b: [1, 2, 3]
}

const { a, b: [c, d, e] } = obj

console.log(a, c, d, e); // { name: '也笑' } 1 2 3

解构数组时，如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素，如下：

const [a, ...rest,] = [1, 2, 3, 4, 5, 6]

SyntaxError: Rest element must be last element

在项目中，我们会经常使用到解构赋值，这不仅是因为代码简洁，还可以解决深拷贝带来的问题。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。