获得完整访问权限
测验

解释对象和数组的解构赋值概念

主题
JavaScript
在GitHub上编辑

总结

解构赋值是 JavaScript 中的一种语法，它允许您将数组中的值或对象中的属性解包到不同的变量中。对于数组，您使用方括号，对于对象，您使用花括号。例如：

// 数组解构
const [a, b] = [1, 2];


// 对象解构
const { name, age } = { name: 'John', age: 30 };

对象和数组的解构赋值

解构赋值是一种方便的方法，用于将数组和对象中的值提取到单独的变量中。这可以使您的代码更具可读性和简洁性。

数组解构

数组解构允许您使用方括号将数组中的值解包到不同的变量中。

基本示例

const numbers = [1, 2, 3];
const [first, second, third] = numbers;


console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

跳过值

您可以通过在逗号之间留一个空格来跳过数组中的值。

const numbers = [1, 2, 3];
const [first, , third] = numbers;


console.log(first); // 1
console.log(third); // 3

默认值

如果数组没有足够的元素，您可以分配默认值。

const numbers = [1];
const [first, second = 2] = numbers;


console.log(first); // 1
console.log(second); // 2

对象解构

对象解构允许您使用花括号将对象中的属性解包到不同的变量中。

基本示例

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


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

重命名变量

您可以在解构时重命名变量。

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


console.log(personName); // John
console.log(personAge); // 30

默认值

如果属性在对象中不存在，您可以分配默认值。

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


console.log(name); // John
console.log(age); // 25

嵌套对象

您也可以解构嵌套对象。

const person = { name: 'John', address: { city: 'New York', zip: '10001' } };
const {
  name,
  address: { city, zip },
} = person;


console.log(name); // John
console.log(city); // New York
console.log(zip); // 10001

延伸阅读

在GitHub上编辑