在前端开发中，我们经常需要从对象或数组中提取数据并赋值给变量。在 ES6 中，我们可以使用解构赋值来完成这个任务。但是在 ES7 中，解构赋值的功能得到了进一步增强，让我们的代码可读性更好。
什么是解构赋值？
解构赋值是从数组或对象中提取值并赋给变量的一种语法。在 ES6 中，我们可以使用以下语法：
// 数组解构赋值
const [a, b] = [1, 2];
// 对象解构赋值
const {a, b} = {a: 1, b: 2};在 ES7 中，我们可以使用更加简洁的语法来进行解构赋值。
数组解构赋值
在 ES7 中，我们可以使用以下语法来进行数组解构赋值：
const arr = [1, 2, 3, 4]; // 从第一个元素开始，忽略前两个元素，将后面的元素赋值给变量 rest const [,, ...rest] = arr; console.log(rest); // [3, 4]
在这个例子中，我们使用了一个新的语法 ...rest，它表示将数组中剩余的元素赋值给变量 rest。
对象解构赋值
在 ES7 中，我们可以使用以下语法来进行对象解构赋值：
const obj = {a: 1, b: 2, c: 3};
// 将对象中的 a 和 c 属性赋值给变量 a 和 c
const {a, c} = obj;
console.log(a, c); // 1 3在这个例子中，我们只提取了对象中的 a 和 c 属性，并将它们赋值给了变量 a 和 c。
解构赋值的嵌套
在 ES7 中，我们可以使用嵌套的解构赋值来提取多层嵌套的数据。例如：
const obj = {a: {b: {c: 1}}};
// 将对象中的 c 属性赋值给变量 c
const {a: {b: {c}}} = obj;
console.log(c); // 1在这个例子中，我们使用了嵌套的解构赋值语法来提取对象中嵌套的属性 c。
解构赋值的默认值
在 ES7 中，我们可以为解构赋值设置默认值。例如：
const obj = {a: 1};
// 将对象中的 b 属性赋值给变量 b，如果对象中没有 b 属性，则将变量 b 赋值为 2
const {b = 2} = obj;
console.log(b); // 2在这个例子中，我们为解构赋值设置了默认值 2，如果对象中没有属性 b，则变量 b 的值将会是默认值 2。
总结
ES7 中的解构赋值让我们的代码可读性更好。我们可以使用数组和对象的解构赋值来提取数据并赋值给变量，使用嵌套的解构赋值来提取多层嵌套的数据，使用解构赋值的默认值来设置默认值。这些语法都可以让我们的代码更加简洁和易读。
示例代码
// javascriptcn.com 代码示例
// 数组解构赋值
const arr = [1, 2, 3, 4];
// 从第一个元素开始，忽略前两个元素，将后面的元素赋值给变量 rest
const [,, ...rest] = arr;
console.log(rest); // [3, 4]
// 对象解构赋值
const obj = {a: 1, b: 2, c: 3};
// 将对象中的 a 和 c 属性赋值给变量 a 和 c
const {a, c} = obj;
console.log(a, c); // 1 3
// 解构赋值的嵌套
const obj2 = {a: {b: {c: 1}}};
// 将对象中的 c 属性赋值给变量 c
const {a: {b: {c}}} = obj2;
console.log(c); // 1
// 解构赋值的默认值
const obj3 = {a: 1};
// 将对象中的 b 属性赋值给变量 b，如果对象中没有 b 属性，则将变量 b 赋值为 2
const {b = 2} = obj3;
console.log(b); // 2来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656842fed2f5e1655d10ae70