一致する要素を削除する | JavaScript の配列操作

はじめに

この実験では、JavaScript を使って配列から一致する要素を削除する方法を探ります。与えられた条件に一致する要素を見つけるために Array.prototype.filter() メソッドを使い、元の配列からそれらを削除するために Array.prototype.reduce() メソッドを使います。この実験が終わるとき、JavaScript で配列を操作する方法をより深く理解しているでしょう。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28587{{"配列から一致する要素を削除する"}} javascript/data_types -.-> lab-28587{{"配列から一致する要素を削除する"}} javascript/arith_ops -.-> lab-28587{{"配列から一致する要素を削除する"}} javascript/comp_ops -.-> lab-28587{{"配列から一致する要素を削除する"}} javascript/higher_funcs -.-> lab-28587{{"配列から一致する要素を削除する"}} end

配列から一致する要素を削除する

与えられた条件に基づいて配列から特定の要素を削除するには、remove 関数を使うことができます。この関数は、与えられた関数が false を返す要素を削除することで元の配列を変更します。

remove 関数を使う手順は以下の通りです。

ターミナル/SSH を開き、コーディングを練習するために node と入力します。
Array.prototype.filter() を使って真値を返す配列要素を見つけます。
Array.prototype.reduce() を使って Array.prototype.splice() を使って要素を削除します。
コールバック関数は 3 つの引数（値、インデックス、配列）で呼び出されます。

const remove = (arr, func) =>
  Array.isArray(arr)
    ? arr.filter(func).reduce((acc, val) => {
        arr.splice(arr.indexOf(val), 1);
        return acc.concat(val);
      }, [])
    : [];

remove 関数を使う例を以下に示します。

remove([1, 2, 3, 4], (n) => n % 2 === 0); // [2, 4]

これは削除された要素を含む新しい配列を返します。

まとめ

おめでとうございます！配列から一致する要素を削除する実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を練習できます。