JavaScript の配列メソッドをマスターする: マップ、フィルター、リデュース

JavaScript の配列メソッド: マップ、フィルター、リデュース

JavaScript は、配列の操作を簡素化する強力な配列メソッドを提供します。このうち、map、filter、reduce は、すべての開発者が理解する必要がある 3 つの重要な高階関数です。

1.マップメソッド

map メソッドは、コールバック関数を使用して既存の配列の各要素を変換することにより、新しい配列を作成します。

構文

array.map(callback(currentValue[, index[, array]])[, thisArg]);

例: 要素の変換

const numbers = [1, 2, 3, 4];
const squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // Output: [1, 4, 9, 16]

使用例

• 配列に変換を適用します (単位の変換、データのフォーマットなど)。

2.フィルターメソッド

フィルター メソッドは、提供されたコールバック関数によって実装されたテストに合格した要素のみを含む新しい配列を作成します。

構文

array.filter(callback(element[, index[, array]])[, thisArg]);

例: 要素のフィルタリング

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

使用例

• 特定の条件に基づいて配列をフィルタリングします (例: null 値の除外、アクティブ ユーザーの検索)。

3. reduce メソッド

reduce メソッドは、アキュムレータと配列の各要素 (左から右へ) に関数を適用し、単一の値に減らします。

構文

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);

例: 配列要素の合計

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 10

使用例

• 合計の計算 (合計、平均など)。
• ネストされた配列を平坦化します。

4.マップ、フィルター、リデュースの組み合わせ

これらのメソッドを組み合わせて、複雑な操作を実行できます。

例: 偶数の二乗の合計

const numbers = [1, 2, 3, 4, 5];

const total = numbers
  .filter(function(number) {
    return number % 2 === 0; // Keep even numbers
  })
  .map(function(number) {
    return number * number; // Square the numbers
  })
  .reduce(function(accumulator, currentValue) {
    return accumulator + currentValue; // Sum the squares
  }, 0);

console.log(total); // Output: 20

5.主な違い

6.これらの方法を使用する利点

1. 可読性: よりクリーンでより宣言的なコード。
2. 再利用性: 配列に対する操作をモジュール化します。
3. パフォーマンス: 最適化されたメソッドにより一般的な操作を簡素化します。

7.概要

• map は、各要素に関数を適用して配列を変換します。
• フィルターは条件に基づいて要素を選択します。
• reduce は配列要素を単一の値に集約します。
• これらのメソッドは関数型プログラミングを促進し、配列処理を簡素化します。

map、filter、reduce をマスターすると、JavaScript のスキルが向上し、コードがよりクリーンで効率的になります。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の配列メソッドをマスターする: マップ、フィルター、リデュースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。