JavaScriptでのmap()メソッドの使用方法


メソッドは配列の各要素に対して指定した関数を実行し、その結果を新しい配列として返すための高階関数です。この記事では、map()メソッドの使い方といくつかのコード例を紹介します。

  1. 基本的な使用方法:

    const numbers = [1, 2, 3, 4, 5];
    const doubledNumbers = numbers.map((num) => {
    return num * 2;
    });
    console.log(doubledNumbers);
    // 出力: [2, 4, 6, 8, 10]
  2. インデックスの利用: map()メソッドのコールバック関数の第2引数として、現在の要素のインデックスを使用することができます。

const names = ["Alice", "Bob", "Charlie"];
const nameWithIndex = names.map((name, index) => {
  return `${name} のインデックスは ${index} です`;
});
console.log(nameWithIndex);
// 出力: ["Alice のインデックスは 0 です", "Bob のインデックスは 1 です", "Charlie のインデックスは 2 です"]
  1. オブジェクトの変換: map()メソッドを使用して、オブジェクトの特定のプロパティを抽出したり、新しいプロパティを追加したりすることもできます。
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];
const userNames = users.map((user) => {
  return user.name;
});
console.log(userNames);
// 出力: ["Alice", "Bob", "Charlie"]
const usersWithId = users.map((user, index) => {
  return { ...user, id: index + 1 };
});
console.log(usersWithId);
/* 出力:
[
  { name: "Alice", age: 25, id: 1 },
  { name: "Bob", age: 30, id: 2 },
  { name: "Charlie", age: 35, id: 3 }
]
*/

以上が、JavaScriptでのmap()メソッドの使用方法とコード例です。map()メソッドは配列の要素を変換する際に便利な機能であり、さまざまな場面で活用することができます。ぜひこれらの例を参考にして、自身のコーディングに取り入れてみてください。