首页  >  文章  >  web前端  >  Javascript 中 Map、Filter 和 Reduce 方法的 Polyfill

Javascript 中 Map、Filter 和 Reduce 方法的 Polyfill

王林
王林原创
2024-08-16 06:18:12657浏览

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;
};

减少

这可能是这三个中最复杂的一个。此方法处理数组的元素以生成单个输出值。

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 方法的 Polyfill的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn