解构赋值和展开运算符是 JavaScript 中常用的语法特性之一，它们可以让我们更方便地处理复杂的数据结构，提高代码的可读性和易用性。ES7 中新增了一些解构赋值和展开运算符的语法，本文将详细介绍它们的用法和示例。
解构赋值
解构赋值是一种快速从数组或对象中取出某些值并赋给变量的方式，它可以让我们在编写代码时避免重复赋值，增加代码的可维护性。在 ES6 中已经有了解构赋值，ES7 中新增的解构语法主要针对对象的嵌套结构进行了优化。
普通数组的解构赋值
首先，我们来看一下普通数组的解构赋值。在 ES6 中，可以使用下面的语法：
let arr = [1, 2]; let [a, b] = arr; console.log(a); // 1 console.log(b); // 2
在 ES7 中，我们可以对数组元素进行简单的筛选，例如：
let arr = [1, 2, 3, 4, 5]; let [a, , , b] = arr; console.log(a); // 1 console.log(b); // 4
这里，中间用逗号隔开的两个空格表明我们想要忽略数组元素。
嵌套数组的解构赋值
对于嵌套的数组，我们可以使用嵌套的解构赋值语法。例如：
let arr = [1, [2, 3], 4]; let [a, [b, c], d] = arr; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(d); // 4
对象的解构赋值
ES6 中的对象解构赋值也非常方便，例如：
let obj = { x: 1, y: 2 };
let { x, y } = obj;
console.log(x); // 1
console.log(y); // 2在 ES7 中，我们还可以解构对象中的嵌套属性，例如：
let obj = { x: 1, y: { z: 2 } };
let { x, y: { z } } = obj;
console.log(x); // 1
console.log(z); // 2这里 y: { z } 表示我们要取 obj.y.z 的值。
默认值
在 ES7 中，我们还可以指定解构赋值的默认值，例如：
let arr = [1]; let [a = 0, b = 1] = arr; console.log(a); // 1 console.log(b); // 1
这里，如果 arr 中没有第二个元素，则 b 的默认值为 1。
展开运算符
展开运算符可以将一个数组或对象展开成多个用逗号隔开的参数，它常常用于函数调用和对象合并等场合。
数组展开
首先，我们来看一下数组展开的用法。在 ES6 中，可以使用下面的语法：
let arr1 = [1, 2]; let arr2 = [3, 4]; let arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4]
在 ES7 中，我们可以在数组展开的同时，使用结构赋值，例如：
let arr1 = [1, 2]; let arr2 = [3, 4]; let [a, b, ...rest] = [...arr1, ...arr2]; console.log(a); // 1 console.log(b); // 2 console.log(rest); // [3, 4]
对象展开
对象展开的用法与数组类似，例如：
let obj1 = { x: 1, y: 2 };
let obj2 = { z: 3 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 2, z: 3 }在 ES7 中，我们也可以在对象展开的同时使用解构赋值，例如：
let obj1 = { x: 1, y: 2 };
let obj2 = { z: 3 };
let { x, ...rest } = { ...obj1, ...obj2 };
console.log(x); // 1
console.log(rest); // { y: 2, z: 3 }总结
解构赋值和展开运算符是非常实用的语法特性，它们可以让我们更方便地处理复杂的数据结构，提高代码的可读性和易用性。在 ES7 中，它们的语法得到了进一步的完善，让我们可以更加轻松地编写优美的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64844cae48841e989436882c