青训营笔记 | 手写JavaScript数组的方法（上）

foreach 方法

我们首先先创建一个index.js的文件在文件中定义一个数组，就像这样

let array = [10, 20, 30]; array.forEach((item) => console.log(item));

使用node index.js运行这段代码，我们可以看到输出的结果是
10
20
30 现在让我们来实现自己的foreach方法吧

let array = [10, 20, 30];

Array.prototype.myForeach = function (fn) {
  for (let i = 0; i < this.length; i++) {
    fn(this[i]);
  }
};

array.myForeach((item) => console.log(item));

让我们使用node index.js运行得到了跟刚刚运行一样的结果
10
20
30

map方法

我们首先先创建一个index.js的文件在文件中定义一个数组，就像这样

let array = [10, 20, 30]; array.map((item) => console.log(item));

使用node index.js运行这段代码，我们可以看到输出的结果是
10
20
30
现在让我们来实现自己的map方法吧

let array = [10, 20, 30];

// 与foreach方法不同的是
// map方法会返回一个新的数组
Array.prototype.myMap = function (fn) {
  let newArr = [];

  for (let i = 0; i < this.length; i++) {
    const result = fn(this[i]);
    newArr.push(result);
  }

  return newArr;
};

array.myMap((item) => console.log(`<p>${item}</p>`));
console.log(array);

让我们使用node index.js运行得到了跟刚刚运行一样的结果
10
20
30
[ 10, 20, 30 ]

filter 方法

我们首先先创建一个index.js的文件在文件中定义一个数组，就像这样

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

const res = arr.filter(function (item) {
  return item > 2;
});
console.log(res);

使用node index.js运行这段代码，我们可以看到输出的结果是
[ 3, 4 ]
现在让我们来实现自己的filter方法吧

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

Array.prototype.myFilter = function (fn) {
  let newArr = [];

  for (let i = 0; i < this.length; i++) {
    const res = fn(this[i]);
    if (res) {
      newArr.push(this[i]);
    }
  }

  return newArr;
};

const res = arr.myFilter(function (item) {
  return item > 2;
});

console.log(res);