1. 概要

　ある配列の値に何かを追加、変更、合算などを加えたいときがあるとおもいます、そのときに使えられるのがarray.mapです。

　array.mapは配列のすべての要素を読み取り繰り返しての処理ができます。

2. 例

2.1 数字の配列

数字の配列の値に10倍をしたい。

const array = [1, 2, 3, 4, 5];
const new_array = array.map(value => value * 10);

console.log(array);
console.log(new_array);

結果

[1, 2, 3, 4, 5]
[10, 20, 30, 40, 50]

2.2 文字列の値

文字列の値に<li></li>タグをつけたい。

const array = ['そば', 'うどん', '海鮮丼', '寿司', 'カレー'];
const new_array = array.map(value => `<li>${value}</li>`);

console.log(array);
console.log(new_array);

結果

[‘そば’, 'うどん', '海鮮丼', '寿司', 'カレー']
[‘<li>そば</li>’, '<li>うどん</li>', '<li>海鮮丼</li>', '<li>寿司</li>', '<li>カレー</li>']

2.4 配列のフォマートを変更

配列を読み取り新しいフォマートの配列を生成、例ではkeyの値を新しい配列のキー、valueのあたいを値にして新しい配列を生成する。

const array = [
  { key: 1, value: 'apple' },
  { key: 2, value: 'banana' },
  { key: 3, value: 'grape' },
  { key: 4, value: 'strawberry' }
];
const new_array = array.map(({ key, value }) => ({ [key]: value }));
console.log(array);
console.log(new_array);

結果

[Object { key: 1, value: "apple" }, Object { key: 2, value: "banana" }, Object { key: 3, value: "grape" }, Object { key: 4, value: "strawberry" }] 
[Object { 1: "apple" }, Object { 2: "banana" }, Object { 3: "grape" }, Object { 4: "strawberry" }]

2.4 要素値の計算、合計、税金等

配列の合計と税込み金額を算出。

const array = [128, 198, 498];
let total = 0;
const with_tax = array.map((price) => {
  total += Math.floor(price * 1.08);
  return Math.floor(price * 1.08);
})
console.log(total)
console.log(with_tax)

結果

888
[138, 213, 537]

3. おまけ

配列の要素を読み取って新しい配列を生成、コピーする。

const array = [1, 2, 3, 4];
const copied_array = array.map((x) => x);

console.log(array);
console.log(copied_array);

結果

[1, 2, 3, 4]
[1, 2, 3, 4]