解构赋值是一种在 ECMAScript 中非常常见的语法，它可以让我们从数组或对象中提取数据并赋值给变量。在 ECMAScript 2020 中，解构赋值得到了一些新的特性，让我们来详细了解一下吧。
数组解构
基本用法
数组解构是指从数组中提取数据并赋值给变量。在 ECMAScript 2020 中，我们可以使用以下语法来进行数组解构：
let [a, b, c] = [1, 2, 3];
这样就可以将数组 [1, 2, 3] 中的值依次赋值给变量 a、b、c。如果数组中的值不够，那么未被赋值的变量会被赋值为 undefined。
默认值
在 ECMAScript 2020 中，我们可以为解构赋值中的变量设置默认值。例如：
let [a, b = 2, c = 3] = [1];
这样就可以将数组 [1] 中的第一个值赋值给变量 a，并将变量 b 的默认值设为 2，将变量 c 的默认值设为 3。
剩余元素
在 ECMAScript 2020 中，我们可以使用剩余元素语法 ... 来获取数组中剩余的元素。例如：
let [a, b, ...rest] = [1, 2, 3, 4, 5];
这样就可以将数组 [1, 2, 3, 4, 5] 中的前两个值赋值给变量 a、b，并将剩余的值赋值给变量 rest。
对象解构
基本用法
对象解构是指从对象中提取数据并赋值给变量。在 ECMAScript 2020 中，我们可以使用以下语法来进行对象解构：
let {a, b, c} = {a: 1, b: 2, c: 3};这样就可以将对象 {a: 1, b: 2, c: 3} 中的值赋值给变量 a、b、c。如果对象中没有对应的属性，那么变量会被赋值为 undefined。
属性重命名
在 ECMAScript 2020 中，我们可以使用属性重命名语法来为解构赋值中的变量设置新的名称。例如：
let {a: x, b: y, c: z} = {a: 1, b: 2, c: 3};这样就可以将对象 {a: 1, b: 2, c: 3} 中的值赋值给变量 x、y、z，其中变量 a 的值赋值给变量 x，变量 b 的值赋值给变量 y，变量 c 的值赋值给变量 z。
默认值
在 ECMAScript 2020 中，我们可以为解构赋值中的变量设置默认值。例如：
let {a, b = 2, c = 3} = {a: 1};这样就可以将对象 {a: 1} 中的属性值赋值给变量 a，将变量 b 的默认值设为 2，将变量 c 的默认值设为 3。
剩余属性
在 ECMAScript 2020 中，我们可以使用剩余属性语法 ... 来获取对象中剩余的属性。例如：
let {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4, e: 5};这样就可以将对象 {a: 1, b: 2, c: 3, d: 4, e: 5} 中的属性 a、b 的值赋值给变量 a、b，并将剩余的属性赋值给变量 rest。
混合解构
在 ECMAScript 2020 中，我们可以将数组解构和对象解构混合使用，从而提取数组或对象中的部分数据并赋值给变量。例如：
let {a, b, c: [d, e, f]} = {a: 1, b: 2, c: [3, 4, 5]};这样就可以将对象 {a: 1, b: 2, c: [3, 4, 5]} 中的属性 a、b 的值赋值给变量 a、b，并将数组 [3, 4, 5] 中的值依次赋值给变量 d、e、f。
总结
解构赋值是 ECMAScript 中非常常见的语法，它可以让我们从数组或对象中提取数据并赋值给变量。在 ECMAScript 2020 中，解构赋值得到了一些新的特性，包括默认值、剩余元素、属性重命名、剩余属性等。掌握这些特性可以让我们更加灵活地使用解构赋值，提高编码效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6572e694d2f5e1655dbf17d8