ECMAScript 2019发布了许多新功能，其中之一是解构赋值。解构赋值可以让你从对象或数组中提取数据，并将其赋给变量。这篇文章将详解如何使用解构赋值，并给出一些示例代码。
对象解构赋值
对象解构赋值可以让你从一个对象中提取属性，然后将它们的值分配给变量。下面是一个例子：
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // John
console.log(age); // 30在这个例子中，我们创建了一个名为 person 的对象，并使用对象解构来创建 name 和 age 变量，这两个变量分别赋值为 person 对象中对应的属性的值。我们还可以给变量指定不同的名字：
const person = { name: 'John', age: 30 };
const { name: firstName, age: years } = person;
console.log(firstName); // John
console.log(years); // 30在这个例子中，我们指定了 name 对应的变量名为 firstName，而 age 对应的变量名为 years。
我们还可以使用默认值来避免变量没有被赋值的情况：
const person = { name: 'John' };
const { name, age = 30 } = person;
console.log(name); // John
console.log(age); // 30在这个例子中，我们给 age 指定了一个默认值为 30，如果 person 对象中没有 age 属性，则 age 变量将被赋值为默认值。
数组解构赋值
数组解构赋值类似于对象解构赋值，但是它可以让你从一个数组中提取元素，并将它们的值分配给变量。下面是一个例子：
const numbers = [1, 2, 3]; const [a, b, c] = numbers; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
在这个例子中，我们创建了一个名为 numbers 的数组，并使用数组解构来创建三个变量 a、b 和 c，这三个变量分别赋值为 numbers 数组中对应的元素的值。
我们还可以忽略某些元素：
const numbers = [1, 2, 3, 4]; const [a, , b, c] = numbers; console.log(a); // 1 console.log(b); // 3 console.log(c); // 4
在这个例子中，我们忽略了 numbers 数组中的第二个元素，也就是 2。
我们还可以使用默认值：
const numbers = [1, 2]; const [a, b, c = 3] = numbers; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
在这个例子中，我们给 c 指定了一个默认值为 3，如果 numbers 数组中没有第三个元素，则 c 变量将被赋值为默认值。
嵌套解构赋值
对象和数组可以相互嵌套，我们也可以使用嵌套解构赋值来处理它们。下面是一个例子：
const person = { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } };
const { name, age, address: { city, country } } = person;
console.log(name); // John
console.log(age); // 30
console.log(city); // New York
console.log(country); // USA在这个例子中，我们创建了一个名为 person 的对象，并使用嵌套解构来创建 name、age、city 和 country 四个变量。我们还使用了别名 address 来访问嵌套对象。
操作符 ... 和剩余参数
操作符 ... 可以让你将数组或对象的剩余部分赋值给一个变量。下面是一个例子：
const numbers = [1, 2, 3, 4]; const [a, b, ...rest] = numbers; console.log(a); // 1 console.log(b); // 2 console.log(rest); // [3, 4]
在这个例子中，我们使用 ...rest 将 numbers 数组中剩余的部分赋值给了 rest 变量。
我们还可以在对象中使用剩余参数：
const person = { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } };
const { name, ...rest } = person;
console.log(name); // John
console.log(rest); // { age: 30, address: { city: 'New York', country: 'USA' } }在这个例子中，我们使用 ...rest 将 person 对象中除了 name 属性以外的部分赋值给了 rest 变量。
结论
解构赋值是 ECMAScript 2019 新增的功能之一，可以让你从对象或数组中提取数据，并将其赋给变量。本文详细介绍了如何使用解构赋值，并给出了一些示例代码，希望可以对你学习和使用 JavaScript 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb599644713626015bb717