从 ECMAScript 6（简称 ES6）开始，您可以在 JavaScript 中解构对象。作为 JavaScript 开发人员，您可能会在日常工作中解构对象。

让我们了解为什么要使用解构，然后学习如何解构 JavaScript 对象。

为什么要解构一个对象？

让我们看一个例子来帮助我们理解为什么我们首先要解构一个对象。让我们创建一个名为的对象 pet ：

const pet:  = {
 name: 'Captain',
 food: 'Kibble',
 color: 'Black'
};

假设我们只想打印出宠物的食物。我们可以这样做：

console.log(pet.food);

这将输出 kibble 到控制台。但是， pet.name 每次需要食物值时都将其写出来很繁琐。因此，在 ES6 之前，JavaScript 开发人员会这样做：

const food = pet.food;

在这里，我们声明一个名为的变量 food ，并表示将该变量指向存储在 中的值 pet.food ，即 kibble 。我们可以通过添加以下代码行来证明我们已经完成了此操作：

console.log(food); // output: kibble

但是，假设我们想对对象中的其余属性执行相同的操作 pet ：

const name = pet.name;
const food = pet.food;
const color = pet.color;

这开始变得冗长起来。这就是 解构 的用武之地。

如何在 JavaScript 中解构对象

不用写出来 const food = pet.food ，而可以利用解构并简单地写：

const { food } = pet;

现在如果我们再次打印出来 food ，我们可以看到我们已经创建了 food 变量：

console.log(food); // output: kibble

使用解构，我们的代码现在更加简洁和干练。这就是为什么 JavaScript 开发人员在 ES6 引入解构后就开始使用的原因。

我们先暂停一下，再看一下这一行：

const { food } = pet;

这里发生了什么事？

请记住，在 JavaScript 对象中， 属性 是键/值对。键是字符串，值可以是任何数据类型。在对象中 pet ，其中一个键是 food ，其对应的值是 kibble .

当我们将 food 变量括在括号中时，我们会在对象内部查找 pet 具有相同名称的属性。我们创建一个名为 的新变量 food ，并将其值设置为 kibble ，即该键的对应值。

如果您想要从对象中解构多个属性及其键，您可以这样做：

const { name, food, color } = pet;

现在如果你打印出这些变量，你会看到它们现在都存在：

console.log(name, food, color) // output: captain chewtoy black

在本文中，我们学习了如何解构对象以及为什么要这样做。我们还学习了如何解构一个对象的多个属性。

感谢您的阅读！

如果您喜欢这篇文章，请加入我的编码俱乐部，我们每周日一起应对编码挑战，并在学习新技术时互相支持。

如果您对这篇文章有任何反馈或疑问，请在 Twitter 上找到我 @madisonkanna。