JavaScript map・filterとは？配列操作を初心者向けに解説【第8講】

■ 今回のゴール

前回は配列の基本操作（追加・削除・検索）を学びました。

※まだの方は先にこちらをご覧ください。

今回は「配列の加工」を学びます。

配列から新しい配列を作ったり、条件に合うデータを取り出せるようになることがゴールです。

配列の加工とは、配列の中身をもとに新しい配列を作ったり、条件に応じてデータを変換・抽出することです。

実務でも非常によく使う重要な考え方です。JavaScriptでは配列を操作するためのメソッドが用意されています。この後それらのメソッドを解説していきます。

ここから少し新しい書き方が出てきます。先に進む前に少し補足的な説明をしておきます。

JavaScriptでは、関数を値として扱うことができます。

function hello() {
  console.log("こんにちは");
}

hello();

このように関数は呼び出すことができますが、関数そのものを他の処理に渡すこともできます。

配列のメソッドでは、この「関数を渡す」仕組みを使います。

※このように関数を引数として渡すことを「コールバック関数」と呼びます。

配列のすべての要素に対して順番に処理を行うにはforEachを使います。

let numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num);
});

function(num) { … } のように、その場で定義された関数を使うことができます。

これを「無名関数」と呼びます。

※forEachは新しい配列を作りません。処理を実行するだけのメソッドです。

配列の各要素を変換して、新しい配列を作るにはmapを使います。

let numbers = [1, 2, 3];

let result = numbers.map(function(num) {
  return num * 2;
});

console.log(result);

結果：

[2, 4, 6]

mapは「すべての要素を別の形に変換したいとき」に使います。

条件に合う要素だけを取り出すにはfilterを使います。

let numbers = [1, 2, 3, 4, 5];

let result = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(result);

結果：

[2, 4]

filterは「条件に合うデータだけを抽出したいとき」に使います。

条件に合う最初の1つだけを取得するにはfindを使います。

let numbers = [1, 3, 5, 8, 10];

let result = numbers.find(function(num) {
  return num % 2 === 0;
});

console.log(result);

結果：

findは「条件に合う最初の1件だけ欲しいとき」に使います。

次の配列から偶数だけを取り出してください。

let numbers = [1, 2, 3, 4, 5, 6];

ヒント：filterを使います。

次はWebページを操作する「DOM操作」を学びます。