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 打开控制台,复制代码进入控制台尝试,或者直接搜索引擎或机器人查找相关用法即可