函数式编程利器：forEach()与map()的解析与妙用

一、forEach()与map()的源码解析

要理解forEach()和map()的内部实现机制，我们首先需要查看它们的源码。

1. forEach()源码解析

Array.prototype.forEach = function(callbackfn) {
  for (var i = 0; i < this.length; i++) {
    callbackfn(this[i], i, this);
  }
};

从源码中可以看出，forEach()方法接收一个回调函数callbackfn作为参数，它对数组中的每个元素依次执行该回调函数。回调函数接收三个参数：当前元素、当前元素的索引以及数组本身。

2. map()源码解析

Array.prototype.map = function(callbackfn) {
  var mappedArray = [];
  for (var i = 0; i < this.length; i++) {
    mappedArray.push(callbackfn(this[i], i, this));
  }
  return mappedArray;
};

与forEach()类似，map()方法也接收一个回调函数callbackfn作为参数。不同之处在于，map()方法返回一个新的数组，其中包含了对原数组每个元素应用回调函数后的结果。

二、forEach()与map()的相同点与不同点

1. 相同点

• forEach()和map()都是数组方法，用于遍历数组中的元素。
• 它们都接收一个回调函数作为参数，该回调函数对数组中的每个元素执行某种操作。
• 它们都是惰性求值的，这意味着它们不会立即执行回调函数，而是在需要时才执行。

2. 不同点

• forEach()不返回任何值，而map()返回一个新的数组，其中包含了对原数组每个元素应用回调函数后的结果。
• forEach()主要用于对数组中的每个元素执行某种操作，而map()主要用于对数组中的每个元素进行转换。

三、forEach()与map()的实际案例

1. 使用forEach()为数组中的每个元素添加属性

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

numbers.forEach((number, index) => {
  number. doubled = number * 2;
});

console.log(numbers); // [ { doubled: 2 }, { doubled: 4 }, { doubled: 6 }, { doubled: 8 }, { doubled: 10 } ]

2. 使用map()遇到空缺比较

const data = [
  { name: 'John', age: 25 },
  { name: 'Mary', age: 30 },
  { name: 'Bob', age: undefined },
  { name: 'Alice', age: 22 }
];

const filteredData = data.map((person) => {
  if (person.age) {
    return person;
  } else {
    return { name: person.name, age: 'Unknown' };
  }
});

console.log(filteredData); // [ { name: 'John', age: 25 }, { name: 'Mary', age: 30 }, { name: 'Bob', age: 'Unknown' }, { name: 'Alice', age: 22 } ]

四、结语

forEach()和map()是JavaScript中非常有用的数组方法，它们可以帮助我们轻松地遍历数组中的元素并对其执行各种操作。通过理解它们的源码、相同点和不同点，我们可以更好地掌握它们的用法并将其应用到实际开发中。