JS解构 - JavaScript

在 JavaScript 中，解构是一种从数组和对象中提取值并赋给变量的语法。解构使得我们可以从复杂的数据结构中快速、容易、直观地获取需要的数据。

数组解构

我们可以使用数组解构来从数组中提取值。下面是一个示例：

const numbers = [1, 2, 3, 4, 5];
const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在上面的代码中，我们首先定义了一个数组 numbers 。然后，我们使用解构来从数组中提取前三个值，并将它们赋给了变量 a，b 和 c。最后，我们在控制台中输出了变量的值。

我们也可以在解构中跳过一些值，例如：

const [a, , c] = [1, 2, 3];

console.log(a); // 1
console.log(c); // 3

在上面的代码中，我们用逗号（,）跳过了数组中的第二个值。

如果数组中没有足够的值被解构，那么未赋值的变量将会是 undefined：

const [a, b, c, d, e] = [1, 2, 3];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // undefined
console.log(e); // undefined

对象解构

我们也可以使用对象解构来从对象中提取值。下面是一个示例：

const person = { name: 'John', age: 30 };
const { name, age } = person;

console.log(name); // 'John'
console.log(age); // 30

在上面的代码中，我们首先定义了一个对象 person。然后，我们使用解构来从对象中提取 name 和 age 值，并将它们赋给了同名的变量。最后，我们在控制台中输出了这些变量的值。

我们也可以使用变量别名来解构对象中的值，例如：

const person = { name: 'John', age: 30 };
const { name: firstName, age: years } = person;

console.log(firstName); // 'John'
console.log(years); // 30

在上面的代码中，我们关键字 name 和 age 用作了变量别名。

如果对象中没有足够的值被解构，那么未赋值的变量将会是 undefined：

const person = { name: 'John' };
const { name, age } = person;

console.log(name); // 'John'
console.log(age); // undefined

默认值

我们可以为数组和对象解构中未赋值的变量设置默认值，例如：

const numbers = [1, 2];
const [a, b, c = 3] = numbers;
console.log(c); // 3

const person = { name: 'John' };
const { name, age = 30 } = person;
console.log(age); // 30

在上面的代码中，我们分别在数组和对象解构中为变量 c 和 age 设置了默认值。

剩余/展开语法

我们可以使用剩余/展开语法 ... 来捕获剩余的数组项或者展开对象中的属性。下面是一个示例：

const numbers = [1, 2, 3, 4, 5];
const [a, b, ...rest] = numbers;

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

const person = { name: 'John', age: 30, city: 'New York' };
const { name, ...rest } = person;

console.log(name); // 'John'
console.log(rest); // { age: 30, city: 'New York' }

在上面的代码中，我们分别展示了如何使用剩余/展开语法来捕获剩余的数组项或者展开对象中的属性。

总结

解构是一种从数组和对象中提取值并赋给变量的语法，在 JavaScript 中，解构可以使得我们可以从复杂的数据结构中快速、容易、直观地获取需要的数据。除此之外，我们还可以使用默认值和剩余/展开语法来扩展解构的功能。