ES6議論の脱構築のポイントは何ですか？

Question

はのは、私がobjという名前の次のJavaScriptオブジェクトがあるとしましょう：

obj = { 
    val1: { 
     val2: "Hello World" 
    } 
}; 

私は、次のようなものを使って関数内のOBJを分解できます。比較のために

function someFunction({ val1: { val2: greeting } }) { 
    console.log(greeting); 
} 

を、ここではより伝統的な、バニラです関数：

function someFunction(obj) { 
    console.log(obj.val1.val2); // could have stored this in a "greeting" const for clarity if desired 
} 

私の質問は本当に改善ですか？確かに、関数本体にgreetingを利用する方がはっきりしていますが、より複雑なオブジェクトの場合、このような構文がどのように非常に密になり、読みにくいのかを簡単に確認できます。脱構築はパフォーマンスの観点からより効率的ですか？オブジェクトは参照によって渡されなければならないので、私は想像するのが面倒です。多分私はここで何かを逃しています。

あなたのご意見をお寄せいただきありがとうございます！

Answer 1

オブジェクト分解を使用すると、コードをいくつかの小さな方法で簡略化することができます。これは人生の大きな変化ではありませんが、一度人々がそれに集中すれば、彼らはそれが役に立つと思います。

1. これは、関数がどのような引数を取るかをより明確にします。多くの場合、関数はobjでしたが、関数の本文を読んで、有効なキーを見つけたり、ドキュメントをチェックしたりしなければなりません。

   var foo = function(args) { 
       // hmmm what keys go on args? 
   } 
   
   var foo = function({ url : url, overwrite : overwrite = false }) { 
       // oh, url and overwrite, and overwrite has a default 
   } 
   

2. これは、ネストされたキーに到達することを避けるために、関数本体内のいくつかのキーストロークを保存します。

   // forced to continually reach into the args object 
   var foo = function(args) { 
       if (args.nested.something === true) { 
        doFn(args.nested.key); 
       } 
   } 
   
   // no more reaching, everything is flat 
   var foo = function({ nested : { something : something, key : key } }) { 
       if (something === true) { 
        doFn(key); 
       } 
   } 
   

3. ネストされたキーのより良いデフォルト設定を可能にします。

   // old style 
   var foo = function(args) { 
       args = args || {}; 
       args.nested = args.nested || {}; 
       args.nested.foo = args.nested.foo || "fooValue"; 
       args.nested.active = args.nested.active !== undefined ? args.nested.active : true; // can't do || on boolean true or it overwrites passed false 
   } 
   
   var foo = function({ 
       nested : { foo : foo = "fooValue", active : active = true } = {} 
   } = {}) { 
       console.log(foo, active); 
   } 
   
   // foo() - "fooValue" true 
   // foo({}) - "fooValue" true 
   // foo({ nested : { foo : "changed" } }) - "changed" true 
   // foo({ nested : { active : false} }) - "fooValue" false 
   

ない、本当に、私はまだそれを使用しています。しかし、私は、ちょうど=>とテンプレート文字列のように、それに慣れて少し私を取るだろう、どちらも私は今定期的に使用します。

Answer 2

1つの違いは、まだ"Hello World"を評価するために指しており、必要に応じて、greeting識別子への参照を使用することができながら、あなたが

return {greeting} 

{greeting: "Hello World"} 

を取得することができます最初のアプローチです。 2番目の例では、同じ値を得るには

return {greeting:obj.val1.val2} 

を取得する必要があります。