イテラブルの分割 | JavaScript テクニック

はじめに

この実験では、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/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} javascript/data_types -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} javascript/arith_ops -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} javascript/comp_ops -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} javascript/cond_stmts -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} javascript/loops -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} javascript/obj_manip -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} javascript/spread_rest -.-> lab-28195{{"イテラブルを小さな配列に分割する"}} end

イテラブルをチャンク化する

イテラブルを指定されたサイズの小さな配列にチャンク化するには、次の手順に従います。

ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
与えられたイテラブルに対して for...of ループを使用し、Array.prototype.push() を使って各新しい値を現在の chunk に追加します。
Array.prototype.length を使って現在の chunk が望ましい サイズ になっているかどうかを確認し、その場合には値を yield します。
Array.prototype.length を使って最終的な chunk を確認し、空でない場合にはそれを yield します。
次のコードを使用します。

const chunkify = function* (itr, size) {
  let chunk = [];
  for (const v of itr) {
    chunk.push(v);
    if (chunk.length === size) {
      yield chunk;
      chunk = [];
    }
  }
  if (chunk.length) yield chunk;
};

このコードを使って関数をテストします。

const x = new Set([1, 2, 1, 3, 4, 1, 2, 5]);
[...chunkify(x, 2)]; // [[1, 2], [3, 4], [5]]

まとめ

おめでとうございます！イテラブルをチャンク化する実験を完了しました。技術を向上させるために、LabEx でさらに実験を行って練習してください。