map

2023 7/19

2022.11.18 2023.07.19

記事の内容

map

mapメソッドは、Arrayオブジェクト内の要素を加工して新しい配列を生成するメソッドになります。

記法

新しい配列 = 配列.map ( function ( value, index, array) {
　　return 新しい配列に追加したい値;
}, this);

value : 配列の値が1つずつ渡される
index : 配列のキーが1つずつ渡される
array : 配列が渡される
this : コールバック関数内のthisの参照オブジェクト

例

let ary = [2, 4, 6, 8];
    
const newAry = ary.map(function(value, index, array) { 
    console.log("value : " + value);
    console.log("index : " + index);
    console.log("array : " + array);
    console.log("============================= ");
    return value * 2;
});

console.log("newAry : " + newAry);

出力結果

value : 2
index : 0
array : 2,4,6,8
=============================
value : 4
index : 1
array : 2,4,6,8
=============================
value : 6
index : 2
array : 2,4,6,8
=============================
value : 8
index : 3
array : 2,4,6,8
=============================
newAry : 4,8,12,16

アロー関数

記法

新しい配列 = 配列.map((value, index, array) => 処理 )

例

let ary = [2, 4, 6, 8];

const newAry = ary.map((value) => value * 2);
// 変数名の指定は特になし
const newAry2 = ary.map((num, i) => num * i);

console.log("newAry : " + newAry);
console.log("newAry2 : " + newAry2);

出力結果

newAry : 4,8,12,16
newAry2 : 0,4,12,24

コールバック関数

記法

コールバック関数
新しい配列 = 配列.map(callbackFn)

例

let ary = [2, 4, 6, 8];

// コールバック関数
function callbackFn(value){
    return value * 2;
}

const newAry = ary.map(callbackFn);

console.log("newAry : " + newAry);

出力結果

newAry : 4,8,12,16

コールバック関数(thisあり)

記法

コールバック関数
新しい配列 = 配列.map(callbackFn, this)

例

let ary = [2, 4, 6, 8];

// コールバック関数
function callbackFn(value){
    return value * 2 * this;
}

const newAry = ary.map(callbackFn, 10);

console.log("newAry : " + newAry);

出力結果

newAry : 40,80,120,160