JavaScript による配列の分割 | プログラミングチュートリアル

はじめに

この実験では、JavaScriptを使って与えられた値に基づいて配列を分割する方法を探ります。この実験では、与えられたフィルタに基づいて、Array.prototype.reduce() メソッドと Array.prototype.push() メソッドを使って要素を2つのグループに追加する方法を示します。この実験が終了するまでに、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/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28171{{"値に基づいた配列の分割"}} javascript/data_types -.-> lab-28171{{"値に基づいた配列の分割"}} javascript/arith_ops -.-> lab-28171{{"値に基づいた配列の分割"}} javascript/comp_ops -.-> lab-28171{{"値に基づいた配列の分割"}} javascript/array_methods -.-> lab-28171{{"値に基づいた配列の分割"}} javascript/higher_funcs -.-> lab-28171{{"値に基づいた配列の分割"}} end

配列を2つのグループに分割する関数

この関数を使って値に基づいて配列を2つのグループに分割するには、次の手順に従います。

ターミナル/SSHを開き、コーディングの練習を始めるために node と入力します。
与えられた filter 配列の結果に基づいて値を2つのグループに分割する bifurcate() 関数を使います。
関数を実装するには、filter 配列に基づいてグループに要素を追加するために Array.prototype.reduce() と Array.prototype.push() を使います。
filter がどの要素に対しても真値を持つ場合は、それを最初のグループに追加します。それ以外の場合は、2番目のグループに追加します。

以下は bifurcate() 関数のコードです。

const bifurcate = (arr, filter) =>
  arr.reduce(
    (acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc),
    [[], []]
  );

値の配列と対応するフィルタ配列を使って bifurcate() 関数を呼び出すことで、値を2つのグループに分割できます。たとえば：

bifurcate(["beep", "boop", "foo", "bar"], [true, true, false, true]);
// [ ['beep', 'boop', 'bar'], ['foo'] ]

まとめ

おめでとうございます！値に基づいた配列の分割の実験を完了しました。スキルを向上させるために、LabExでさらに多くの実験を行って練習できます。