关于 JavaScript 数组的遍历函数:map, reduce, filter 等

本文介绍了JavaScript中map,reduce,filter,find和findIndex等数组遍历方法,展示了如何使用这些函数进行列表映射、求和、筛选和查找,以及如何在浏览器控制台中实践这些功能。
摘要由CSDN通过智能技术生成

JavaScript 列表的 map 方法是一个常用的数组遍历方法,将会对每一个列表中的元素都应用所给的转换方法,也就是 u => (...),这是 ES6 中匿名函数的表达式写法,在这种使用场景中是一种非常方便的语法糖,map 方法在遍历的过程中,都会将每个元素作为参数传入这个匿名函数中,由形参 u 所接收,最后将匿名函数的返回值替换作为当前位置的新的元素,也就是一个 map 映射的过程。

例如下面的一个简单的映射,将列表的每个值增加 1 1 1

let foo = x => x  + 1;
let a = [1,2,3,4,5];
a = a.map(foo)														// [2,3,4,5,6]

映射过程如下:
[ e 1 , e 2 , e 3 , … , e n ] ⇒ [ f o o ( e 1 ) , f o o ( e 2 ) , f o o ( e 3 ) , … , f o o ( e n ) ] \begin{aligned} &[e_{1}, e_{2}, e_{3},\dots,e_{n}] \Rightarrow[foo(e_{1}), foo(e_{2}), foo(e_{3}),\dots,foo(e_{n})] \end{aligned} [e1,e2,e3,,en][foo(e1),foo(e2),foo(e3),,foo(en)]
根据你的映射函数,可以实现更加复杂的映射效果。

除了 map 函数之外,reduce, filter, find, findIndex 等也都是我们常用的列表遍历函数,最好的尝试方式就是直接在浏览器(建议最新版的谷歌或者Edge)F12 进入开发者模式,在 控制台(Console) 中你可以尝试任何的 JavaScript 表达式,以及函数等,并且浏览器会提示一个对象所有可以使用的属性或者方法:

浏览器 F12 调试

其他列表遍历方法的简单用法介绍如下,用法见注释:

let a = [4, 90, 58, 12, 76, 53];

// reduce(func..., init)
// func 可以接受 4 个参数:
//		prev: 上次的返回值
//		cur: 当前遍历到的数组元素
//		index: 当前遍历到的下标
//		arr: 数组的引用,即数组本身
// init 为初始化的 prev 值
let sum = a.reduce((prev, cur, index, arr) => prev + cur, 0);		// 293

// filter(func...)
// func 接受 1 个参数,就是当前遍历的数组元素,返回 true 则保留,反之过滤
let a_evens = a.filter(i => i % 2 == 0)								// [4, 90, 58, 12, 76]

// find(func...)
// func 参数为当前遍历元素,函数返回值为 true 则立即返回当前元素,停止遍历
let find_result = a.find(i => i > 50)								// 90

// findIndex(func...)
// 效果同 func,但是返回值为第一个匹配的数组元素的 index,不返回数组元素本身
let find_result = a.findIndex(i => i > 50)							// 1

其他列表遍历的函数可以参考上述函数的例子,可以直接 F12 打开控制台,复制代码进入控制台尝试,或者直接搜索引擎或机器人查找相关用法即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值