foreach和map

简介: foreach和map

前言
为什么要写这么一篇文章,原因是今天下午水群的时候,有个小伙伴分享自己的面试题,其中一个是foreach和map的区别,其实是蛮简单,蛮基础的一道题,但是他是这么回答的

一个会改变原数组,一个不会,,

我当场就懵了,我以为是整活,谁知道是认真的,并且给我发了一篇文章

我看完更蚌埠住了,那么多对的文章,你偏偏挑个错的
然后我发现,真的很多人都这么认为的,那这真的是一件很可怕的事情,明明你自己试一下就知道了,甚至有不少文章都是这么写的,但是我也看到了不错的文章,写的已经不错了
那么咱们,就这个简单的问题,咱们浅浅地说一下~
区别
map会返回一个新的数组,而forEach不会
简单的区别我们可以在MDN上看看

简单来说什么意思,map会返回一个新的数组,而forEach不会,实际上是因为forEach不会返回任何值(实际上返回的是undefined),而map 是有返回值的,是一个新数组
我们可以简单手写一下,看的会更直观一些
map
js复制代码function myMap(array, callback) {
const result = [];

for (let i = 0; i < array.length; i++) {
result.push(callback(array[i], i, array));
}

return result;
}

forEach
js复制代码function myForEach(array, callback) {
for (let i = 0; i < array.length; i++) {
callback(array[i], i, array);
}
}

再简单点对比

forEach 和 map 的实现原理相似。它们都是通过遍历数组,对数组的每个元素执行特定的函数。区别主要在于它们处理函数返回值的方式不同。forEach 忽略函数的返回值,而 map 则将函数的返回值收集到一个新的数组中。

在内部,这两个函数可能会使用一个类似于下面的for循环来遍历数组:
js复制代码for (let i = 0; i < array.length; i++) {
callback(array[i], i, array); // callback 是 forEach 或 map 的参数函数
}

在 map 的内部实现中,还会有一个新的数组用于收集每次调用回调函数的结果。这个新的数组最后会被返回:
js复制代码let newArray = [];
for (let i = 0; i < array.length; i++) {
newArray.push(callback(array[i], i, array)); // callback 是 map 的参数函数
}
return newArray;

那么这个时候,有人可能会想,那我使用forEach的时候,加个return不就得了,咱们先不说能不能实现,就是真实现了,我觉得是没什么实际意义的,尽管你可以在回调函数中添加返回语句,但这个返回值不会被 forEach 方法捕获或使用

那接下来咱们看看能不能实现吧
js复制代码 const array = [1, 2, 3]

    const result = array.forEach((element) => {
        return element * 2; // 这个返回值不会被 forEach 捕获或使用
    });

    console.log(result); // 输出: undefined

那么咱们使用map呢
js复制代码 const array = [1, 2, 3]

    const result = array.map((element) => {
        return element * 2; // 这个返回值会被 map 捕获或使用
    });

    console.log(result); // 输出: [2, 4, 6]

到这里,我相信大家就能明白了
map和forEach会不会改变原数组
这需要看我们面对的数据类型,会分为基础数据类型和引用类型
基础数据类型
forEach
js复制代码 const array = [1, 2, 3, 4];
array.forEach(item => {
item = item + 1
})
console.log(array); // [1,2,3,4]

map
js复制代码 const array = [1, 2, 3, 4];
array.map(item => {
item = item + 1
})
console.log(array); // [1,2,3,4]

我们发现是不会进行改变的
引用类型
js复制代码 const arr = [{
name: 'shaka',
age: 23
}, {
name: 'virgo',
age: 18
}]
arr.forEach(item => {
if (item.name === 'shaka') {
item.age = 100
}
})
console.log(arr); //[{name: 'shaka', age: 100}, {name: 'virgo', age: 18}]

map就不再写了,也是会改变的
所以重点来了,我们回到这个问题:问js的forEach和map的区别,显而易见一个会改变原数组,一个不会这个答案毫无疑问是错误的

这里我们其实应该思考的是,为什么基础数据类型不会更改,引用类型会更改

这是因为在使用 forEach 和 map 方法时,对引用类型元素的修改会直接反映在原始数组中。这是因为引用类型的元素实际上存储的是引用(内存地址),而非值本身。因此,通过引用可以访问和修改原始数组中的元素。
而number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值
我们再回头看这个

为什么他这个修改了呢

因为使用的是arr[index]。相当于你平常的 数组名[第几项] = 值。这样自然是可以修改的。

还有哪些区别呢

foreach可以跳出循环,return 语句可以当前回调函数中返回,而map不能,只能遍历完整个数组。
foreach不支持链式调用,而map支持链式调用,可以继续对返回的新数组进行操作。

