2016-03-22 9 views
3

ES2015の導入された構造化割り当てを使用するコードが頻繁に出てきましたが、著者が何をしているのかを理解することが非常に困難でした。私は、いくつかのケースでは、非構造化が非常に有用であることがわかりますが、しばしば不必要なコードの複雑さを招いているという印象を受けています。Javascriptでのアサインメントの構造化のメリット

など。 MDNのNested object and array destructuringの例では、この行を使用しているdestructureネストされた配列の操作を行います。

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

私にはたくさん読みやすく見えるよう、このようなものよりも有利である:

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

割り当てを破棄することによってどのような問題が解決されていますか?

いつそれらを使用するのですか?

+2

あなたの2つのコードは同等ではありません。 'localeTitle'は' translations'配列の最初のオブジェクトのtitleプロパティです。 – MinusFour

+0

はい、ありがとうございます!私はその質問を編集した。 – birnbaum

+1

より単純なケースでは、キーストロークが保存され、 'const {foo、bar} = this.props;' vs 'const foo = this.props.foo; const bar = this.props.bar; ' – zerkms

答えて

3

利点は、構造化されていない式を繰り返す必要がないことです。確かに、あなたの例では、違いはほとんどありません。すでに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 
} 

にこの機能を比較して、それはそれがどのように宣言型より明白になります。

すべての構文砂糖に当てはまるとおり、コードを甘くする場所にのみ適用します。