js配列のfind、some、filter、reduceの違いの詳細な説明

Array の filter、find、some、reduce メソッドの違いを区別し、使用シナリオに応じて日常のコーディングでそれらをより適切に適用します。

配列.検索

Array.findはオブジェクト（条件を満たす最初のオブジェクト）を返し、走査を停止します。

定数arrTest = [
    { id: 1、名前: "a" },
    { id: 2、名前: "b" },
    { id: 3、名前: "b" },
    { id: 4、名前: "c" }
]

// フィルター条件関数 getName(val) {
    arrTest => arrTest.name === val を返します
}

// 条件を満たす最初のデータを見つけたい場合は、`Array.find` を使用する必要があります
console.log(arrTest.find(getName("b")))
// { id: 2、名前: "b" }

配列.some

Array.some は、条件が満たされているかどうかを示すブール値を返します。

定数arrTest = [
    { id: 1、名前: "a"、ステータス: "読み込み中" }、
    { id: 2、名前: "b"、ステータス: "読み込み中" }、
    { id: 3、名前: "b"、ステータス: "成功" }
]

// フィルター条件関数 getStatus(val) {
    arrTest => arrTest.status === val を返します
}

// 配列内に特定のデータが存在するかどうかを確認する必要がある場合は、Array.some を使用して結果を直接取得します console.log(arrTest.some(getStatus("success")))
// 真実

配列.フィルター

Array.filter は配列全体を走査し、条件を満たすすべてのオブジェクトを含む配列を返します。

定数arrTest = [
    { id: 1、名前: "a"、ステータス: "読み込み中" }、
    { id: 2、名前: "b"、ステータス: "読み込み中" }、
    { id: 3、名前: "b"、ステータス: "成功" }
]

// フィルター条件関数 getStatus(val) {
    arrTest => arrTest.status === val を返します
}

 
// 配列内の条件を満たすすべてのデータをフィルタリングする必要がある場合は、Array.filter を使用する必要があります。
console.log(arrTest.filter(getStatus("ロード中")))
// [
// { id: 1、名前: "a"、ステータス: "ロード中" },
// { id: 2、名前: "b"、ステータス: "ロード中" }
// ]

配列.reduce

Array.reduce は配列を結合するメソッドであり、合計、乗算、カウント、重複排除、多次元データから単次元データへの変換、属性の合計など、さまざまなシナリオで使用できます。
このセクションの例では、主に Array.reduce を実装して、データセットを条件付きでフィルタリングした後に新しい配列を返します。

定数arrTest = [
    { id: 1、ステータス: "読み込み中" },
    { id: 2、ステータス: "読み込み中" }、
    { id: 3、ステータス: "成功" }
]

コンソール.log(
    arrTest.reduce((acc, 文字) => {
        戻り値: character.status === "loading"
            ? acc.concat(
                  オブジェクト.assign({}, 文字, { 色: "info" })
              ）
            : acc
    }, [])
）
// [
// { id: 1、ステータス: "読み込み中"、色: "情報" },
// { id: 2、ステータス: "読み込み中"、色: "情報" }
// ]

Array.filter によって返される配列とは異なり、filter は元の配列内の条件を満たすオブジェクトのセットを返します。filter と Array.map を組み合わせても上記の結果を実現できます。reduce を使用する方がよいのはなぜでしょうか?

// Array.map と Array.filter を組み合わせた console.log(
    arrテスト
        .filter(character => character.status === "読み込み中")
        .map(文字 =>
            オブジェクト.assign({}, 文字, { 色: "info" })
        ）
）
// [
// { id: 1、ステータス: "読み込み中"、色: "情報" },
// { id: 2、ステータス: "読み込み中"、色: "情報" }
// ]

結論: Array.filter と Array.map を同時に使用すると、配列全体が 2 回ループされます。 1 回目はフィルタリングして新しい配列を返すこと、2 回目はマップを通じて新しい配列を構築することです。 2 つの配列メソッドが使用され、それぞれに独自のコールバック関数があり、フィルターによって返される配列は再度使用されることはありません。
Array.reduce を使用すると、同じ結果が得られますが、よりエレガントなコードになります。

js 配列の find、some、filter、reduce の違いについて詳しく説明したのはこれで終わりです。js 配列の find、some、filter、reduce に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: