解构给默认值_使用 JavaScript 解构让代码更优雅

茫茫人海中与你相遇

相信未来的你不会很差

原作者：Juan Cruz Martinez

原文链接：Write Cleaner Code by Using JavaScript Destructuring

译者：zenblo

来源：https://juejin.cn/post/6901081096260648974#heading-0

解构是我最喜欢的 JavaScript 特性之一。简单地说，解构可以将复杂结构(如数组或对象)分解为更简单的部分，虽然还有很多内容，但是相对简化了代码结构。

让我们通过一个例子来更好地了解：

const article = {
      title: "My Article",  rating: 5,  author: {
        name: "Juan",    twitter: "@bajcmartinez"  }}// 现在把它打印出来console.log(`"${article.title}" by ${article.author.name} had ${article.rating} stars`)// 通过使用解构同样能完成const { title, rating, author: { name } } = articleconsole.log(`"${title}" by ${name} had ${rating} stars`)------------------------Output------------------------"My Article" by Juan had 5 stars"My Article" by Juan had 5 stars

现在，一部分人已经采用解构开发了一段时间，或许是在构建 React 应用时候，但是他们并不完全了解它。对其他人来说，这可能是第一次用到解构。因此，本文将从头到尾完成整个过程，最终使得大家对解构的认知都能达到同一水平。

解构对象

在上面的例子中，所有隐藏的内容都发生在下面这行代码：

const { title, rating, author: { name } } = article

现在，在表达式左侧使用这样的大括号似乎有点奇怪，但这就是我们告诉 JavaScript 正在分解对象的方式。

解构对象可以绑定到对象里的任一层级的任何属性上。让我们从一个更简单的示例开始：

const me = {
      name: "Juan"}const { name } = me

在上面的例子中，我们声明了一个名为  name