在 Javascript 中解构赋值的好处

Question

我越来越多地遇到使用 ES2015 引入的解构赋值的代码，甚至更多时候我发现很难理解作者在做什么。我可以看到解构在某些情况下非常有用，但我的印象是它经常引入不必要的代码复杂性。

例如，MDN 上的嵌套对象和数组解构示例使用这一行来解构嵌套数组：

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

与这样的东西相比，它的优势在哪里，对我来说看起来更具可读性：

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

---

解构赋值解决了什么问题？

什么时候用，什么时候不用？

Answer 1

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

\n\n

但如果它是一个非常复杂的表达式，或者其他什么，你可以保存一个额外的变量。例如，比较这个函数

\n\n

function example(metadata) {\n    var englishTitle = metadata.title,\n        localeTitle  = metadata.translations[0].title;\n    \xe2\x80\xa6; // use englishTitle and localeTitle\n}\n

\n\n

到

\n\n

function example({title: englishTitle, translations: [{title: localeTitle}]}) {\n    \xe2\x80\xa6; // use englishTitle and localeTitle\n}\n

\n\n

它的声明性变得更加明显。

\n\n

对于每一种语法糖来说都是如此：只在它让你的代码变得更加甜美的地方应用它。

\n