array.map()とは? Javascript初心者の勉強

filter()、forEach()と調べたので、ついでにmap()についても調べてみました。

map()とは

map()を正しく書くとArray.prototype.map()となりArray(配列)に使われるメソッドです。map()を実行すると配列の要素に1つずつに対して処理を行います。

filter()、forEach()、map() との違い

同じような処理が行えるfilter()、forEach()、map()ですが、用途によって使い分けが必要です。
filter()は配列を条件によって絞り込む際に使用します。戻り値あり。
forEach()は単純に配列の中に同じ処理をする時に使用します。戻り値なし。
map()は配列の中身を違った形にする際に使用します。戻り値あり。

構文 Syntax

// 構文
array.map( 処理);

処理の書く際にはアロー関数を使用するのを多く見かけます。

const numbers = [ 10, 20, 30 ];
let result = numbers.map(myFunction);
function myFunction(num) {
    return num * 10;
}
console.log(result); // [ 100, 200, 300 ]

functionの引数について

処理の引数は以下のようになります。filter()やforEach()と同じです。

// 構文
array.forEach(function(currentValue, index, arr), thisValue)

少し複雑に感じますが、わかれば簡単に使いこなせそうです。

  • currentValue : arrayの中の各要素です。必須
  • index : 要素のindexです。オプション
  • arr : arrayのarrayオブジェクトです。オプション
  • thisValue : thisとして値を渡せます。空の場合、「undefined」がthisの値として渡されます。

currentValue, index, arr の中身を確認するサンプルコード

const numbers = [10, 11, 12];
numbers.forEach(myFunction);

function myFunction(item, index, arr) {
    console.log("item = " + item );
    console.log("index = " + index );
    console.log("arr = " + arr );
}

結果

item = 10
index = 0
arr = 10,11,12
item = 11
index = 1
arr = 10,11,12
item = 12
index = 2
arr = 10,11,12

thisValueの中身を確認するサンプルコード

const numbers = [10, 11, 12];
numbers.forEach(function(currentValue, index, arr) {
    console.log(this); // 123
}, 123);

thisの値が123となります。

サンプルコード

const persons = [
    { name : "Nakamoto", age: 50 },
    { name : "Kato", age: 28 },
    { name : "Sasaki", age: "42" }
];
function nameAge(item) {
    let nameAge = [item.name,item.age].join(" ");
    return nameAge;
}
console.log(persons.map(nameAge)); // [ "Nakamoto 50", "Kato 28", "Sasaki 42" ]

おわり

filter()、forEach()、map()の使い分けが少し難しく感じます。
使い方が分かると使いたくなるけれど、しばらく使うことがなさそうです。

参考

https://www.w3schools.com/jsref/jsref_map.asp
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Javascript

Posted by Nakamoto