JavaScript における連続要素のマッピングのマスター

はじめに

この実験では、JavaScript の mapConsecutive 関数を調べます。この関数を使うと、与えられた関数を使って配列の連続する要素をマッピングできます。この関数を使って配列を簡潔かつ効率的に操作する方法を学びます。

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-28479{{"連続する要素をマッピングする"}} javascript/data_types -.-> lab-28479{{"連続する要素をマッピングする"}} javascript/arith_ops -.-> lab-28479{{"連続する要素をマッピングする"}} javascript/comp_ops -.-> lab-28479{{"連続する要素をマッピングする"}} javascript/higher_funcs -.-> lab-28479{{"連続する要素をマッピングする"}} end

配列の連続する要素をマッピングする関数

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

この関数は、与えられた関数 fn を使って、配列の n 個の連続する要素の各ブロックをマッピングします。次の手順に従ってください。

Array.prototype.slice() を使って、最初の n 個の要素を削除した新しい配列 arr を取得します。
Array.prototype.map() と Array.prototype.slice() を使って、arr の n 個の連続する要素の各ブロックに fn を適用します。

コードは次のとおりです。

const mapConsecutive = (arr, n, fn) =>
  arr.slice(n - 1).map((v, i) => fn(arr.slice(i, i + n)));

たとえば、mapConsecutive() を使って、数値の配列の 3 個の連続する要素の各ブロックをマッピングし、ハイフンで連結することができます。

mapConsecutive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3, (x) => x.join("-"));
// ['1-2-3', '2-3-4', '3-4-5', '4-5-6', '5-6-7', '6-7-8', '7-8-9', '8-9-10'];

まとめ

おめでとうございます！「連続する要素をマッピングする」実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。