ホームページ ウェブフロントエンド jsチュートリアル JavaScript で独自のマップ、フィルター、リデュースを構築する

JavaScript で独自のマップ、フィルター、リデュースを構築する

Jul 24, 2024 pm 12:24 PM

Building Your Own Map, Filter, and Reduce in JavaScript

この投稿では、これらの JavaScript の強力な内部構造を詳しく掘り下げます。ただ使うだけではありません。 Array.prototype を使用して独自のカスタム マップ、フィルター、リデュース メソッドを作成し、それらを分解および再構築します。これらの関数を分析することで、その動作に関する貴重な洞察が得られ、JavaScript の配列操作機能を適切に活用できるようになります。

カスタム マップ メソッド:

JavaScript の map メソッドは、各要素に関数を適用して配列を変換するのに役立ちます。 Array.prototype:
を使用してカスタム マップ メソッドを作成しましょう。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// Custom map method for arrays

Array.prototype.customMap = function(callback) {

  const result = [];

 

  for (let i = 0; i < this.length; i++) {

    result.push(callback(this[i], i, this));

  }

 

  return result;

};

 

// Example usage:

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

const doubledNumbers = numbers.customMap((num) => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

ログイン後にコピー

このカスタム マップ メソッドでは、入力配列の各要素を反復処理し、提供されたコールバック関数を各要素に適用し、結果を新しい配列にプッシュして返します。

カスタムフィルターメソッド:

filter メソッドを使用すると、特定の条件を満たす要素を含む新しい配列を作成できます。 Array.prototype:
を使用してカスタム フィルター メソッドを作成しましょう。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// Custom filter method for arrays

Array.prototype.customFilter = function(callback) {

  const result = [];

 

  for (let i = 0; i < this.length; i++) {

    if (callback(this[i], i, this)) {

      result.push(this[i]);

    }

  }

 

  return result;

};

 

// Example usage:

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

const evenNumbers = numbers.customFilter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

ログイン後にコピー

このカスタム フィルター メソッドでは、入力配列の各要素を反復処理し、提供されたコールバック関数を各要素に適用します。コールバックが true を返した場合は、その要素を結果の配列に追加して返されます。

カスタム削減メソッド:

カスタムのreduceメソッドの作成には、初期値の処理が含まれます。 Array.prototype:
を使用してカスタムの Reduce メソッドを作成しましょう。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// Custom reduce method for arrays

Array.prototype.customReduce = function(callback, initialValue) {

  let accumulator = initialValue === undefined ? this[0] : initialValue;

  const startIndex = initialValue === undefined ? 1 : 0;

 

  for (let i = startIndex; i < this.length; i++) {

    accumulator = callback(accumulator, this[i], i, this);

  }

 

  return accumulator;

};

 

// Example usage:

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

const sum = numbers.customReduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 15

ログイン後にコピー

これで、任意の配列で使用できる CustomReduce メソッドが完成しました。このカスタムreduceメソッドでは、指定されたinitialValueから開始するか、初期値が指定されていない場合は最初の要素から開始して、配列を反復処理します。コールバック関数を各要素に適用し、各ステップでアキュムレータの値を更新し、最終的に累積された結果を返します。

結論:

JavaScript の配列メソッド (map、filter、reduce など) の内部動作を理解することは、熟練した JavaScript 開発にとって不可欠です。 Array.prototype を使用してこれらのメソッドのカスタム バージョンを作成することで、その基礎となる原理についての洞察が得られました。これらのカスタム メソッドは、概念的な理解を助けるだけでなく、プログラミング言語としての JavaScript の多用途性と能力を強調します。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

ソースビューアーでjQueryの知識を向上させます ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

ソースビューアーでjQueryの知識を向上させます

モバイル開発用のモバイルチートシート10個 モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

モバイル開発用のモバイルチートシート10個

See all articles