JS 对象解构赋值|极客笔记

JS 对象解构赋值

在 JavaScript 中，对象解构赋值是一种用来快速访问和提取对象中的属性值的方法。通过对象解构赋值，我们可以将一个对象中的属性值赋给一组变量，从而方便地使用这些属性值。

基本语法

对象解构赋值的基本语法如下：

const { 属性1, 属性2, ... } = 对象;

其中，属性1、属性2等为对象中的属性名，而对象则是要从中解构出属性值的对象。

示例

假设有一个包含人员信息的对象 person：

const person = {
  name: 'Alice',
  age: 30,
  gender: 'female'
};

我们可以使用对象解构赋值来提取出这个对象中的属性值：

const { name, age, gender } = person;

console.log(name);   // 输出：Alice
console.log(age);    // 输出：30
console.log(gender); // 输出：female

除了直接提取对象中属性的值外，我们还可以给变量起别名：

const { name: personName, age: personAge, gender: personGender } = person;

console.log(personName);   // 输出：Alice
console.log(personAge);    // 输出：30
console.log(personGender); // 输出：female

嵌套对象解构

在对象解构赋值中，还可以嵌套提取对象中嵌套对象的属性值。例如，假设有一个包含地址信息的嵌套对象 person：

const person = {
  name: 'Bob',
  age: 25,
  address: {
    city: 'New York',
    street: '123 Main St'
  }
};

我们可以使用对象解构嵌套的方式来提取出地址对象中的属性值：

const { name, age, address: { city, street } } = person;

console.log(city);   // 输出：New York
console.log(street); // 输出：123 Main St

默认值

如果对象中的属性值不存在或者为 undefined，可以通过设置默认值来避免解构赋值时出现报错。示例代码如下：

const person = {
  name: 'Carl',
  age: 35
};

const { name, age, gender = 'male' } = person;

console.log(name);   // 输出：Carl
console.log(age);    // 输出：35
console.log(gender); // 输出：male

在上面的示例中，person 对象中并没有 gender 属性，但是通过设置默认值为 'male'，我们在解构赋值时依然可以取到有效的值。

解构赋值和函数参数

除了在普通代码中使用对象解构赋值，我们还可以在函数参数中使用，这样可以更方便地传递对象的属性值。示例代码如下：

const person = {
  name: 'David',
  age: 40,
  gender: 'male'
};

function printPersonInfo({ name, age, gender }) {
  console.log(`Name:  ${name}, Age:$ {age}, Gender: ${gender}`);
}

printPersonInfo(person); // 输出：Name: David, Age: 40, Gender: male

通过在函数参数中直接使用对象解构赋值，我们可以将 person 对象中的属性值传递给函数 printPersonInfo，使得函数中可以直接访问这些属性值。