JavaScriptのmapメソッドを使用して処理を行い、結果を返す方法

2024-02-08 10:50 JavaScript mapメソッド 配列処理
  1. 基本的な使用方法: mapメソッドは、元の配列のすべての要素に対して指定した関数を実行し、その結果を新しい配列として返します。例えば、以下のコードは配列の各要素を2倍にして新しい配列を作成します。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 出力: [2, 4, 6, 8, 10]
  1. オブジェクトのプロパティへのアクセス: mapメソッドのコールバック関数では、各要素にアクセスして処理を行うことができます。例えば、以下のコードはオブジェクトの配列から特定のプロパティの値を抽出して新しい配列を作成します。
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const names = users.map((user) => user.name);
console.log(names); // 出力: ["Alice", "Bob", "Charlie"]
  1. 条件付き処理: mapメソッドのコールバック関数では条件分岐を行い、要素ごとに異なる処理を行うこともできます。例えば、以下のコードは配列の要素が偶数か奇数かによって新しい配列を作成します。
const numbers = [1, 2, 3, 4, 5];
const evenOrOdd = numbers.map((num) => num % 2 === 0 ? 'even' : 'odd');
console.log(evenOrOdd); // 出力: ["odd", "even", "odd", "even", "odd"]

これらはmapメソッドの一部の使い方の例です。実際のアプリケーションではさまざまなケースで活用することができます。ぜひ試してみてください。