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

王林
リリース: 2024-07-24 12:24:52
オリジナル
858 人が閲覧しました

Building Your Own Map, Filter, and Reduce in JavaScript

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

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

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

// 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:
を使用してカスタム フィルター メソッドを作成しましょう。

// 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 メソッドを作成しましょう。

// 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 サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!