MENU
  1. ホーム
  2. JavaScript
  3. Javascript応用
  4. 【JavaScript】Arrayクラスのmap()メソッドについて

【JavaScript】Arrayクラスのmap()メソッドについて

Javascript応用

JavaScriptのmap()メソッドは、配列の各要素に対して指定された関数を適用し、その結果から新しい配列を作成するための強力なメソッドです。このメソッドを使用すると、元の配列を変更せずに新しい配列を生成できます。本記事では、map()メソッドの基本的な使い方から応用例まで詳しく解説します。

目次

Arrayクラスのmap()メソッドの基本構文

map()メソッドの基本的な構文は以下の通りです：

array.map(callback(currentValue, index, array), thisArg);
  • callback: 各要素に対して実行される関数。以下の引数を受け取ります：
    • currentValue: 現在処理されている要素。
    • index (オプション): 現在処理されている要素のインデックス。
    • array (オプション): map()メソッドが呼び出された配列。
  • thisArg (オプション): callbackが参照するthisの値。

map()メソッドは、新しい配列を返します。新しい配列の各要素は、callback関数の戻り値に対応します。

Arrayクラスのmap()メソッドの基本的な使い方

各要素に対して関数を適用する

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

const newArray = array.map(element => element * 2);

console.log(newArray); // 出力: [2, 4, 6, 8, 10]

この例では、配列の各要素に対して2を掛けた結果を含む新しい配列を作成しています。

インデックスを使用する

map()メソッドのコールバック関数には、第2引数として要素のインデックスを取ることができます。

const array = ['a', 'b', 'c'];

const newArray = array.map((element, index) => `${index}: ${element}`);

console.log(newArray); // 出力: ['0: a', '1: b', '2: c']

この例では、各要素にそのインデックスを付けた文字列を生成しています。

オリジナル配列の参照

map()メソッドのコールバック関数には、第3引数としてオリジナルの配列を取ることができます。

const array = [1, 2, 3];

const newArray = array.map((element, index, arr) => element + arr.length);

console.log(newArray); // 出力: [4, 5, 6]

この例では、各要素に配列の長さを足した新しい配列を生成しています。

Arrayクラスのmap()メソッドの応用例

オブジェクトの配列を別の形式に変換する

map()メソッドは、オブジェクトの配列を別の形式に変換するのにも便利です。

const users = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Jane', lastName: 'Smith' }
];

const userNames = users.map(user => `${user.firstName} ${user.lastName}`);

console.log(userNames); // 出力: ['John Doe', 'Jane Smith']

この例では、ユーザーオブジェクトの配列をフルネームの配列に変換しています。

深い配列の操作

多次元配列に対して操作を行うこともできます。

const array = [[1, 2], [3, 4], [5, 6]];

const newArray = array.map(subArray => subArray.map(element => element * 2));

console.log(newArray); // 出力: [[2, 4], [6, 8], [10, 12]]

この例では、2次元配列の各要素に対して操作を行い、新しい2次元配列を生成しています。

Arrayクラスのmap()メソッドの注意点

  • map()メソッドは、元の配列を変更せず、新しい配列を返します。
  • callback関数が配列の各要素に対して実行されるため、パフォーマンスに影響を与える可能性があります。大規模な配列に対しては注意が必要です。
  • map()メソッドは、配列の空の要素に対してはcallback関数を実行しません。

まとめ

map()メソッドは、配列の各要素に対して指定された関数を適用し、新しい配列を生成するための強力なツールです。この記事を参考にして、map()メソッドを効果的に活用してください。

Javascript応用
目次