関数パラメーターリスト内の中括弧はes6で何をしますか？

120

私が取り組んでいるコードベースで、次のような関数が見られます。

const func = ({ param1, param2 }) => {
  //do stuff
}

これは正確には何をしているのですか？これが何と呼ばれているのか、Google検索でそれをどのように説明するのかさえわからないので、Googleでそれを見つけるのに苦労しています。

javascript ecmascript-6

— ネイサン
ソース

— ベルギ

116

それは破壊的ですが、パラメーター内に含まれています。破壊なしの同等のものは次のようになります。

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}

— ジェームズ・ソープ
ソース

11

私が正しく理解していることを確認するために、基本的には、これらのプロパティを含むオブジェクトが関数に渡され、関数内で、名前を使用するだけでプロパティに自動的にアクセスできることを意味します。

— Nathan

7

@Nathanはい、特にオブジェクトの構造化に関するセクションを参照してください。ただし、変数を更新しても元のオブジェクトプロパティは更新されないことに注意してください。元の値への参照を作成するのとは異なります。

— ジェームズ・ソープ

それはへのリンクに良いだろう@JamesThorpe developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

— lsborg

11

これは、オブジェクトをプロパティとして渡します。

基本的には

let param1 = someObject.param1
let param2 = someObject.param2

パラメータなしでこの手法を使用する別の方法は次のとおりです。次に、someObjectにこれらのプロパティが含まれていることを少し考えてみましょう。

let {param1, param2} = someObject;

— オズロドリゲス
ソース

3

これは、オブジェクトを破壊する割り当てです。私と同じように、ES6のオブジェクト構造化構文はオブジェクトリテラル構造のようには見えませんが、動作しないので、驚くかもしれません。

それはあなたが遭遇した非常に簡潔なフォームをサポートするだけでなく、フィールドとデフォルト引数の名前を変更します：

基本的には、{oldkeyname：newkeyname = defaultvalue、...}です。'：'はキーと値の区切り文字ではありません。「=」です。

この言語設計の決定のいくつかの落とし穴は、次のようなことをしなければならないかもしれないということです

;（{a、b} = some_object）;

余分な括弧は、左中括弧がブロックとして解析されるのを防ぎ、先頭のセミコロンは、括弧が前の行の関数への関数呼び出しとして解析されるのを防ぎます。

オブジェクトの破壊的な割り当て中の重要なエラーはスローされません。それが「未定義」の値で終わるだけです。それは、キーエラーであるか、他のエラーであるにもかかわらず、暗黙的に「未定義」として伝搬されたものです。

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>

— アンドリューワグナー
ソース