自己封装的reduce、map、foreach、filter、bind等方法

reduce 方法

在这个自定义的 reduce 方法中，我们遵循了原生 reduce 方法的工作原理。我们接受三个参数：数组 arr，回调函数 callback 和初始值 initialValue（可选）。

在循环中，我们检查累加器（accumulator）是否已经定义，如果是，则调用回调函数 callback，并传入累加器的值、当前元素的值、当前索引和原始数组作为参数，并将回调函数的返回值赋值给累加器。如果累加器未定义，则将当前元素的值赋给累加器。

最后，我们返回累加器的值作为 reduce 方法的结果。

function myReduce(arr, callback, initialValue) {
  let accumulator = initialValue === undefined ? undefined : initialValue;

  for (let i = 0; i < arr.length; i++) {
    if (accumulator !== undefined) {
      accumulator = callback(accumulator, arr[i], i, arr);
    } else {
      accumulator = arr[i];
    }
  }

  return accumulator;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

// 使用自定义的 reduce 方法
const numbers = [1, 2, 3, 4, 5];
const sum = myReduce(numbers, (accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 输出 15
1
2
3
4
5

map 方法

map 函数是用于对数组中的每个元素执行指定的操作，并返回一个新的数组。

我们封装自己的map方法首先定义了一个名为 myMap 的方法。myMap 方法接受一个回调函数作为参数，并在每个数组元素上调用该回调函数，并将结果放入一个新的数组 newArray 中。回调函数接受三个参数：当前元素、当前元素的索引和被操作的原始数组。

Array.prototype.myMap = function(callback) {
  const newArray = [];
  for (let i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this));
  }
  return newArray;
};
1
2
3
4
5
6
7

// 使用自定义的 map 方法

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.myMap(function(number) {
  return number * 2;
});

console.log(doubled);  // 输出 [2, 4, 6, 8, 10]
1
2
3
4
5
6
7
8
9

forEach方法

在这个自定义的 forEach 方法中，我们接受两个参数：数组 arr 和回调函数 callback。

在循环中，我们遍历数组的每个元素，并在每次循环中调用回调函数 callback，并传入当前元素的值、当前索引和原始数组作为参数。

function myForEach(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i], i, arr);
  }
}
1
2
3
4
5

// 使用自定义的 forEach 方法
const numbers = [1, 2, 3, 4, 5];

myForEach(numbers, (value, index) => {
  console.log(`Index: ${index}, Value: ${value}`);
});
1
2
3
4
5
6
7

filter方法的封装

在这个自定义的 filter 方法中，我们接受两个参数：数组 arr 和回调函数 callback。

在循环中，我们遍历数组的每个元素，并在每次循环中调用回调函数 callback，并传入当前元素的值、当前索引和原始数组作为参数。如果回调函数返回 true，则将当前元素添加到一个新的数组 filteredArray 中。

最后，我们返回新的数组 filteredArray 作为 filter 方法的结果。

function myFilter(arr, callback) {
  const filteredArray = [];

  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i, arr)) {
      filteredArray.push(arr[i]);
    }
  }

  return filteredArray;
}

1
2
3
4
5
6
7
8
9
10
11
12

// 使用自定义的 filter 方法
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = myFilter(numbers, (value) => value % 2 === 0);

console.log(evenNumbers); // 输出 [2, 4]
1
2
3
4
5

bind方法的封装

在 myBind 方法中，我们传入 context 作为上下文，以及一系列参数 …args。

在返回的函数内部，我们将原始函数 fn 应用到指定的上下文 context 上，并将参数合并为一个新的数组 […args, …innerArgs]。

最后，我们返回这个新函数作为 bind 方法的结果。

Function.prototype.myBind = function (context, ...args) {
  const fn = this; // 保存原始函数
  
  return function (...innerArgs) {
    return fn.apply(context, [...args, ...innerArgs]);
  };
};

1
2
3
4
5
6
7
8

// 使用自定义的 myBind 方法
const person = {
  name: 'John',
  greet(message) {
    console.log(`${this.name} says ${message}`);
  },
};

const greetFunc = person.greet.myBind(person, 'Hello');
greetFunc('world'); // 输出 "John says Hello world"
1
2
3
4
5
6
7
8
9
10