从零开始实现的 10 种流行 JavaScript 方法

介绍

在本文中，我想与你分享一些最流行的 JavaScript 方法，但它们都是从零开始实现的。对
JavaScript 方法内部工作原理的一点了解，对开发者来说总是有益的。
所以，这些是从零开始实现的最流行的 JavaScript 方法。如果你对 JavaScript 方法内部工作原理感兴趣，可以看看这篇文章。这也是一个简化版本，ECMAScript 中指定的实际方法要复杂得多。

本文提到的方法有：

map, reduce, filter, sort, every, includes, slice, splice, shift, indexOf.

1. map()

const fakeMap = function (callback) {
  const newArray = [];

  // 'this' refers to the array
  for (let i = 0; i < this.length; i++) {
    newArray[i] = callback(this[i], i);
  }

  return newArray;
};
Array.prototype.fakeMap = fakeMap;

[1, 2, 3].fakeMap((n) => n + 1); // output [2, 3, 4]

2. reduce()

const fakeReduce = function (callback, accumulator) {
  for (let i = 0; i < this.length; i++) {
    accumulator = callback(accumulator, this[i]);
  }
  return accumulator;
};
Array.prototype.fakeReduce = fakeReduce;

const reducer = (previousValue, currentValue) => previousValue + currentValue;

[1, 2, 3].fakeReduce(reducer, 0); // output 6

3. 过滤器()

const fakeFilter = function (callback) {
  const newArray = [];

  for (let i = 0; i < this.length; i++) {
    if (callback(this[i])) {
      newArray.push(this[i]);
    }
  }

  return newArray;
};

Array.prototype.fakeFilter = fakeFilter;

[1, 2, 3, 4, 5].fakeFilter((n) => n > 2); // output [3, 4, 5]

4. 排序()

const fakeSort = function (callback) {
  const newArray = [...this];

  for (let i = 0; i < newArray.length; i++) {
    for (let j = 0; j < newArray.length - 1; j++) {
      if (callback(newArray[j], newArray[j + 1]) > 0) {
        const temp = newArray[j + 1];
        newArray[j + 1] = newArray[j];
        newArray[j] = temp;
      }
    }
  }

  // array is sorted
  return newArray;
};

Array.prototype.fakeSort = fakeSort;

[3, 5, 1, 4, 2].fakeSort((a, b) => a - b); // output [1, 2, 3, 4, 5]

5. every()

const fakeEvery = function (callback) {
  for (let i = 0; i < this.length; i++) {
    if (!callback(this[i])) {
      return false;
    }
  }

  return true;
};

Array.prototype.fakeEvery = fakeEvery;

[1, 2, 3, 4, 5].fakeEvery((n) => n > 3); // output false

6. includes()

const fakeIncludes = function (item) {
  for (let i = 0; i < this.length; i++) {
    if (this[i] === item) {
      return true;
    }
  }

  return false;
};

Array.prototype.fakeIncludes = fakeIncludes;

[1, 2, 3, 4, 5].fakeIncludes(5); // output true

7. 切片()

const fakeSlice = function (start, end) {
  let newArray = [];
  if (!end) {
    for (let i = 0; i < this.length; i++) {
      if (i >= start) {
        newArray.push(this[i]);
      }
    }

    return newArray;
  }

  for (let i = 0; i < this.length; i++) {
    if (i >= start && i <= end) {
      newArray.push(this[i]);
    }
  }
  return newArray;
};

Array.prototype.fakeSlice = fakeSlice;

[1, 2, 3, 4, 5].fakeSlice(2, 3); // output [3, 4]

8. splice()

const fakeSplice = function (start, deleteCount, ...items) {
  let newArray = [];

  // if we only provide start fakeSplice(start)
  if (!deleteCount) {
    for (let i = 0; i < this.length; i++) {
      if (i < start) {
        newArray.push(this[i]);
      }
    }
    this.length = 0;
    this.push.apply(this, newArray);
    return;
  }

  // if we only provide start and deleteCount fakeSplice(start, deleteCount)
  if (!items) {
    for (let i = 0; i < this.length; i++) {
      if (i < start || i >= start + deleteCount) {
        newArray.push(this[i]);
      }
    }

    this.length = 0;
    this.push.apply(this, newArray);
    return;
  }

  // if we provide all arguments to the function
  for (let i = 0; i < this.length; i++) {
    if (i === start + deleteCount) {
      newArray = [...newArray, ...items];
    }
    if (i < start || i >= start + deleteCount) {
      newArray.push(this[i]);
    }
  }

  this.length = 0;
  this.push.apply(this, newArray);
  return;
};

Array.prototype.fakeSplice = fakeSplice;

const planets = [
  "Mercury",
  "Venus",
  "Earth",
  "Mars",
  "Jupiter",
  "Saturn",
  "Uranus",
  "Neptune",
];
planets.fakeSplice(2, 2, "Pluto");
console.log(planets); // output ["Mercury", "Venus", "Pluto", "Jupiter", "Saturn", "Uranus", "Neptune"]

9. shift()

const fakeShift = function () {
  let newArray = [];

  for (let i = 1; i < this.length; i++) {
    newArray.push(this[i]);
  }

  this.length = 0;
  this.push.apply(this, newArray);
};

Array.prototype.fakeShift = fakeShift;
const arr = [1, 2, 3, 4, 5];

arr.fakeShift();
console.log(arr); // output [2, 3, 4, 5]

10. indexOf()

const fakeIndexOf = function (item) {
  for (let i = 0; i < this.length; i++) {
    if (item === this[i]) {
      return i;
    }
  }
  return -1;
};

Array.prototype.fakeIndexOf = fakeIndexOf;

[1, 2, 3, 4, 5].fakeIndexOf(4); // output 3

结论

我们只是实现了 JavaScript 中最常用的方法，并更好地了解它们的工作原理，以便我们能够更有效地使用它们。

感谢您的时间！

文章来源：https://dev.to/northwillov/10-popular-javascript-methods-implemented-from-scratch-1ohk