forEach【反復要素処理】
[@@iterator]【イテレータオブジェクト作成】
entries【イテレータオブジェクト作成】
keys【キー要素イテレータ作成】
values【値要素イテレータ作成】
groupBy【グループ分け】

Map.prototype.forEach【反復要素処理】

メモ

概要

  • 反復要素処理

関連

外部リンク

構文

map.forEach( callbackfn [ , thisArg ] )

callbackfn反復要素処理を行うコールバック関数 (詳細は下記参照)
thisArgコールバック関数内でthis で参照されるオブジェクト

TypeError callbackfnが呼び出し不可
callbackfn (反復要素処理コールバック関数) 引数名 (例)説明
value要素の値
key要素のキー
mapObj対象 Map オブジェクト

例

const map = new Map([
  [0, null],
  [1, 'ONE'],
  ['two', 2],
  ['abc', 'ABC'],
]);
console.log(map)
// 出力：Map(4) {0 => null, 1 => 'ONE', 'two' => 2, 'abc' => 'ABC'}


function forEachFunc1(value, key, mapObj) {
  console.log('[' + key + ']：' + value);
}
map.forEach(forEachFunc1);
// 出力：
// [0]：null
// [1]：ONE
// [two]：2
// [abc]：ABC


function forEachFunc2(value, key, mapObj) {
  console.log('[' + key + ']：' + value);
  if (typeof value === 'string') {
    this.push(value);
  }
}

const array = new Array();
map.forEach(forEachFunc2, array);
// 出力：
// [0]：null
// [1]：ONE
// [two]：2
// [abc]：ABC
console.log(array);
// 出力：(2) ['ONE', 'ABC']

map.forEach(null);
// 例外：TypeError

Map.prototype[@@iterator]【イテレータオブジェクト作成】

メモ

概要

  • キーと値から成るイテレータオブジェクト作成

関連

外部リンク

構文

map[@@iterator]( )

 キーと値から成るイテレータオブジェクト (for-of または next() で繰り返し)

for (const item of map) {
処理
}

例

const map = new Map([
  [0, null],
  [1, 'ONE'],
  ['two', 2],
  ['abc', 'ABC'],
]);
console.log(map)
// 出力：Map(4) {0 => null, 1 => 'ONE', 'two' => 2, 'abc' => 'ABC'}
console.log('map.size =', map.size);
// 出力：map.size = 4


// イテレータオブジェクト作成
const mapIter1 = map[Symbol.iterator]();
// for-of で取得
for (let item of mapIter1) {
  console.log(item);
}
// 出力：
// (2) [0, null]
// (2) [1, 'ONE']
// (2) ['two', 2]
// (2) ['abc', 'ABC']


// イテレータオブジェクト作成
const mapIter2 = map[Symbol.iterator]();
// next().value で取得
for (let i = 0; i < map.size; i++) {
  console.log(mapIter2.next().value);
}
// 出力：
// (2) [0, null]
// (2) [1, 'ONE']
// (2) ['two', 2]
// (2) ['abc', 'ABC']


// for-of で取得
for (const item of map) {
  console.log(item);
}
// 出力：
// (2) [0, null]
// (2) [1, 'ONE']
// (2) ['two', 2]
// (2) ['abc', 'ABC']

Map.prototype.entries【イテレータオブジェクト作成】

メモ

概要

  • キーと値から成るイテレータオブジェクト作成
    • for-of または next() で繰り返し

関連

外部リンク

構文

map.entries( )

キーと値から成るイテレータオブジェクト

例

const map = new Map([
  [0, null],
  [1, 'ONE'],
  ['two', 2],
  ['abc', 'ABC'],
]);
console.log(map)
// 出力：Map(4) {0 => null, 1 => 'ONE', 'two' => 2, 'abc' => 'ABC'}


// イテレータオブジェクト作成
const mapIter1 = map.entries();
// for-of で取得
for (let item of mapIter1) {
  console.log(item);
}
// 出力：
// (2) [0, null]
// (2) [1, 'ONE']
// (2) ['two', 2]
// (2) ['abc', 'ABC']


// イテレータオブジェクト作成
const mapIter2 = map.entries();
// next().value で取得
for (let i = 0; i < map.size; i++) {
  console.log(mapIter2.next().value);
}
// 出力：
// (2) [0, null]
// (2) [1, 'ONE']
// (2) ['two', 2]
// (2) ['abc', 'ABC']


// for-of 分割代入 で取得
for (let [key, value] of map.entries()) {
  console.log('[' + key + ']：' + value);
}
// 出力：
// [0]：null
// [1]：ONE
// [two]：2
// [abc]：ABC

