A370 mapメソッド

エアケント教育コンテンツ > 初級(フロントエンド) > JavaScriptの配列 > A370 mapメソッド

mapメソッドは配列データに使うメソッドであり、各要素1つずつに対して「コールバック関数」を実行し、その結果を新しい配列として返すことが出来るようになっています。今回はこのmapメソッドについて紹介します。

mapメソッドとは

mapメソッドの基本的な使い方

mapメソッドは配列に対して用い、各要素一つずつを変数として呼び出し処理を行うことができます。返り値としては処理を行なった要素を保持した新しい配列を返します。

JavaScript
let numbers = [1, 2, 3, 4];
let map = numbers.map(x => x * 2);
console.log(map);

出力結果

JavaScript
[2, 4, 6, 8]

numbers配列の要素の一つずつ変数xとして取り出し、一つ一つに2を乗算する処理を行なっております。

mapメソッドの使い方の応用

mapメソッドの第二引数に任意の「オブジェクト」を指定することもできます。指定の配列とオブジェクトを組み合わせることにより、柔軟なプログラムを組むことができるようになります。

JavaScript
var programList = {
  'JavaScript': 1,
  'Java': 2,
  'PHP': 3,
  'Python': 4
};
 
var choice = ['JavaScript', 'Python'];
 
var result = choice.map(function(value, index, array) {
     return this[value]; 
}, programList);
 
console.log(result);

出力結果

JavaScript
[ 1, 4 ]

その他配列操作で頻出するメソッド

popメソッド

popメソッドは、配列から最後の要素を取り除き、その要素を返します。

JavaScript
let numbers = [1, 2, 3, 4];
let numbers = numbers.pop();
console.log(numbers);

出力結果

JavaScript
[1, 2, 3]

pushメソッド

pushメソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。

JavaScript
let numbers = [1, 2, 3, 4];
let count = numbers.push(5);
console.log(count);
console.log(numbers);

出力結果

JavaScript
5
[1, 2, 3, 4, 5]

shiftメソッド

shiftメソッドは、配列から最初の要素を取り除き、その要素を返します。

JavaScript
let numbers = [1, 2, 3, 4];
let numbers = numbers.shift();
console.log(numbers);

出力結果

JavaScript
[2, 3, 4]

unshiftメソッド

unshift() メソッドは、配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返します。

JavaScript
let numbers = [1, 2, 3, 4];
let count = numbers.unshift(0);
console.log(count);
console.log(numbers);

出力結果

JavaScript
5
[0, 1, 2, 3, 4]

例題

以下コードの出力値はどれか

JavaScript
let numbers = [1, 2, 3];
let map = numbers.map(x => x * 1);
console.log(map);
  1. [1, 2, 3]
  2. [2, 4, 6]
  3. [2, 3, 4]
  4. [1, 1, 2, 3]
回答

1. [1, 2, 3]
mapメソッドを用い、各要素に1を乗算したものを配列として返すため。

以下コードの出力値はどれか

JavaScript
let numbers = [1, 2, 3, 4];
let number = numbers.push(0);
console.log(number)
  1. [1, 2, 3, 4, 0]
  2. [0, 1, 2, 3, 4]
  3. 3
  4. 5
回答

1. [1, 2, 3]
pushメソッドは配列の末尾に要素を追加し、配列の要素数を返すため。

エンジニアからのアドバイス

mapは新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに forEach文や for-of文を用いることをお勧めします。

---