你必须知道的 JavaScript 对象解构用法

2，同意，但是当你看到整个开发生态系统（就像我看到的 React）都在使用它时，我认为，以这种方式做出贡献会更好。

介绍

我们使用 JavaScript 对象来存储数据并在以后检索。我们以key-value成对的形式存储数据（也称为信息）。键值对也称为object properties。

这是一个employee具有三个属性的对象：id、name、dept 作为键，007、'James' 和 'Spy' 作为值。

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

自 ES6（ECMAScript 2015）以来，JavaScript 提供了一种以更具创新性的方式处理对象属性的机制。这种机制被称为Destructuring解构赋值（也称为解构赋值）。与其说它是一项特性，不如说它更像是一种添加到语言中的新语法。

如果您也喜欢通过视频内容学习，本文也可以作为 YouTube 视频教程在这里找到：🙂

不要忘记订阅以获取未来的内容。

在本文中，我们将学习对象解构的一些关键用法，这些用法对于 Web 开发者至关重要。它将帮助你成为一名称职高效的开发人员。如果你还知道其他一些很酷的用法，欢迎在下方评论区留言。

⭐ 使用解构从对象中检索值

对象解构的最基本用法是从对象中检索属性键的值。

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

传统上，我们会使用点符号 (.) 或下标符号 ([]) 从对象中检索值。下面的代码片段展示了使用点符号从对象中检索id值的示例。nameemployee

const id = employee.id;
const name = employee.name;

毫无疑问，它运行完美。但是，想想看，当你需要为许多属性值重复输入（或复制粘贴编辑）时，那该有多累啊？这时，解构赋值语法就派上用场了。

要从对象中解构值，可以使用如下语法，

const { id, name } = employee;

在这里，我们使用对象的键名来创建变量，并将对象中相同键的值赋给它们。在上面的代码片段中，我们检索了 和 的值，id而name无需在多行中输入它们。

即使您还有 20 个值需要检索，也只需用逗号指定这些键名即可。真是太轻松了！

⭐ 使用解构从嵌套对象中检索值

实际上，您的数据对象可能不像employee我们目前看到的对象那么简单。对象的键可以包含另一个对象作为值，从而形成嵌套对象。现在让我们看看如何从嵌套对象中检索键对应的值。

这是我们的employee对象，它的键值dept是一个对象。它有一个属性，address其键值是另一个对象。太好了，我们在这里处理一个嵌套对象。

const employee = {
  id: 007,
  name: 'James',
  dept: {
    id: 'D001',
    name: 'Spy',
    address: {
      street: '30 Wellington Square',
      city: 'Chelsea'  
    }
  }  
}

让我们以传统方式检索属性的值address。

const address = employee.dept.address;

它可以工作，并且输出是，

{
    "street": "30 Wellington Square",
    "city": "Chelsea"
}

现在让我们再深入一层并检索该street属性的值。

const street = employee.dept.address.street;

当然，我们输入了更多内容，输出是，

30 Wellington Square

现在有了解构，事情就简单了。你可以使用键的前驱键来定义键名。因此，要检索 的值address，我们将从其前驱键 开始dept。因此，dept是没有前驱的顶级键。因此，语法如下：

const { dept: { address } } = employee;
console.log(address);

对于street财产，

const { dept: { address: { street } } } = employee;
console.log(street);

让我们进入下一个。

⭐ 使用对象解构定义新变量

在某些情况下，当你检索对象值时，你不确定该对象是否具有特定的键。此外，你可能希望创建一个具有默认值的新变量，以防对象中没有该键。

我们以这个employee对象为例，

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

现在假设我们尝试检索age对象中不存在的属性值。传统的方法是：

const age = employee.age ? employee.age : 25;

如果我们找到该age属性，访问其值，并将其分配给变量，否则，分配默认值 25。那么，我们将如何使用迄今为止学到的对象解构语法来做到这一点？

这很简单。

const { name, age=25 } = employee;
console.log(age);

如您所见，我们可以通过指定键名和默认值来轻松实现这一点。它与我们刚才学习的传统方法具有类似的效果。

等等。解构部分还有更多神奇之处！创建一个全新的变量，并赋值给一个使用对象属性值计算出来的值怎么样？听起来很复杂？这里有一个例子，

const {name, dept, message = `${name} is ${dept}`} = employee;
console.log(message);  

