ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index, array) => {
  console.log(`${array}のindex${index}: ${fruit}`);
});

//出力：
//apple,banana,orangeのindex0: apple 
//apple,banana,orangeのindex1: banana 
//apple,banana,orangeのindex2: orange 

array.filter()

array.filter()メソッドは、元の配列から条件を満たす要素だけを抽出して新しい配列を生成します。
filter()メソッドは元の配列の各要素を順番にコールバック関数に渡し、その関数がtrueを返す要素だけが新しい配列に含まれます。

参考：Array.prototype.filter() - JavaScript | MDN

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

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); 

//出力： [2, 4, 6]

array.reduce()

array.reduce()メソッドは、配列の各要素を順番にコールバック関数に渡し、要素を集約していきます。
コールバック関数の戻り値が次のaccumulatorになり、最終的な集約結果が返されます。
reduce()メソッドの場合、第2引数は現在の要素となり、配列要素のインデックスは第3引数以降にズレます。

参考：Array.prototype.reduce() - JavaScript | MDN

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

const sum = numbers.reduce((accumulator, currentValue, index) => {
  console.log(`accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}`);
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

//出力：
//accumulator: 0, currentValue: 1, index: 0 
//accumulator: 1, currentValue: 2, index: 1 
//accumulator: 3, currentValue: 3, index: 2 
//accumulator: 6, currentValue: 4, index: 3 
//accumulator: 10, currentValue: 5, index: 4 
//15

new Map

Mapはキーと値のペアを格納するためのデータ構造です。
このようなデータを連想配列といい、文字列など非負整数以外のデータを添字に使用することができる配列のことを言います。
JavaScriptでは、オブジェクトがこの連想配列っぽい構造で、しばし「連想配列=オブジェクト」と紹介されてますが、添字に文字列とシンボルしか設定ができなかったり、値としてデータだけではなく、 関数（処理）も入れることができるため、本来の連想配列とは違う特性を持つため、JavaScriptではオブジェクトと呼び、連想配列という言葉を使ってきませんでした。

Mapはオブジェクトとは異なり、キーとして異なる型の値やオブジェクトも使用できます。これにより、連想配列や辞書のような構造を簡単に作成することができるようになりました。
また、Mapはキーの重複を許さず、順序を保持することが特徴です。

参考：Map - JavaScript | MDN

インスタンスの作成

new Map()で新しいMapインスタンスを作成できます。

const myMap = new Map();

Mapオブジェクトの基本的な操作

キーと値の追加

set()メソッドを使用してキーと値のペアを追加できます。

myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap)

//出力：
//key1: "value1"
//key2: "value2"

キーを使用して値を取得

get()メソッドを使用して特定のキーに対応する値を取得できます。

const output = myMap.get("key1");
console.log(output);

//出力：
//value1

キーの存在を確認

has()メソッドを使用して指定したキーが存在するかを確認できます。

const exists = myMap.has('key1'); 

//出力：
// true

キーと値の削除

delete()メソッドを使用して特定のキーと値のペアを削除できます。

myMap.delete('key1');
console.log(myMap);

//出力：
// key2: "value2"

巻き上げは発生しますので、スコープに注意です。

サイズの取得

sizeプロパティを使用してMapのサイズ（要素の数）を取得できます。

const size = myMap.size;
console.log(size);

//delete()で削除しているため
//出力：1

for..ofを使用したMapのループ

for..ofを使用してMapの各キーと値のペアに対して処理を行えます。

const myMap = new Map();

myMap.set("key1", "value1");
myMap.set("key2", "value2");

for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}
// key1 = value1 
// key2 = value2 

for (const key of myMap.keys()) {
  console.log(key);
}
// key1
// key2

for (const value of myMap.values()) {
  console.log(value);
}
// value1 
// value2 

for (const [key, value] of myMap.entries()) {
  console.log(`${key} = ${value}`);
}
// key1 = value1 
// key2 = value2 

forEachで書くと

myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

for..of文とはkeyとvalueの順番が逆になるので要注意。
for..of文のほうがforEachと比べて、少し処理が早いのでfor..of文でOKです。

JavavaScriptでは、連想配列として利用する場合、Mapが良さそうです。

ES6（ES2015）が策定されてからすでに7年以上経っていますので、IE11以外のブラウザには実装済みです。

参考：ECMAScript 6 compatibility table

まとめ

array.map()は、配列の便利な処理をするためのメソッド、new Mapは、連想配列などキー（key）とそれに対応する値（value）を対応させて保持するオブジェクトのことでした。
今後、使いどころはたくさんありそうです。

オープンキャンパス実施中
Webデザイン学科

関連記事

• JavaScriptで要素を挿入する。 (2023/09/30)
• map()？new Map？ (2023/08/10)
• ポートフォリオサイトを印刷用CSSでプリントする。 (2022/03/05)
• @useの使い方がわからない…ので (2022/02/12)
• display:contentsを使ってみたい。 (2021/09/30)
• jQueryだっていいじゃない。 (2021/03/09)
• TypeScriptってなんだ?! (2021/03/01)
• CSSの単位 (2020/09/03)
• JavaScriptのclassについて、書いてみた。 (2019/12/30)
• picture要素と、source要素と、srcset属性と (2018/10/02)