了解 JavaScript 中的 Map、Filter 和 ForEach

向右看齐 2024-03-22 19:47 107阅读 0赞

曾经发生过您想通过遍历数组对数组进行一些操作并且不知道应该使用哪个内置函数所以您只是用谷歌搜索您的问题或最近使用 Chat-GPT 并粘贴出现的任何函数或者在一天结束的时候自己写一个 for 循环。

现在也许编写 for 循环会让人感到安慰，因为您从未完全理解这些内置函数的原因和时间。因此，在此博客中，我将尝试让您了解我所了解的有关这些功能的所有内容。

让我们从地图开始

地图  
所以 Map 是 JavaScript 中的一个内置函数，用于迭代/循环预定义数组并转换其元素并返回一个新数组，因此它不会在此过程中改变或对原始数组进行任何更改。

它需要一个回调函数，其中包含将元素添加到我们的新数组的逻辑。

现在在回调函数中，您可以编写定义将返回到新数组的内容的逻辑。

该值从回调函数返回，然后附加到新数组中要迭代的元素的位置。

迭代结束后，map 将返回新数组。

Map 返回的新数组将始终与原始数组的长度完全相同。

它的应用是改变或转换原始数组的值。

现在，当我说它用于更改或转换原始数组的值时，并不意味着返回的数组必须与原始数组类似，您甚至可以返回一个数组，其中每个元素的值仅为 1。

听起来很傻吧？但这就是 Map 所做的，新数组只是意味着与原始数组的长度相同，内容由您为正在迭代的每个元素的位置选择。

例如假设我们有一个这样的数组

let fruits = ['apple', 'banana', 'apple', 'watermelon', 'apple']

现在我想制作一个数组，其中“苹果”由 1 表示，所有其他水果由 0 表示。

让我们看看我们如何做到这一点

所以让我们先看看地图的基本语法

array.map(callback(CurrentValue, index));

让我们分解一下  
所以我们用数组开始语句，我们需要在数组上进行处理，然后我们在 map 函数中传递了一个回调函数，现在这个回调函数有 3 个参数

CurrentValue - 它是我们原始数组中的值，每次迭代都会发送到回调函数中。我们如何使用 for 循环，我们像 fruits\[i\] 一样迭代循环的每个元素，所以在这里你可以直接获得你过去使用 fruits\[i\] 获得的值。

索引 - 现在它几乎是不言自明的，它是将在其上完成处理的当前元素的索引。它是一个可选参数。

现在回到我们的问题

现在我们理解了语法，让我们看看如何获得我们想要的数组。

所以你记得这取决于我们要在新数组中被迭代的元素的位置发送什么。

所以在这个问题中我们可以做的是在回调函数中返回值，我们可以编写一个 if 条件，如果 CurrentValue 等于 apple 则返回 1，否则返回 0。

let fruits = ['apple', 'banana', 'apple', 'watermelon', 'apple']
    
    let new_fruits = fruits.map((elem)=>{
       
        
        if(elem === 'apple'){
       
        
            return

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关了解 JavaScript 中的 Map、Filter 和 ForEach

曾经发生过您想通过遍历数组对数组进行一些操作并且不知道应该使用哪个内置函数所以您只是用谷歌搜索您的问题或最近使用 Chat-GPT 并粘贴出现的任何函数或者在一天结束的时候自己

向右看齐/ 2024年03月22日 19:47/ 0 赞/ 108 阅读

相关 JavaScript中的map()和forEach()方法有什么区别？

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

╰+哭是因爲堅強的太久メ/ 2023年10月16日 18:07/ 0 赞/ 19 阅读

相关了解JavaScript中的Map和Set对象

The author selected the [Open Internet/Free Speech Fund][Open Internet_Free Speech Fund]

我就是我/ 2022年11月28日 15:29/ 0 赞/ 173 阅读

相关了解JavaScript中的箭头函数

The author selected the [COVID-19 Relief Fund][] to receive a donation as part of the [W

不念不忘少年蓝@/ 2022年11月28日 15:23/ 0 赞/ 323 阅读

相关 JavaScript（js）中forEach退出循环

JavaScript中forEach退出循环 JavaScript中forEach循环，break与return都是无法跳出循环，需要使用抛出异常的方式跳出循环代码如

缺乏、安全感/ 2022年11月20日 08:01/ 0 赞/ 215 阅读

相关【JavaScript】forEach中的坑

1. forEach不支持break 在使用for循环时可以使用break跳出循环，比如我希望找到数组中符合条件的第一个元素就跳出循环，这对于优化数组遍历是非常棒的。很遗

梦里梦外;/ 2022年11月08日 15:28/ 0 赞/ 153 阅读

相关 javascript中foreach的用法

其实在js中没有foreach关键字，只不过是通过for in来实现，如下代码： \[javascript\] [view plain][] [copy][view p

- 日理万妓/ 2022年07月13日 00:51/ 0 赞/ 253 阅读

相关 Mybatis之 foreach深入了解

这篇文章主要对foreach里面的collection相关的内容做一些介绍，围绕foreach做一些数据插入和查询相关的研究。 foreach属性 <tabl

男娘i/ 2022年05月26日 23:39/ 0 赞/ 239 阅读

相关 javascript map, forEach的区别和共同点

javascript map, forEach的区别和共同点共同点 1.都是循环遍历数组中的每一项。 2.forEach() 和 map() 里面

墨蓝/ 2022年05月21日 00:44/ 0 赞/ 290 阅读

相关 JavaScript中的forEach

语法：array.forEach(callbackfn\[, thisArg\]) 参数说明： array1 必需。一个数组对象。 callbackfn 必需。一

淩亂°似流年/ 2022年01月07日 01:49/ 0 赞/ 245 阅读