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

news2024/11/19 15:36:18

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

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

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

映射过程如下：
$\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}$
根据你的映射函数，可以实现更加复杂的映射效果。

除了 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