解除JavaScript解构语法的混淆
发布于：2021-02-08 10:00:54
JavaScript是一种非常有用的语言。它允许您从一个对象中提取值，并在一条语句中将它们分配给一个新变量。如果你以前没有遇到过解构，一个相当基本的情况是这样的:
const person = {
name: 'Mike Bifulco',
height: 556,
fears: ['heights', 'fire'],
};
const { name } = person;
console.log(name); // this will print 'Mike Bifulco'
这里发生的事情很简单。我们将创建一个名为name的const，并使用person.name中找到的值填充它。这是通过使用=左边的括号结构完成的。
(如果你以前没有见过或使用过这个，它肯定会让你感到困惑。不要为此责怪自己——这很快就会成为你的第二天性。)
通过解构还可以做很多其他有用的事情。对我来说，其中最常见的是:
重命名
如果你想从对象中取出一个值，但也需要重命名它(可能是为了代码的可读性)，你可以在一行中完成:
const person = {
name: 'Mike Bifulco',
height: 556,
fears: ['heights', 'fire'],
};
const { height: currentHeight } = person;
console.log(currentHeight); // 556
console.log(height); // undefined!
就像这样，我们已经将其分配person.height给currentHeight了一行。甜！
提取中
您可以从对象中提取一个值，然后使用其他所有内容创建另一个变量，也可以这样做：
const person = {
name: 'Mike Bifulco',
height: 556,
fears: ['heights', 'fire'],
};
const { fears, ...fearlessPerson } = person;
console.log(fearlessPerson.fears); // undefined!
console.log(fears[0]); // heights
这是解构语法和散布运算符（...）的组合。非常便利！
困难模式：复杂的解构
因此，通过解构来提取和重命名事物都是相当简单的。我已经舒适地使用了这两个技巧一段时间了。在过去的几个月中，我一直在为一些不同的项目（包括我自己的网站）使用GatsbyJS，当我开始自定义和实现自己的Gatsby主题时，我开始看到一些看起来非常复杂的解构语法，从整个站点的GraphQL查询中提取嵌套值。 我真的被抛出了-乍一看，发生的情况并不明显。让我们看一个示例，该示例是从用于在Gatsby主题中呈现单个页面的React组件中提取的：
const singlePage = ({
data,
location,
pageContext: { nextPagePath, previousPagePath },
}) => {
return (
<p>...react component markup</p>
);
};
在singlePageReact组件的定义中发生了很多事情。让我们看一下这种分解，并简化一下：
const {
data,
location,
pageContext: {
nextPagePath,
previousPagePath,
},
} = props;
花了一些时间，并花了一些力气才能弄清楚这里正在完成什么，所以让我们逐步进行一下：
右边const是= props，它告诉我们所有这些值都从名为的对象中被破坏了props。
前两个值，data并且location是很有意义的-它们看起来就像上面的例子。该行将从对象中const的这两个路径中的每一个创建一个props。
pageContext是事情变得有趣的地方-这是另一种破坏。令人困惑的是，这里从props中提取的值是nextPagePath和previousPagePath。没有为创建变量pageContext。
如果这种描述没有帮助-我不会怪你。我确实需要一些练习才能了解发生了什么。我什至不确定我会推荐使用这种语法-并不是特别容易阅读，特别是当诸如漂亮的工具将其压缩到更少的行上时。
话虽如此，这似乎是从Gatsby（可能还有其他地方）的GraphQL查询中提取数据时的必经之路。如果您要在那个世界上工作，那么熟悉一下这里发生的事情是个好主意。
我认为，习惯这种语法的最佳方法就是自己动手玩。我创建了一个JSBin，您可以使用它进行一些实验。我很想听听你如何处理它！检查它在这里。
您面临的一些挑战：
将变量重命名displayName为currentUserName
提取editedBy到自己的变量中
创建一个名为的对象meta，其中包含除方向以外的所有内容contactNumber。
总结
我很想听听您对此的看法-我发现自己写这篇文章是出于自助。通常，直到我孤立地练习一段时间后，这些事情才会具体化。您对销毁有什么创意用途？我在这里做错什么了吗？让我们来谈谈它。
作者介绍
