JavaScript Array map() メソッドについて

map() の紹介

map() メソッドは、呼び出し配列内のすべての要素に対して提供された関数を呼び出した結果を格納した新しい配列を作成します。これは、配列の各要素を新しい要素に変換し、元の配列を変更せずに新しい配列を生成できる関数プログラミング手法です。

---

構文

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

または、アロー関数を使用します:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

パラメータ

• callback: 3 つの引数をとり、新しい配列の要素を生成する関数:
  • currentValue: 処理中の現在の要素。
  • index (オプション): 現在の要素のインデックス。
  • array (オプション): 配列マップが呼び出されました。
• thisArg (オプション): コールバックの実行時に this として使用する値。

---

戻り値

各要素がコールバック関数の結果である新しい配列。

---

map() の仕組み

• 不変性:map() は元の配列を変更しません。
• 要素ごとの変換: コールバック関数を各要素に適用します。
• 新しい配列を返します: 結果を新しい配列に収集します。

---

例

a.マッピング番号

例: 配列内の各数値を 2 で乗算します。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b.文字列の変換

例: 文字列の配列を大文字に変換します。

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

c.オブジェクトのプロパティを抽出しています

例: オブジェクトの配列から特定のプロパティを抽出します。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

d.オブジェクトの配列のマッピング

例: 配列内の各オブジェクトを変換します。

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

map() と forEach() の違い

• map():
  • 新しい配列を返します。
  • 各要素を変換して結果を収集したい場合に使用します。
• forEach():
  • 未定義を返します。
  • 副作用 (ロギング、外部変数の変更など) を実行する必要があり、新しい配列が必要ない場合に使用されます。

forEach() の例:

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

---

アロー関数でのmap()の使用

アロー関数は、コールバック関数を記述するための簡潔な構文を提供します。

例:

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

TypeScript のmap()

TypeScript は JavaScript に静的型付けを追加し、コンパイル時のエラーの検出に役立ちます。

a.型の注釈

配列内の要素の型と戻り値の型を指定できます。

例:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b.ジェネリックタイプ

任意の型で動作する汎用関数を定義できます。

例:

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

---

一般的な使用例

• データの変換: データをある形式から別の形式に変換します。
• 値の抽出: オブジェクトから特定のフィールドを抽出します。
• データの構成: 既存のデータに基づいて新しい配列を作成します。
• 計算: 各要素に対して計算を実行します。

---

高度なトピック

a.他の配列メソッドとのmap()のチェーン

map() を filter()、reduce() などの他の配列メソッドと連鎖させることができます。

例:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

b.非同期操作の処理

map() はコールバック内の非同期操作を処理しません。非同期操作を実行する必要がある場合は、Promise.all() と map() の使用を検討してください。

例:

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

ベストプラクティス

• 副作用には map() を使用しないでください: 新しい配列が必要ない場合は、代わりに forEach() を使用してください。
• 元の配列の変更を避ける:map() は元の配列またはその要素を変更してはなりません。
• 値を返す: コールバック関数が値を返すようにします。そうしないと、新しい配列に未定義の要素が含まれることになります。
• 簡潔にするためにアロー関数を使用する: コードが短くなり、読みやすくなります。

---

結論

JavaScript と TypeScript で効果的に配列を操作するには、map() 関数を理解することが不可欠です。これは、データをクリーンかつ効率的に変換できる多用途の方法です。 map():

を思い出してください。

• 新しい配列を作成します。
• 各要素に関数を適用します。
• 元の配列は変更されません。

map() をマスターすると、より簡潔で機能的なコードを作成できるようになり、保守性と可読性が向上します。

読んでいただきありがとうございます。このコンテンツが気に入ったら、お気軽にコーヒーをおごってください:
https://buymeacoffee.com/kellyblaire

以上がJavaScript Array map() メソッドについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。