JavaScript中forEach和map的区别及实现

影风莫

已于 2023-06-21 18:33:55 修改

阅读量563

点赞数

CC 4.0 BY-SA版权

分类专栏： js手写文章标签： JavaScript js手写前端

于 2022-04-24 17:04:35 首次发布

本文链接：https://blog.csdn.net/weixin_50789156/article/details/124387122

js手写专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中map和forEach两种数组遍历方法的区别。map方法不会直接修改原数组，而是返回一个新的数组；forEach则可以改变原数组。此外，map有返回值，而forEach无返回值。在错误处理上，两者都需要通过try...catch...来中断，而不能用return。文中还提供了map和forEach的实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区别

map不能修改原数组，forEach能改变原数组
map有返回值，创建新数组，而forEach无返回值，返回结果undefined
map和forEach用只能用try...catch...中断抛出错误中断，而return不能，用其效果相当于for循环的continue会跳过此次循环进入下一次循环。

实现

forEach方法实现

Array.prototype.forEach = function (callback, context) {
    // 不能是null调用方法
    if (this === null) {
        throw new TypeError(
            "Array.prototype.forEach" + "called on null or undefined"
        );
    }
    // 第一个参数必须要为function
    if (typeof callback !== "function") {
        throw new TypeError(callback + " is not a function");
    }
    // 获取原数组，因为会改变原数组
    let arr = this;
    let len = arr.length;
    //
    for (let i = 0; i < len; i++) {
        callback.call(context, arr[i], i, arr);
    }
    // 数组没有返回值的，不用返回
}

map实现：

Array.prototype.map = function (callback, context) {
    // 不能是null调用方法
    if (this === null) {
        throw new TypeError(
            "Array.prototype.map" + "called on null or undefined"
        );
    }
    // 第一个参数必须要为function
    if (typeof callback != 'function') {
        throw new TypeError(
            callback + 'is not a function'
        )
    }
    // 利用slice方法浅拷贝一下
    let arr = Array.prototype.slice.call(this)
    let len = arr.length
    let arrMap = []
    for (let i = 0; i < len; i++) {
        arrMap[i] =  callback.call(context, arr[i], i, arr)
    }
    return arrMap
}