11 回閲覧されました

みなさんこんにちは、jonioです。

今回はJavaScriptで配列操作をするmapメソッドとfilterメソッドが何かと簡単なサンプルコードで解説します。

mapメソッドとは

配列の各要素を加工して新しい配列を作るメソッドです。

サンプルコードで考えた方が理解しやすいのでサンプルコードで解説します。

サンプルコード

下記のコードで考えます。

const numbers = [1, 2, 3];

const result = numbers.map(n => n * 2);

console.log(result);

const numbers = [1, 2, 3];

const result = numbers.map(n => n * 2);

console.log(result);

3行目の「n =>」の「n」が配列の1つ1つの要素です。

「n * 2」で配列の要素を加工します。

5行目は「[2, 4, 6]」を出力します。

ちなみに元々の配列(1行目)には影響しないので非破壊的メソッドと言えます。

filterメソッド

配列の要素に対して条件に合う要素だけを取り出すメソッドです。

サンプルコードで考えた方が理解しやすいのでサンプルコードで解説します。

サンプルコード

下記のコードで考えます。

const numbers = [1, 2, 3, 4];

const result = numbers.filter(n => n % 2 === 0);

console.log(result);

const numbers = [1, 2, 3, 4];

const result = numbers.filter(n => n % 2 === 0);

console.log(result);

3行目の「n =>」の「n」が配列の1つ1つの要素です。

「n % 2 === 0」で条件に合う要素だけを取り出しています。

5行目は「[2, 4]」を出力します。

ちなみに元々の配列(1行目)には影響しないので非破壊的メソッドと言えます。