【javascript】map()メソッドの使い方、コールバック関数の指定やオブジェクトを処理する

投稿日 : 2022年07月05日更新日 :

map()メソッドとは？
map()内のコールバック関数の引数3つ
配列内の要素を2倍にする
map()の第二引数にオブジェクト
まとめ

map()メソッドとは？

map()とは、配列内の要素を一つずつ取り出し、指定の処理を加えて、配列を書き換えることができるメソッドのことです。

map()を使うことにより、配列内の要素をそれぞれ2倍にしたり、配列内の特定の要素を書き換えたりすることができます。

map()内のコールバック関数の引数3つ

配列. map(function(第一引数、第二引数、第二引数){
処理・・・
});

第一引数(value) : 配列の要素を一つずつ取り出します

第二引数(index) : 配列の順番（0, 1, 2, …）

第三引数(array) : 配列の内容

const array = ["あ", "い", "う", "え", "お",];

array.map(function(value, index, array){
  console.log(value);
  console.log(index);
  console.log(array);
})

結果

配列内の要素を2倍にする

3行目 : map()は、非破壊処理なので、新しく変数resultに代入する必要があります。

4行目 : 処理したものをreturnで返します。

7行目 : 元の配列は変化しません。

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

const result = numberArray.map(function(value){
  return value * 2
})

console.log(numberArray);
console.log(result);

結果

元の配列は変化せず、resultの配列内の要素がそれぞれ2倍になりました。

map()の第二引数にオブジェクト

配列のキーワードを使ってオブジェクト内の値を取得したいと思います。

1行目 : map()の第二引数に指定するオブジェクト

9行目 : map()処理をする配列。取得したい値のキーワード

12行目 : map()内のコールバック関数にthisをreturn した場合、なにが取得されるか確認します。

const fruitList = {
  "リンゴ": 150,
  "バナナ": 200,
  "オレンジ": 300,
  "マンゴー": 450,
};

//任意のキーワードを指定する
const order = ["リンゴ", "マンゴー"];

const result = order.map(function (value) { // 配列orderにmap()
  return this;
}, fruitList); // 第二引数にオブジェクト

console.log(result);

結果 thisの内容

orderの長さが2つなので、2回処理が繰り返され、オブジェクトの fruitListが取得されています。

キーワードの値を取得する

12行目 : ここだけ書き換えます。
return this[value];

const fruitList = {
"リンゴ": 150,
"バナナ": 200,
"オレンジ": 300,
"マンゴー": 450,
};

//任意のキーワードを指定する
const order = ["リンゴ", "マンゴー"];

const result = order.map(function (value) {
return this[value];
}, fruitList);

console.log(result);