Map.prototype.keys【キー要素イテレータ作成】

メモ

概要

  • キー要素イテレータ作成
    • for-of または next() で繰り返し

関連

外部リンク

構文

map.keys( )

キー要素のイテレータ

例

const map = new Map([
  [0, null],
  [1, 'ONE'],
  ['two', 2],
  ['abc', 'ABC'],
]);
console.log(map)
// 出力：Map(4) {0 => null, 1 => 'ONE', 'two' => 2, 'abc' => 'ABC'}


// キー要素イテレータ作成
const keys1 = map.keys();
// for-of で取得
for (let key of keys1) {
  console.log(key);
}
// 出力：
// 0
// 1
// two
// abc


// キー要素イテレータ作成
const keys2 = map.keys();
// next().value で取得
for (let i = 0; i < map.size; i++) {
  console.log(keys2.next().value);
}
// 出力：
// 0
// 1
// two
// abc

Map.prototype.values【値要素イテレータ作成】

メモ

概要

  • 値要素イテレータ作成
    • for-of または next() で繰り返し

関連

外部リンク

構文

map.values( )

値要素のイテレータ

例

const map = new Map([
  [0, null],
  [1, 'ONE'],
  ['two', 2],
  ['abc', 'ABC'],
]);
console.log(map)
// 出力：Map(4) {0 => null, 1 => 'ONE', 'two' => 2, 'abc' => 'ABC'}


// 値要素イテレータ作成
const values1 = map.values();
// for-of で取得
for (let value of values1) {
  console.log(value);
}
// 出力：
// null
// ONE
// 2
// ABC


// 値要素イテレータ作成
const values2 = map.values();
// next().value で取得
for (let i = 0; i < map.size; i++) {
  console.log(values2.next().value);
}
// 出力：
// null
// ONE
// 2
// ABC

Map.groupBy【グループ分け】

メモ

概要

関連

外部リンク

  • ECMA-262 (英語)
    Map.groupBy ( items, callbackfn )
    ES2024 (15) ES2023 (14) ES2022 (13)

構文

Map.groupBy( items, callbackfn ) 

グループ分けした新規 Map【マップ】
各グループはグループ識別キー(callbackfnの戻り値) で参照
各要素は元要素の参照
itemsイテラブル オブジェクト
callbackfnグループ分けコールバック関数 (詳細は下記参照)

TypeError 
callbackfnが呼出し不可
要素数が 253 以上
callbackfn (グループ分けコールバック関数) 引数名 (例)備考
element処理要素
index処理要素のインデックス
戻り値型備考
キーとして有効な
Object【オブジェクト】
プリミティブ値 		グループ識別キー

例 (1/3)：基本 (グループ識別キー：配列)

const items = [
  { id: 1001, type: 'A', point: 100 },
  { id: 1002, type: 'B', point: 70 },
  { id: 1003, type: 'C', point: 40 },
  { id: 1004, type: 'B', point: 90 },
  { id: 1005, type: 'C', point: 60 },
  { id: 1006, type: 'A', point: 30 },
  { id: 1007, type: 'C', point: 80 },
  { id: 1008, type: 'A', point: 50 },
  { id: 1009, type: 'B', point: 20 },
];


// point でグループ分け
const KEY_HIGH = [80, 100];
const KEY_MIDDLE = [50, 79];
const KEY_LOW = [0, 49];
function callbackPoint(element, index) {
  let group;
  if (80 <= element.point) {
    group = KEY_HIGH;
  } else if (50 <= element.point) {
    group = KEY_MIDDLE;
  } else {
    group = KEY_LOW;
  }
console.log('callbackPoint()：', element, index, group);
  return group;
}


const resultPoint = Map.groupBy(items, callbackPoint);
// 出力：
// callbackPoint()： {id: 1001, type: 'A', point: 100} 0 (2) [80, 100]
// callbackPoint()： {id: 1002, type: 'B', point: 70} 1 (2) [50, 79]
// callbackPoint()： {id: 1003, type: 'C', point: 40} 2 (2) [0, 49]
// callbackPoint()： {id: 1004, type: 'B', point: 90} 3 (2) [80, 100]
// callbackPoint()： {id: 1005, type: 'C', point: 60} 4 (2) [50, 79]
// callbackPoint()： {id: 1006, type: 'A', point: 30} 5 (2) [0, 49]
// callbackPoint()： {id: 1007, type: 'C', point: 80} 6 (2) [80, 100]
// callbackPoint()： {id: 1008, type: 'A', point: 50} 7 (2) [50, 79]
// callbackPoint()： {id: 1009, type: 'B', point: 20} 8 (2) [0, 49]

