JavaScript の基礎 | 条件が満たされるまでの配列要素の削除

はじめに

この実験では、JavaScript の takeRightUntil 関数を調べます。この関数は、指定された条件が満たされるまで配列の末尾から要素を削除し、削除された要素を返します。この関数がどのように機能するか、およびコードでどのように実装できるかを調べます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic 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/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28640{{"JavaScript の takeRightUntil 関数を探る"}} javascript/data_types -.-> lab-28640{{"JavaScript の takeRightUntil 関数を探る"}} javascript/arith_ops -.-> lab-28640{{"JavaScript の takeRightUntil 関数を探る"}} javascript/comp_ops -.-> lab-28640{{"JavaScript の takeRightUntil 関数を探る"}} javascript/cond_stmts -.-> lab-28640{{"JavaScript の takeRightUntil 関数を探る"}} javascript/loops -.-> lab-28640{{"JavaScript の takeRightUntil 関数を探る"}} javascript/spread_rest -.-> lab-28640{{"JavaScript の takeRightUntil 関数を探る"}} end

条件が満たされるまで配列の末尾から要素を削除する

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

この関数は、渡された関数が true を返すまで配列の末尾から要素を削除し、その後削除された要素を返します。

その動作方法は以下の通りです。

まず、スプレッド演算子 (...) と Array.prototype.reverse() を使って配列の逆順コピーを作成します。
次に、Array.prototype.entries() を使った for...of ループを使って逆順コピーをループ処理し、関数から返される値が真であるまで続けます。
その後、Array.prototype.slice() を使って削除された要素を返します。
コールバック関数 fn は、要素の値を 1 つの引数として受け取ります。

コードは以下の通りです。

const takeRightUntil = (arr, fn) => {
  for (const [i, val] of [...arr].reverse().entries())
    if (fn(val)) return i === 0 ? [] : arr.slice(-i);
  return arr;
};

この関数の使い方の例は以下の通りです。

takeRightUntil([1, 2, 3, 4], (n) => n < 3); // [3, 4]

まとめ

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