JavaScript Array map() メソッドについて-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-30 15:49:16

オリジナル

564 人が閲覧しました

Understanding JavaScript Array map() Method

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 },
// ]

ログイン後にコピー