ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript の Map、Filter、Reduce メソッドのポリフィル

JavaScript の Map、Filter、Reduce メソッドのポリフィル

王林
王林オリジナル
2024-08-16 06:18:12613ブラウズ

Polyfill for Map, Filter, and Reduce Methods in Javascript

地図

各配列項目に対していくつかの操作 (コールバック関数) を実行することにより、元の配列から新しい配列を返します。元の配列は変更されません。

const nums = [1, 2, 3, 4];

const double = nums.map((num, i, arr) => num * 2);
console.log(double); // [2, 4, 6, 8]

実装

Array.prototype.myMap = function (cb) {
  let output = [];
  for (let i = 0; i < this.length; ++i) {
    output.push(cb(this[i], i, this));
  }
  return output;
};

フィルター

指定された条件を満たす (つまり、コールバックが true を返す) 要素のみを含む新しい配列を返します。元の配列は変更されません。

const nums= [1, 2, 3, 4];

const greaterThan2 = nums.filter((num, i, arr) => num > 2);
console.log(greaterThan2); // [3, 4]

実装

Array.prototype.myFilter = function (cb) {
  let output = [];
  for (let i = 0; i < this.length; ++i) {
    if (cb(this[i], i, this)) output.push(this[i]);
  }
  return output;
};

減らす

これはおそらく 3 つすべての中で最も複雑です。このメソッドは、配列の要素を処理して単一の出力値を生成します。

const nums = [1, 2, 3, 4];

const sum = nums.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

実装

Array.prototype.myReduce = function (cb, initialValue) {
  let accumulator = initialValue;
  for (let i = 0; i < this.length; ++i) {
    accumulator = accumulator!== undefined ? cb(accumulator, this[i], i, this) : this[i];
  }
  return accumulator;
};

以上がJavaScript の Map、Filter、Reduce メソッドのポリフィルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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