web-dev-qa-db-ja.com

すべての要素の配列内のオブジェクトプロパティを分解します

最も基本的な形式では、オブジェクトの配列があります。

let arr = [
  {val:"a"},
  {val:"b"}
];

値['a', 'b']のみを取得するために、どのようにデストラクチャリングを使用できますか。

最初の値を取得するのは簡単です。

let [{val:res}] = arr; //res contains 'a'

配列内のすべての値の取得は、rest演算子を使用して実行できます。

let [...res] = arr; //res contains all objects

それらを組み合わせて、私は使用できると期待していました：

let [...{val:res}] = arr; //undefined, expected all 'val's (['a', 'b'])

上記は未定義を返します（FFでテスト済み）。いくつかのさらなるテストは、オブジェクトの破壊を使用するときに残りの演算子を追加しても反復を使用しないが、元のオブジェクトを取得することを示しているようです。 let [...{length:res}] = arr; //res= 2。 let [{val:...res}] = arr;やlet [{val}:...res] = arr;などの他のいくつかの試行では、構文エラーが発生します。

配列でmapを使用するなど、他の方法を使用するのは簡単ですが、ほとんどの場合、複数のレベル（配列を含む独自のプロパティを持つオブジェクトを持つ配列）を破棄しているときにこの問題に遭遇します。したがって、私は本当に破壊だけでそれを行う方法を回避しようとしています。便宜上： テストフィドル

編集

質問の目的を説明できなかった場合は、お詫び申し上げます。私は特定の問題の解決策を探しているのではなく、破壊するときに使用する正しい構文を見つけるだけです。

そうでなければ、最初の質問は次のようになります。上記の例では、なぜlet [...{val:res}] = arr;がすべての値（['a', 'b']）を返さないのですか。 2番目の質問は次のようになります：ネストされたオブジェクトの破壊でrest演算子を使用するための適切な構文は何ですか？ （ここでいくつかの定義が混同されていることは間違いありません）。後者はサポートされていないようですが、サポートされない（そしてその理由）ドキュメントはありません。

javascriptdestructuring
10
Me.Name

let [...{val:res}] = arr;がすべての値（['a', 'b']）を返さないのはなぜですか？

残りの構文を配列内包表記と混同しているようです。

[someElements, ...someExpression]に値を割り当てると、その値は反復可能であることがテストされ、イテレータによって生成された各要素がそれぞれのsomeElements変数に割り当てられます。破棄式で残りの構文を使用すると、配列が作成され、生成された値で配列を埋めながら、イテレータが最後まで実行されます。次に、その配列がsomeExpressionに割り当てられます。

これらの割り当てターゲットはすべて、他の破壊式（任意にネストされ、再帰的に評価される）、または変数やプロパティへの参照にすることができます。

したがって、let [...{val:res}] = arrを実行すると、配列が作成され、arrのイテレータからのすべての値が配列に入力されます。

let {val:res} = Array.from(arr[Symbol.iterator]())

これで、なぜそれがundefinedで終わるのか、そしてなぜ[...{length:res}]のようなものを使用しても結果が得られるのかがわかります。もう一つの例：

let [{val:res1}, ...{length: res2}] = arr;
console.log(res1) // 'a'
console.log(res2) // 1 (length of `[{val: 'b'}]`)

値['a', 'b']のみを取得するために、破棄をどのように使用できますか？

どういたしまして。 mapメソッドを使用します。

7
Bergi

このようにネストされたオブジェクトを分解できます

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Nested_object_and_array_destructuring

let arr = [
  {val:"a"},
  {val:"b"}
];

const [{val: valueOfA}, {val: valueOfB}] = arr

console.log(
  valueOfA, valueOfB
)
6
synthet1c

値のコールバックを使用したマッピングのほかに

let arr = [{ val: "a" }, { val: "b" }];

console.log(arr.map(o => o.val));

パラメータリスト内でdeconstructiongを使用し、値のみを使用して返すことができます。

let arr = [{ val: "a" }, { val: "b" }];

console.log(arr.map(({val}) => val));
1
Nina Scholz

割り当てを破棄する前に、割り当てターゲットを宣言できます。破壊ターゲットで、破壊ソースから割り当てターゲットインデックスの値を設定します

let arr1 = [{val: "a"}, {val: "b"}];

let arr2 = [{"foo":1,"arr":[{"val":"a"},{"val":"b"}]}
           , {"foo":2,"arr":[{"val":"c"},{"val":"d"}]}];

let [res1, res2] = [[], []];

[{val: res1[0]}, {val: res1[1]}] = arr1;

[{arr: [{val:res2[0]}, {val:res2[1]}]}
, {arr: [{val:res2[2]}, {val:res2[3]}]}] = arr2;

console.log(res1, res2);

または、ターゲットでrest elementを使用して、オブジェクトパターンの後にcomma演算子を含め、オブジェクトから取得した値を返すことで、ソースで値を収集することもできます。

let arr = [{val: "a"}, {val: "b"}];

let [...res] = [({val} = arr[0], val), ({val} = arr[1], val)];

console.log(res)
0
guest271314