在Javascript中使用解构赋值的优点

Question

越来越多的代码开始使用ES2015中引入的解构赋值，但我经常发现很难理解作者在做什么。我可以看出解构在某些情况下非常有用，但我觉得它经常会引入不必要的代码复杂性。

例如，MDN上的嵌套对象和数组解构示例使用以下代码对嵌套数组进行解构：

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

相对于这样看起来更易读的东西，它有什么优势呢：

var englishTitle = metadata.title,
    localeTitle  = metadata.translations[0].title;

---

解构赋值可以解决哪些问题？

什么情况下应该使用它们，什么情况不应该使用？

- birnbaum

---

你的两段代码并不相等。localeTitle 是 translations 数组中第一个对象的标题属性。 - MinusFour

是的，谢谢！我编辑了问题。 - birnbaum

在简单的情况下，它可以节省击键并且仍然可读性更强。例如 const { foo, bar } = this.props; 相对于 const foo = this.props.foo; const bar = this.props.bar;。 - zerkms

与任何语言特性一样，它可能被滥用或误用。 - Mulan

Answer 1

好处是您不需要重复解构表达式。当然，在您的示例中，这几乎没有什么区别，因为您已经将其整齐地放在了metadata变量中。

但是，如果它是非常复杂的表达式或其他内容，则可以节省一个额外的变量。例如，比较一下这个函数：

function example(metadata) {
    var englishTitle = metadata.title,
        localeTitle  = metadata.translations[0].title;
    …; // use englishTitle and localeTitle
}

to

function example({title: englishTitle, translations: [{title: localeTitle}]}) {
    …; // use englishTitle and localeTitle
}

现在越来越明显，它是声明性的。

对于每个语法糖都是如此：只在能让你的代码更加简洁时使用它。

- Bergi

---

这真的比只是让函数接受更多参数并逐个传递每个参数更好吗？我同意它看起来比仅传递元数据更有表现力，但我习惯于定义函数，然后只在调用端传递正确的部分。 - James Joshua Street

@JamesJoshuaStreet 是的，传递对象仍然比分别传递单个值并手动维护它们的连接要简单。 - Bergi