ECMAScript 2017：使用解构对象对多个变量赋值-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 越来越流行，新的 ECMAScript 标准不断推出，其中 ECMAScript 2017（ES8）带来了一项非常实用的新功能：解构对象。使用解构对象可以快速而简洁地将一个对象中的多个键值对赋值给多个变量。

解构对象的基本语法

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

let { key1, key2 } = { key1: value1, key2: value2 };

其中，{ key1: value1, key2: value2 } 表示一个对象，包含了两个键值对 key1: value1 和 key2: value2。let { key1, key2 } 表示定义了两个变量，分别命名为 key1 和 key2。通过将左右两边的代码组合起来，就可以同时将对象中的两个键值对赋值给变量。需要注意的是，左右两边的键名要一一对应。如果对象中没有对应的键，变量的值将会是 undefined。

解构对象的用途

解构对象可以减少代码量，提高代码的可读性。它可以用在很多场景中，其中包括：

1. 提取函数返回的多个值

function getUserInfo() {
  // 从服务端获取用户信息
  const user = {
    name: 'John',
    age: 26,
    gender: 'Male'
  };
  return user;
}

const { name, age, gender } = getUserInfo();
console.log(name, age, gender); // 'John' 26 'Male'

这里，我们定义了一个 getUserInfo 函数，用于从服务器获取用户信息。可以看到，该函数返回一个对象，包含了用户的姓名、年龄和性别。我们可以使用解构对象，将对象中的三个键值对赋值给三个变量，分别是 name、age 和 gender。这样我们就很容易获取到函数返回的多个值了。

2. 重命名对象中的键

const user = {
  name: 'John',
  age: 26,
  gender: 'Male'
};

const { name: fullName, age: userAge, gender } = user;
console.log(fullName, userAge, gender); // 'John' 26 'Male'

在这种情况下，我们想要将对象 user 中的 name 键值对赋值给一个变量 fullName，而不是直接使用 name。我们可以使用 { name: fullName } 来重命名键名，即把 name 重命名为 fullName。这样，我们就可以使用解构对象将 user 中的 name 键值对赋值给 fullName 变量了。

3. 接收函数参数

function printUserInfo({ name, age, gender }) {
  console.log(`Name: ${name}\nAge: ${age}\nGender: ${gender}`);
}

const user = {
  name: 'John',
  age: 26,
  gender: 'Male'
};

printUserInfo(user);

这里我们定义了一个 printUserInfo 函数，用于输出用户的姓名、年龄和性别。该函数接收一个参数，是一个对象，包含了用户信息。我们可以使用解构对象的方式，在函数参数中定义一组键，表示需要从对象中解构出来的值。这样在函数内部，我们就可以直接使用这些键名对应的变量了。

解构对象的注意事项

使用解构对象时，需要注意以下几点：

如果解构对象左侧的变量名与对象中的属性名不匹配，需要使用 key: value 的形式来重命名，如 { name: fullName }。
只能够解构已经存在的属性。如果解构对象中存在不存在的属性，该属性的值将会是 undefined。
解构对象本身是左值，可以出现在赋值语句的左侧，如 let { name, age } = user;。但需要注意，这种情况下不要省略 let 或 const 声明，否则将会抛出异常。

示例代码

const user = {
  name: 'John',
  age: 26,
  gender: 'Male'
};

let { name, age, gender } = user;
console.log(name, age, gender); // 'John' 26 'Male'

let { name: fullName, age: userAge } = user;
console.log(fullName, userAge); // 'John' 26

function printUserInfo({ name, age, gender }) {
  console.log(`Name: ${name}\nAge: ${age}\nGender: ${gender}`);
}

printUserInfo(user); // Name: John Age: 26 Gender: Male

总结

在 ECMAScript 2017 中，解构对象成为了一项非常实用的特性。它可以让我们快速而简洁地将一个对象中的多个键值对赋值给多个变量，减少代码量，提高代码的可读性。通过几个简单的示例，我们可以看到解构对象的应用场景，并了解了一些使用解构对象的注意事项。希望今后在编写 JavaScript 代码时，可以更加灵活地使用解构对象，让代码更加简洁、优美。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65914512eb4cecbf2d6799e3