JavaScript 配列内のネストされたオブジェクトをフィルタリングして、一致する要素のみを維持する方法

ネストされたオブジェクトに基づいて配列をフィルタリングする

JavaScript では、値に基づいてオブジェクトの配列をフィルタリングする必要があるシナリオに遭遇することがあります。ネストされたプロパティの。これを実現するには、強力なフィルタリング手法を活用できます。

質問で示された例を考えてみましょう。ここでの目標は、ネストされた "subElements" 配列内の特定の姓の値に基づいて要素の配列をフィルタリングすることです。入力配列は次のように定義されます。

<code class="js">let arrayOfElements = [
    {
       "name": "a",
       "subElements": [
          {"surname": 1},
          {"surname": 2}
       ]
    },
    {
       "name": "b",
       "subElements": [
          {"surname": 3},
          {"surname": 1}
       ]
    },
    {
       "name": "c",
       "subElements": [
          {"surname": 2},
          {"surname": 5}
       ]
    }
];</code>

この配列をフィルタリングして、「surname」が 1 に設定されたオブジェクトを含む「subElements」配列を持つ要素のみを取得するには、「」の組み合わせを使用できます。 filter" メソッドと "some" メソッド:

<code class="js">let filteredArray = arrayOfElements.filter((element) => element.subElements.some((subElement) => subElement.surname === 1));</code>

ただし、このアプローチの問題は、フィルター条件に一致しないものも含め、すべての "subElement" を持つオブジェクトが返されることです。これを解決するには、スプレッド演算子とともに「マップ」関数を使用します。

<code class="js">filteredArray = arrayOfElements.map((element) => {
  return {...element, subElements: element.subElements.filter((subElement) => subElement.surname === 1)}
})</code>

ここでは、スプレッド演算子 (つまり、「...element」) を使用して、新しいオブジェクト ベースのオブジェクトを作成します。元の「要素」に対して、その「subElements」プロパティをフィルタリングされた結果でオーバーライドします。このアプローチにより、元の配列の構造を維持しながら、不要な「サブ要素」を除外できます。結果の「filteredArray」には、「姓」基準に基づいてフィルタリングされた「subElement」を持つ目的のオブジェクトが含まれます:

<code class="js">[
    {
        "name": "a",
        "subElements": [
           {"surname": 1}
        ]
    },
    {
        "name": "b",
        "subElements": [
           {"surname": 1}
        ]
    }
]</code>

以上がJavaScript 配列内のネストされたオブジェクトをフィルタリングして、一致する要素のみを維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。