javascript - 解构赋值符号

Question

我正在关注this使用 Gatsby 创建博客的示例。

在本教程中，赋值符号的使用如下:

export default function Index({ data }) {

  const { edges: posts } = data.allMarkdownRemark

  return (
    <div className="blog-posts">
      {posts
        .filter(post => post.node.frontmatter.title.length > 0)
        .map(({ node: post }) => {
          return (...);
        })}
    </div>
  )
}

第 2 行在我看来是解构赋值，这让我感到困惑。我们从哪个字典中将键 edges 的值 posts 分配给？为什么我们稍后可以引用 posts 而无需使用 edges 键引用它？

Answer 1

您偶然发现了解构并分配给新变量。

您可以找到文档 here然后向下滚动到分配给新变量名称。

它的作用是声明一个新变量(在您的例子中名为 posts ，其值为 data.allMarkdownRemark.edges。

语法可能看起来是倒退的，因为 edges 为 posts 赋予了值(value)，而不是相反，但如果你仔细考虑一下，我认为这是有道理的。

这样可以让你改变:

const {edges} = data.allMarkdownRemark

对此:

const { Edge: posts } = data.allMarkdownRemark

改动很小。