Javascript 中解构赋值的好处

Question

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

例如MDN 上的 Nested object and array destructuring 示例使用此行来解构嵌套数组：

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

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

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

解构赋值解决了哪些问题？

何时使用它们，何时不使用它们？

Answer 1

好处是不需要重复解构后的表达式。当然，在您的示例中，它几乎没有什么不同，因为您已经在那个 metadata 变量中巧妙地得到了它。

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

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

到

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

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

对于每个语法糖来说都是如此：仅在它使您的代码变甜的地方应用它。

Javascript 中解构赋值的好处

Benefits of destructuring assignments in Javascript

javascript

destructuring

ecmascript-6