web-dev-qa-db-ja.com

ネストされたオブジェクトの破棄：親とその子の値を取得する方法は？

以下の関数では、プロパティcurrentを持つtextareaオブジェクトを取得します。

ここで、ネストされたデストラクチャリングはStart変数とEnd変数で機能します。しかし、current変数は機能しません。

function someFunction({ current: { selectionStart: Start, selectionEnd: End } }, AppStateSetter) {

    // do something with current, Start, and End
}
javascriptreactjsdestructuringreact-ref
10
soufiane yakoubi

最初の非構造化では、Start変数とEnd変数のみが作成されます。 currentを変数として作成する場合は、再度宣言する必要があります。

function ({ current: { selectionStart: Start, selectionEnd: End }, current }, AppStateSetter) {

// do something with current , Start , and End

}

できます Babelコンパイラでテストしてください ：

このコード：

const object = {
  current: {
    selectionStart: "prop 1",
    selectionEnd: "prop2"
  }
}

const { current: { selectionStart: Start, selectionEnd: End } } = object;

次の場所に移動します。

var object = {
  current: {
    selectionStart: "prop 1",
    selectionEnd: "prop2"
  }
};

var _object$current = object.current,
    Start = _object$current.selectionStart,
    End = _object$current.selectionEnd;

ご覧のとおり、current変数は作成されていません。

11
adiga

あなたが直面している問題は、現在がundefinedのときに発生すると思います。

デフォルト値で破壊してみることができます。

function ({ current: { selectionStart: Start, selectionEnd: End } = {} }, AppStateSetter) {
  // do something with Start and End
}

currentにもアクセスする必要があると思われる場合は、関数内で破棄してみてください。

function ({ current = {}}, AppStateSetter) {
  const { selectionStart: Start, selectionEnd: End } = current
  // do something with current, Start and End
}
3
Dinesh Pandiyan

1つのステートメントでデフォルト値を分解して割り当てることができます。

function someFunction({
        current: {
          selectionStart: Start,
          selectionEnd: End
        } = {},
        current = {}
      },
      AppStateSetter) {
      // now you can use the let variables Start, End and current,
      // with current's default value set to empty object
      }

Currentにデフォルト値を割り当てたくないが、それでもその変数を使用したい場合は、割り当てなしでプロパティの名前を書き込むことができます。空のオブジェクトでsomeFunctionが呼び出された場合、現在の値にデフォルト値を割り当てないと、未定義になります。

    function someFunction1({
        current: {
          selectionStart: Start,
          selectionEnd: End
        } = {},
        current
      },
      AppStateSetter) {
      // now you can use the let variables Start, End and current
      // if empty object is passed, current will be undefined
    }

JsFiddleスニペット： デフォルト値がある場合とない場合のネストされたオブジェクトの破棄

1
FullStackEngineer