JavaScript 配列操作 | Pullby 関数

はじめに

この実験では、JavaScript の pullBy() 関数を調べます。この関数を使うと、与えられた反復子関数に基づいて配列から特定の値をフィルタリングできます。この実験が終わるとき、あなたは pullBy() を使って配列を操作し、不要な値を効果的にフィルタリングする方法を理解しているでしょう。

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/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/data_types -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/arith_ops -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/comp_ops -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/array_methods -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/obj_manip -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/higher_funcs -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/destr_assign -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} javascript/spread_rest -.-> lab-28562{{"関数に基づいて配列から値を抽出する"}} end

与えられた関数に基づいて配列から値を抽出する方法

コーディングの練習を始めるには、ターミナル/SSH を開き、node と入力します。

pullBy 関数は、与えられた反復子関数に基づいて指定された値をフィルタリングすることで元の配列を変更します。以下がその動作方法です。

最後に提供された引数が関数であるかどうかを確認します。
Array.prototype.map() を使って反復子関数 fn をすべての配列要素に適用します。
Array.prototype.filter() と Array.prototype.includes() を使って不要な値を抽出します。
Array.prototype.length を設定して、渡された配列の長さを 0 にリセットします。
Array.prototype.push() を使って、抽出された値のみで再作成します。

以下がコードです。

const pullBy = (arr, ...args) => {
  const length = args.length;
  let fn = length > 1 ? args[length - 1] : undefined;
  fn = typeof fn == "function" ? (args.pop(), fn) : undefined;
  let argState = (Array.isArray(args[0]) ? args[0] : args).map((val) =>
    fn(val)
  );
  let pulled = arr.filter((v, i) => !argState.includes(fn(v)));
  arr.length = 0;
  pulled.forEach((v) => arr.push(v));
};

そして、それを使う方法の例です。

var myArray = [{ x: 1 }, { x: 2 }, { x: 3 }, { x: 1 }];
pullBy(myArray, [{ x: 1 }, { x: 3 }], (o) => o.x); // myArray = [{ x: 2 }]

この例では、x プロパティが 1 または 3 であるすべての要素を抽出しています。結果の myArray には、x プロパティが 2 である要素のみが含まれます。

まとめ

おめでとうございます！関数に基づいて配列から値を抽出する実験を完了しました。スキルを向上させるために、LabExでさらに実験を行って練習してください。