家好，很高兴又见面了，我是姜茶的编程笔记，我们一起学习前端相关领域技术，共同进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力

在 JavaScript 中，Array.prototype.map 是一个常用的方法，它对数组的每个元素调用提供的函数，并返回一个新数组，包含函数的返回值。为了更好地理解其内部机制，今天我们将从零开始，实现一个自定义的 map 方法，并详细解析其实现步骤。

实现自定义 map 方法

首先，我们创建一个 myMap 方法，将其添加到 Array.prototype 上。这个方法接受两个参数：一个回调函数 callback 和一个可选的 thisArg 参数。callback 函数将对数组的每个元素进行操作，thisArg 是执行回调函数时的 this 值。

Array.prototype.myMap = function(callback, thisArg) {
  // 将传入的数组转换为对象
  const O = Object(this);

  // 获取数组的长度
  const len = O.length >>> 0;

  // 如果 callback 不是函数，则抛出 TypeError
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }

  // 创建一个新的数组，用于存储映射结果
  const result = new Array(len);

  // 遍历数组并应用回调函数
  for (let i = 0; i < len; i++) {
    // 只有当元素在数组中存在时才进行映射
    if (i in O) {
      // 调用回调函数，传递 thisArg 作为 this 值，并传递当前元素、索引、数组本身
      result[i] = callback.call(thisArg, O[i], i, O);
    }
  }

  return result;
};

让我们逐步解析这个实现。

1. 将传入的数组转换为对象

我们首先将 this 转换为一个对象，以便在方法中使用：

const O = Object(this);

2. 获取数组的长度

使用 >>> 0 操作符将长度转换为无符号整数，确保其为正整数：

const len = O.length >>> 0;

3. 检查回调函数

如果 callback 不是函数，则抛出一个 TypeError：

if (typeof callback !== 'function') {
  throw new TypeError(callback + ' is not a function');
}

4. 创建结果数组

我们创建一个与原数组长度相同的新数组，用于存储映射结果：

const result = new Array(len);

5. 遍历数组并应用回调函数

使用 for 循环遍历数组的每个索引。如果当前索引存在于数组中，则调用回调函数，并将结果存储在 result 数组中：

for (let i = 0; i < len; i++) {
  if (i in O) {
    result[i] = callback.call(thisArg, O[i], i, O);
  }
}

6. 返回结果数组

最后，我们返回存储映射结果的 result 数组：

return result;

示例使用

下面是一个示例，展示如何使用自定义的 myMap 方法：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.myMap(x => x * 2);

console.log(doubled); // 输出 [2, 4, 6, 8, 10]

在这个示例中，我们将 numbers 数组中的每个元素都乘以 2，并将结果存储在 doubled 数组中。结果输出为 [2, 4, 6, 8, 10]，这与内置的 Array.prototype.map 方法的行为一致。

结论

通过实现自定义的 map 方法，我们深入理解了 JavaScript 中数组的操作方式。希望你可以更好地掌握 map 方法的内部机制，并提升你的 JavaScript 编程技巧。

最后

如果你有任何问题或建议，欢迎在评论区留言交流！祝你编程愉快！

ap、filter、reduce都是高阶函数，它们的功能非常强大，可以搭配箭头函数来完成复杂的数组数据处理。关于它们的用法很多人写过，但少有人写结合案例来写。在这里我会对这3个函数的用法结合案例来详细讲述，并额外写了for循环版本用来帮助理解。

模拟数据

要详细讲述这3个高阶函数的用法必须结合实际案例来讲。现在有一个这样的数组，这个数组是任务清单：

let todo = [
    {id: 1, name: "吃饭", done: true},
    {id: 2, name: "睡觉", done: true},
    {id: 3, name: "编程", done: false},
    {id: 4, name: "写作", done: false},
    {id: 5, name: "逛街", done: true},
]

map方法

参数：只接收一个参数，必须是处理数据的函数。

作用：对数组成员调用传来的参数函数，进行处理后给出返回值。

返回值：返回由返回值构成的新数组。

需求

写一个可以更新todo数组数据的函数，例如对todo数组中id为3的done字段更新为true。

代码

map版本：

function updateTodo(arr, id, state) {  // arr是数组，id是要处理的id，state是要更新的状态
    return arr.map(item => {
        if (item.id === id) return {...item, done: state}  // 若找到指定id，那么更新数据
        else return item  // 若没找到指定id，返回原值
    })
}`

for循环版本：

function updateFor(arr, id, state) {
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === id) newArr[i] = {...arr[i], done: state}
        else newArr[i] = arr[i]
    }
    return newArr
}`

测试

const newTodo1 = updateTodo(todo,3,true)  // 检查运行结果可以看到id是3的记录的状态已更新为true
todo = newTodo1  // 将新内容更新到原数组
const newTodo2 = updateFor(todo,1,false)  // 检查运行结果可以看到id是1的记录的状态已更新为false
todo = newTodo2  // 将新内容更新到原数组`

filter方法

参数：只接收一个参数，必须是处理数据的函数。

作用：对数组成员调用传来的参数函数，进行处理后给出true或false的返回值。

返回值：返回由返回值为true的数组成员构成的新数组。

需求

写一个可以删除todo数组指定行的函数，例如将todo数组中id为3那行数据删除。

代码

filter版本：

function deleteTodo(arr, id) {  // arr是数组，id是要处理的id，state是要更新的状态
    return arr.filter(item => {
        if (item.id === id) return false  // 若找到指定id，那么返回false，表示该行数据不要
        else return true  // 其他行数据返回true，表示该行数据需要
    })
}`

for循环版本：

function deleteFor(arr, id) {
    let newArr = []
    for (let i of arr) {
        if (i.id !== id) newArr.push(i)
    }
    return newArr
}`

测试

const newTodo1 = deleteTodo(todo,3)  // 检查运行结果可以看到id是3的记录不存在
todo = newTodo1  // 将新内容更新到原数组
const newTodo2 = deleteFor(todo,4)  // 检查运行结果可以看到id是4的记录不存在
todo = newTodo2  // 将新内容更新到原数组

reduce方法

参数：接收两个参数，第一个必须是处理数据的函数，第二个是初始值(数字型)。注意：该参数函数可以接收到4个参数，第一个参数是累加值，第二个参数是当前的数组成员，第三个参数是索引，第四个参数是数组，一般后2个可忽略。

作用：对数组成员调用传来的参数函数，进行处理后给出数字，然后将该数字累加到累加值上。

返回值：返回累加值。

需求

写一个可以统计todo数组中done为true的记录数量的函数。

代码

reduce版本：

function countTodo(arr) {
    return arr.reduce((total,item) => total+(item.done?1:0),0)
}

for循环版本：

function countFor(arr) {
    let count = 0
    for (let i of arr) {
        if (i.done) count++
    }
    return count
}

测试

const count1 = countTodo(todo)  // 检查运行结果可以看到统计结果是3
const count2 = countFor(todo）  // 检查运行结果可以看到统计结果也是3

结束语

写完了，希望对还没彻底掌握map、filter、reduce这3个高阶函数用法的朋友能有所帮助。请参考数据、需求和代码，尝试理解，自己敲一遍，然后尝试自己写一下。这样就能彻底掌握map、filter、reduce这3个常用的高阶函数了。

请注意：这3个函数底层有优化，用它们比自己写循环的运行效率要高，代码也更简洁。它们都是前端程序员处理数据时经常要用到的！