我新发现的 ES6 利器：解构对象作为参数

像许多其他开发者一样，我正在继续我的教育，学习关于 ES6 的知识。我做这件事的一种方法是参加由聪明人举办的研讨会。我参加了 Kyle Simpson 的 ES6: The Good Parts 课程，并发现自己对以前没有注意到的一块 ES6 的实际应用特别感兴趣：解构对象作为参数。

一些背景

随着应用程序的增长，我们的函数参数可能会变得臃肿。这会带来许多问题

• 我们必须记住调用函数时这些参数的特定顺序。如果超过三个，则需要进行一些上下文切换才能进行比较。
• 我们没有开箱即用的默认值
• 为了进行适当的自文档化，我们严重依赖于命名。在代码审查中命名参数真是一件趣事！

我们如何用 ES6 解决这个问题？

从广义上讲，考虑将对象作为参数传递，乍一看似乎很简单，甚至可能稍微复杂一些，因为人们不习惯以这种方式阅读参数并思考它们。但是看看上面解决的所有问题

• 您不再需要记住特定的顺序
• 我们可以轻松拥有可选参数
• 我们可以有默认值，这也很棒，因为它可以自我文档化
• 我们可以为失败条件设置回退，或者如果我们想显示错误，可以选择不设置

解构可以帮助我们轻松地从数组或对象中提取和操作数据到不同的变量，并使我们的参数更有意义。这有助于我们在将来与读者沟通我们的意图，并有助于维护。

什么是解构？

解构对象作为参数将几个东西组合成一个。在我们展示这个特定的应用之前，让我们先从整体上了解解构的概念。解构有很多用途和应用，可能最常用于当你有一个大型 JSON 对象或 API，并且你想从中提取有意义的变量时。解构在 ES5 中是可能的，但是由于 ES6 中的许多功能组合，解构变得更加清晰和有价值。

我们只讨论解构对象（而不是数组），但需要注意的是，两者都是可能的。我们将从 ES5 和 ES6 中对象解构的非常基本和简化的比较开始

以下是如何在 ES5 中解构对象

var o = {a: 1, b: 2, c: 3};
  
var chico = o.a,
    harpo = o.b,
    groucho = o.c;

console.log(chico, harpo, groucho);
// 1 2 3

现在，它的 ES6 对应物

const o = {chico: 1, harpo: 2, groucho: 3};

const { chico, harpo, groucho } = o;

console.log(chico, harpo, groucho);
// 1 2 3

这有一些非常有用的实际应用。我们可以从对象创建顶层变量，一次创建几个属性，甚至在它们嵌套了几层深的时候提取它们。

const o = {
  chico: 1, 
  harpo: 2, 
  groucho: 3,
  othermarx : {
    zeppo: 4,
    isthatamarxbrother: {
      gummo: 5,
      polly: 6
    }
  }
};

const { gummo, polly } = o.othermarx.isthatamarxbrother;

console.log(gummo, polly);

我们甚至可以在这个过程中重命名它们，例如 const { gummo, polly:cousin } = o.othermarx.isthatamarxbrother;

本文不会介绍解构的所有内容，以便我们能够专注于一个实际的应用。如果您有兴趣了解更多信息，以及它如何应用于 ES6 中的数组以及其他一些不错的用途，以下是一些不错的资源

• Mikael Brevik 的 Github gist
• 探索 JS

我们如何在函数中使用它？

让我们从一个非常基础的示例开始，该示例是一个带有某些参数的函数。假设我们需要一个包含大量标准装运数据的清单。这些数据在大多数情况下保持不变，但每天都会有一些偏差。默认值在这里很有意义，但我们必须写出类似这样的东西

function shipmentES5Defaults(params) {
  params = params === undefined ? {} : params;
  var items = params.items === undefined ? 'bananas' : params.items;
  var number = params.number === undefined ? 5: params.number;
  var pkg = params.pkg === undefined ? 'crates' : params.pkg;
  console.log("We have a shipment of " + items + " in " + number + " " + pkg + ".");
}

shipmentES5Defaults();
// We have a shipment of bananas in 5 crates.

shipmentES5Defaults({
  items: 'cherries',
  pkg: 'bags'
});
// We have a shipment of cherries in 5 bags.

这很好，因为我们有默认值，并且如果未指定某些内容，则不会返回未定义。

但是在 ES6 中，我们可以使用刚刚介绍的解构对象作为参数，这为我们提供了一种快速简便的方法来提供默认值。除了有用之外，它也是一种自我文档化的方法。这非常有用，并且是一种非常好的在可读性方面编写函数的方法。更不用说 ES6 模板字面量 使字符串易于阅读和写入。

function shipmentES6({ items = 'bananas', number = 5, package = 'boxes' } = {}) {
  console.log(`We have a shipment of ${items} in ${number} ${package}.`);
};

shipmentES6({ package: 'crates' });
// -> We have a shipment of bananas in 5 crates.
shipmentES6({ items: 'tomatoes', number: 18 });
// -> We have a shipment of tomatoes in 18 boxes.
shipmentES6();
// -> We have a shipment of bananas in 5 boxes.

除了所有这些好处之外，如果您和您的同事或合作者习惯以这种风格编写，那么如果您不传递默认值，您还在传达没有默认值，并且您希望它出错。

敬请关注我们的下一篇文章，我们将使用这种编写参数的方法来构建一个没有外部库的 SVG 图表。