揭开JavaScript高阶函数的神秘面纱：从封装new、forEach、map的实践中感悟

2023-11-06 01:08:58

导语：

踏入JavaScript的编程世界，高阶函数犹如一扇通往代码洞天的神秘之门。它赋予开发者超凡的力量，处理数据犹如庖丁解牛，举重若轻。今天，让我们踏上高阶函数的实践之旅，通过对new、forEach、map的封装，深入领悟编程的奥妙，揭开高阶函数的神秘面纱。

封装new：定制对象创建的新方式

传统方式：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person('John', 30);

封装后：

function myNew(constructor, ...args) {
  const obj = {};
  Object.setPrototypeOf(obj, constructor.prototype);
  constructor.apply(obj, args);
  return obj;
}

const person = myNew(Person, 'John', 30);

优势：

增强灵活性：可动态创建对象，而不受构造函数的限制。
扩展性强：可自定义对象的创建过程，添加额外操作。

封装forEach：优雅遍历数组或对象的每一项

传统方式：

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

封装后：

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

myForEach(arr, (item, index, arr) => {
  console.log(item);
});

优势：

代码简洁：通过回调函数简化遍历逻辑，提高代码可读性。
灵活处理：支持对数组或对象进行遍历，满足不同场景需求。

封装map：巧妙映射数组元素，创造无限可能

传统方式：

const arr = [1, 2, 3];
const newArr = [];
for (let i = 0; i < arr.length; i++) {
  newArr.push(arr[i] * 2);
}

封装后：

function myMap(arr, callback) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    newArr.push(callback(arr[i], i, arr));
  }
  return newArr;
}

const newArr = myMap(arr, (item, index, arr) => {
  return item * 2;
});