// 元要素変更
items[0]['id'] = 9999;

console.log(resultPoint);
// 出力：
// Map(3) {Array(2) => Array(3), Array(2) => Array(3), Array(2) => Array(3)}
//   [[Entries]]
//     0: {Array(2) => Array(3)}
//     1: {Array(2) => Array(3)}
//     2: {Array(2) => Array(3)}
//   size: 3
//   [[Prototype]]: Map

console.log(resultPoint.get(KEY_HIGH));
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 9999, type: 'A', point: 100}
//   1: {id: 1004, type: 'B', point: 90}
//   2: {id: 1007, type: 'C', point: 80}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultPoint.get(KEY_MIDDLE));
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1002, type: 'B', point: 70}
//   1: {id: 1005, type: 'C', point: 60}
//   2: {id: 1008, type: 'A', point: 50}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultPoint.get(KEY_LOW));
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1003, type: 'C', point: 40}
//   1: {id: 1006, type: 'A', point: 30}
//   2: {id: 1009, type: 'B', point: 20}
//   length: 3
//   [[Prototype]]: Array(0)

例 (2/3)：分割代入 使用 (グループ識別キー：Object)

const items = [
  { id: 1001, type: 'A', point: 100 },
  { id: 1002, type: 'B', point: 70 },
  { id: 1003, type: 'C', point: 40 },
  { id: 1004, type: 'B', point: 90 },
  { id: 1005, type: 'C', point: 60 },
  { id: 1006, type: 'A', point: 30 },
  { id: 1007, type: 'C', point: 80 },
  { id: 1008, type: 'A', point: 50 },
  { id: 1009, type: 'B', point: 20 },
];


// type・point でグループ分け (グループ識別キー：Object / 分割代入使用)
const objTop = { top: true };
const objEtc = { top: false };
function callbackTypePoint({type, point} /* {分割代入}, index 未使用 */) {
  let group;
  if ((type === 'A') && (80 < point)) {
    group = objTop;
  } else {
    group = objEtc;
  }
  return group;
}


const resultTypePoint = Map.groupBy(items, callbackTypePoint);
console.log(resultTypePoint);
// 出力：
// Map(2) {{…} => Array(1), {…} => Array(8)}
//   [[Entries]]
//     0: {Object => Array(1)}
//       key: {top: true}
//       value: Array(1)
//         0: {id: 1001, type: 'A', point: 100}
//         length: 1
//         [[Prototype]]: Array(0)
//     1: {Object => Array(8)}
//      (展開省略)
//   size: 2
//   [[Prototype]]: Map

console.log(resultTypePoint.get(objTop));
// 出力：
// [{…}]
//   0: {id: 1001, type: 'A', point: 100}
//   length: 1
//   [[Prototype]]: Array(0)

例 (3/3)：分割代入・アロー関数 使用 (グループ識別キー：文字列)

const items = [
  { id: 1001, type: 'A', point: 100 },
  { id: 1002, type: 'B', point: 70 },
  { id: 1003, type: 'C', point: 40 },
  { id: 1004, type: 'B', point: 90 },
  { id: 1005, type: 'C', point: 60 },
  { id: 1006, type: 'A', point: 30 },
  { id: 1007, type: 'C', point: 80 },
  { id: 1008, type: 'A', point: 50 },
  { id: 1009, type: 'B', point: 20 },
];

// type でグループ分け (グループ識別キー：文字列 / 分割代入・アロー関数 使用)
const resultType = Map.groupBy(items, ({ type } /* {分割代入}, index 未使用 */) => type);
console.log(resultType);
// 出力：
// Map(3) {'A' => Array(3), 'B' => Array(3), 'C' => Array(3)}
//   [[Entries]]
//     0: {"A" => Array(3)}
//     1: {"B" => Array(3)}
//     2: {"C" => Array(3)}
//   size: 3
//   [[Prototype]]: Map

console.log(resultType.get('A'));
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1001, type: 'A', point: 100}
//   1: {id: 1006, type: 'A', point: 30}
//   2: {id: 1008, type: 'A', point: 50}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultType.get('B'));
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1002, type: 'B', point: 70}
//   1: {id: 1004, type: 'B', point: 90}
//   2: {id: 1009, type: 'B', point: 20}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultType.get('C'));
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1003, type: 'C', point: 40}
//   1: {id: 1005, type: 'C', point: 60}
//   2: {id: 1007, type: 'C', point: 80}
//   length: 3
//   [[Prototype]]: Array(0)