javascript関数のパラメータは

Question

function updateSomething(item) {} 

と

function updateSomething({items}) {} 

との違いは何ですか？ 最初のものの変数itemもオブジェクトである可能性があります。なぜ2番目のものがオブジェクト表記法を使用していますか？ いつ最初のものと後者のものを使うべきですか？

Answer 1

これは、ES2015のパラメータの非構造化です。 2番目のケースでは、引数のitemsプロパティの値にローカル変数を初期化しています。

function updateSomething({items}) { 

は、いくつかの他の例hereとhere

function updateSomething(obj) { 
    var items = obj.items; 

とほぼ同等です。この構文は、エッジまたはSafariでまだ利用できない（compatibility mapを参照）ので、あなたがBabelようtranspilerを使用する場合がありますことをPulling fields from objects passed as function parameter

注：

そしてMDNから。

Answer 2

第二の例は、それが目的であると仮定すると、最初のパラメータからitemプロパティを抽出するES6のパラメータ非構造のための速記を使用している：

function destructure({item}) { 
    console.log(item); 
} 

destructure({item: 3}); // logs "3" 

ES5当量は次のようになります

function destructure(arg1) { 
    var item = arg1.item; // or throw 
    ... 
} 

This blog post by 2alityは、破壊、パラメータ、およびそれらが一緒に再生する方法の優れた書き方を持っています。

destructureの最初の引数にitemプロパティがないと、エラーがスローされます。

あなたはdestructureまたは使用して、デフォルトでこれを結合するためのパラメータを指定することができます。

function ({foo, bar} = param) { 
    console.log(foo, bar); // the rest of param is not available 
} 

function ({foo, bar = 11} = param) { 
    console.log(foo, bar); // bar will be 11 if it was not set in param 
} 

あり、この構文のバリエーションの数がありますが、それは、オブジェクトの速記構文に対応です。

const item = 3; 
destructure({item}); // creates an object like {item: item}