JavaScript 配列の map() メソッドを理解する: シンプルなガイド

map() メソッドは、提供された関数 (callbackFn) を元の配列の各要素に適用することによって、新しい配列 を作成します。元の配列を変更せずにデータを変換するのに最適です。

---

構文

array.map(callbackFn, thisArg)

• callbackFn: 次の引数を使用して、各配列要素に対して実行される関数:
  • 要素: 現在の要素。
  • Index: 現在のインデックス。
  • array: 走査される配列。
• thisArg (オプション): コールバック関数で this として使用する値。

---

主な機能

1. 新しい配列を返します: 元の配列は変更されません。
2. 空のスロットをスキップ: スパース配列内の未割り当ての要素に対してコールバックは呼び出されません。
3. 一般的な使用法: 配列のようなオブジェクト (NodeList など) で動作します。

---

例

1. 基本的な例: 数値の変換

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));
console.log(roots); // [1, 2, 3]

2. オブジェクトの再フォーマット

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
];
const reformatted = kvArray.map(({ key, value }) => ({ [key]: value }));
console.log(reformatted); // [{ 1: 10 }, { 2: 20 }]

3. parseInt をマップで使用する

// Common mistake:
console.log(["1", "2", "3"].map(parseInt)); // [1, NaN, NaN]

// Correct approach:
console.log(["1", "2", "3"].map((str) => parseInt(str, 10))); // [1, 2, 3]

// Alternative:
console.log(["1", "2", "3"].map(Number)); // [1, 2, 3]

4. 未定義の結果を避ける

コールバックから何も返さないと、新しい配列が未定義になります:

const numbers = [1, 2, 3, 4];
const result = numbers.map((num, index) => (index < 3 ? num : undefined));
console.log(result); // [1, 2, 3, undefined]

filter() または flatMap() を使用して、不要な要素を削除します。

5. 副作用 (アンチパターン)

変数の更新などの副作用のある操作には、map() の使用を避けてください。

const cart = [5, 15, 25];
let total = 0;

// Avoid this:
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});

// Instead, use separate methods:
const total = cart.reduce((sum, cost) => sum + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

6. 他の配列要素へのアクセス

3 番目の引数 (配列) により、変換中に近傍へのアクセスが許可されます。

const numbers = [3, -1, 1, 4];
const averaged = numbers.map((num, idx, arr) => {
  const prev = arr[idx - 1] || 0;
  const next = arr[idx + 1] || 0;
  return (prev + num + next) / 3;
});
console.log(averaged);

---

一般的な使用例

1. データの変換: 各要素に関数を適用します。
2. オブジェクトの再フォーマット: データの構造を変更します。
3. Map NodeLists: NodeList のような DOM 要素を配列に変換します。

   const elems = document.querySelectorAll("option:checked");
   const values = Array.from(elems).map(({ value }) => value);

---

map() を避けるべき場合

• 戻り値は必要ありません: 代わりに forEach() または for...of を使用します。
• データの変更: 元のオブジェクトを変更する代わりに、新しいオブジェクトを作成します。

   const products = [{ name: "phone" }];
   const updated = products.map((p) => ({ ...p, price: 100 }));

---

最後のヒント

• 純粋関数のみ: コールバックに副作用がないことを確認してください。
• 引数を理解する:map() が要素、インデックス、配列をコールバックに渡すことを理解してください。
• 疎な配列を避ける: 空のスロットは空のままになります。

配列を効率的に変換する場合は、map() を使用してコードを簡素化します!

以上がJavaScript 配列の map() メソッドを理解する: シンプルなガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。