我们创建一个message变量，并赋值给一个使用对象属性值计算出来的值name。dept很employee强大吧？

输出是，

James is Spy

⭐ 如何使用 JavaScript 对象解构别名？

在 JavaScript 对象解构中，你可以为解构的变量指定一个alias名称。这非常有助于减少变量名冲突的可能性。

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

假设你的源代码中存在一个名为 的变量dept。因此，如果我们在解构中使用相同的变量名，就会发生名称冲突。

相反，您可以使用别名来创建具有此新名称的变量。例如，在这种情况下，我们可以使用别名department。

const { dept: department } = employee;
console.log(department); //Spy

请注意，我们已经使用别名进行了解构，而不是使用尚未定义的实际键名。

console.log(dept);

输出，

不久前，我在 Twitter 上分享过这种用法，

在 Twitter 上关注我以获取更多提示和内容。

⭐ 使用对象解构处理动态名称属性

我们经常将 API 响应数据作为 JavaScript 对象来处理。这些对象可能包含动态数据，因此，作为客户端，我们甚至可能事先不知道属性键的名称。

让我们通过一个例子来理解它（同一个员工对象）

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

我们可以写一个函数，当传入一个键作为参数时，返回员工对象属性的值吗？是的，这意味着我们不会在函数内部硬编码键名。它对于函数来说是动态的。

以下是展示如何调用该函数的代码片段。

const id = getPropertyValue('id');
const name = getPropertyValue('name');

console.log(id, name); // 7 'James'

现在让我们来定义它。

function getPropertyValue(key) {
    const { [key]: returnValue } = employee;   
    return returnValue;
}

请注意解构赋值语句中方括号[..] key。我们传递给函数的键会被求值，然后从对象中获取值。是不是很酷？这是一种高效的用法。

⭐ 解构函数参数和返回值中的对象

如果您想探索任何基于现代 JavaScript 的框架/库（如 React、Vue、Svelte、Angular 等），则必须学习这种用法。您可以使用对象解构将属性值作为参数传递给函数。

员工对象，

const employee = {
  id: 007,
  name: 'James',
  dept: 'Spy'
}

现在让我们创建一个简单的函数，使用name和dept属性值创建一条消息来登录到浏览器控制台。

function logEmployee({name, dept}) {
  console.log(`${name} is ${dept}`); 
}

只需意识到它有多么简单。您无需将整个对象作为参数并选择所需的属性值。您可以直接将值作为函数参数传递并在函数内部使用它们。

您现在可以这样调用该函数，

logEmployee(employee); // James is Spy

对象解构还有一种函数用法。如果函数返回一个对象，你可以直接将其值解构为变量。让我们创建一个返回对象的函数。

function getUser() {
  return {
    'name': 'Alex',
    'age': 45
  }
}

现在，如果您有兴趣检索属性的值age，您可以这样做，

const { age } = getUser();
console.log(age); // 45

它确实节省了大量额外的打字和时间。

⭐ 在循环中使用对象解构

我们将要讨论的最后一个（但并非最不重要的）用法是在循环中进行解构。假设有一个员工对象数组。我们想要遍历该数组并使用每个员工对象的属性值。

const employees= [
  { 
      'name': 'Alex',
      'address': '15th Park Avenue',
      'age': 43
  },
  { 
      'name': 'John',
      'address': 'USA',
      'age': 33
  },
  { 
      'name': 'Ravi',
      'address': 'Bangalore',
      'age': 16
  }
];

您可以使用for-of循环遍历employees对象，然后使用对象解构赋值语法来检索详细信息。让我们在浏览器控制台中记录每个员工的姓名和年龄。

for(let {name, age} of employees) {
  console.log(`${name} is ${age} years old!!!`);
}

输出，

太棒了！现在我们都爱上了对象解构。

结论

时间宝贵。节省的时间越多，产出也就越多。对象解构语法可以帮你节省时间。如果还没用过，请在实践中尝试一下。

我很高兴能通过这篇文章与大家分享我关于对象解构的经验。如果您觉得这篇文章对您有帮助，请告诉我。您可以从这里找到本文使用的所有源代码。

• https://github.com/atapas/youtube/tree/main/code-with-tapas/object-destructuring

• 在 Twitter 上关注我
• 订阅我的 YouTube 频道
• GitHub 上的辅助项目