这里注意:forEach 方法无法通过使用 break 语句来中断循环。 break 语句用于中断循环的功能只适用于 for 循环或 while 循环
这里给大家点例子吧,一下就能看懂了
js复制代码 // 使用 forEach 跳出当前循环
const array1 = [1, 2, 3, 4, 5];
let sum1 = 0;

    array1.forEach((element) => {
        if (element === 3) {
            return; // 使用 return 跳出循环
        }
        console.log(element); //1,2,4,5
        sum1 += element;
    });

    console.log(sum1); // 输出: 12


    // 使用 map 无法中断循环
    const array2 = [1, 2, 3, 4, 5];

    const newArray = array2.map((element) => {
        if (element === 3) {
            // 使用 return 语句无法中断 map 循环
            return;
        }
        return element * 2;
    });

    console.log(newArray); // 输出: [2, 4, undefined, 8, 10]


    // map 方法支持链式调用
    const array3 = [1, 2, 3, 4, 5];

    const doubledSum = array3
        .map((element) => element * 2)
        .reduce((accumulator, currentValue) => accumulator + currentValue, 0);

    console.log(doubledSum); // 输出: 30

js复制代码
const array = [1, 2, 3, 4, 5];
let sum = 0;

    array.forEach((element) => {
        if (element === 3) {
            break; // 使用 break 无法中断 forEach 循环
        }
        sum += element;
    });

    console.log(sum); // 此行代码不会执行,因为上面的代码会抛出错误

    //for循环则可以
    const array = [1, 2, 3, 4, 5];
    let sum = 0;

    for (let i = 0; i < array.length; i++) {
        const element = array[i];

        if (element === 3) {
            break; // 使用 break 中断 for 循环
        }

        sum += element;
    }

    console.log(sum); // 输出: 3
目录
相关文章
|
4天前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
1天前
|
机器学习/深度学习 算法 大数据
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
2024“华为杯”数学建模竞赛,对ABCDEF每个题进行详细的分析,涵盖风电场功率优化、WLAN网络吞吐量、磁性元件损耗建模、地理环境问题、高速公路应急车道启用和X射线脉冲星建模等多领域问题,解析了问题类型、专业和技能的需要。
2121 11
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
|
23小时前
|
机器学习/深度学习 算法 数据可视化
【BetterBench博士】2024年中国研究生数学建模竞赛 C题:数据驱动下磁性元件的磁芯损耗建模 问题分析
2024年中国研究生数学建模竞赛C题聚焦磁性元件磁芯损耗建模。题目背景介绍了电能变换技术的发展与应用,强调磁性元件在功率变换器中的重要性。磁芯损耗受多种因素影响,现有模型难以精确预测。题目要求通过数据分析建立高精度磁芯损耗模型。具体任务包括励磁波形分类、修正斯坦麦茨方程、分析影响因素、构建预测模型及优化设计条件。涉及数据预处理、特征提取、机器学习及优化算法等技术。适合电气、材料、计算机等多个专业学生参与。
1104 13
【BetterBench博士】2024年中国研究生数学建模竞赛 C题:数据驱动下磁性元件的磁芯损耗建模 问题分析
|
30天前
|
运维 Cloud Native Devops
一线实战:运维人少,我们从 0 到 1 实践 DevOps 和云原生
上海经证科技有限公司为有效推进软件项目管理和开发工作,选择了阿里云云效作为 DevOps 解决方案。通过云效,实现了从 0 开始,到现在近百个微服务、数百条流水线与应用交付的全面覆盖,有效支撑了敏捷开发流程。
19265 29
|
1月前
|
人工智能 自然语言处理 搜索推荐
阿里云Elasticsearch AI搜索实践
本文介绍了阿里云 Elasticsearch 在AI 搜索方面的技术实践与探索。
18804 20
|
30天前
|
Rust Apache 对象存储
Apache Paimon V0.9最新进展
Apache Paimon V0.9 版本即将发布,此版本带来了多项新特性并解决了关键挑战。Paimon自2022年从Flink社区诞生以来迅速成长,已成为Apache顶级项目,并广泛应用于阿里集团内外的多家企业。
17508 13
Apache Paimon V0.9最新进展
|
1月前
|
存储 人工智能 前端开发
AI 网关零代码解决 AI 幻觉问题
本文主要介绍了 AI Agent 的背景,概念,探讨了 AI Agent 网关插件的使用方法,效果以及实现原理。
18695 16
|
30天前
|
人工智能 自然语言处理 搜索推荐
评测:AI客服接入钉钉与微信的对比分析
【8月更文第22天】随着人工智能技术的发展,越来越多的企业开始尝试将AI客服集成到自己的业务流程中。本文将基于《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案,详细评测AI客服在钉钉和微信中的接入流程及实际应用效果,并结合个人体验分享一些心得。
9913 9
|
3天前
|
编解码 JSON 自然语言处理
通义千问重磅开源Qwen2.5,性能超越Llama
击败Meta,阿里Qwen2.5再登全球开源大模型王座
|
2天前
|
缓存 前端开发 JavaScript
终极 Nginx 配置指南(全网最详细)
本文详细介绍了Nginx配置文件`nginx.conf`的基本结构及其优化方法。首先通过删除注释简化了原始配置,使其更易理解。接着,文章将`nginx.conf`分为全局块、events块和http块三部分进行详细解析,帮助读者更好地掌握其功能与配置。此外,还介绍了如何通过简单修改实现网站上线,并提供了Nginx的优化技巧,包括解决前端History模式下的404问题、配置反向代理、开启gzip压缩、设置维护页面、在同一IP上部署多个网站以及实现动静分离等。最后,附上了Nginx的基础命令,如安装、启动、重启和关闭等操作,方便读者实践应用。
148 77
终极 Nginx 配置指南(全网最详细)