map()函数的使用

发表于 更新于 分类于 本文字数： 1.2k 阅读时长 ≈ 1 分钟

概论

map()方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成，map()方法需要return

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 箭头函数
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// 回调函数
map(callbackFn)
map(callbackFn, thisArg)

// 内联回调函数
map(function(element) { /* … */ })
map(function(element, index) { /* … */ })
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)

参数

callbackFn
生成新数组元素的函数，使用三个参数：
currentValue
callbackFn 数组中正在处理的当前元素。
index
callbackFn 数组中正在处理的当前元素的索引。
array
map 方法调用的数组。
thisArg (可选)
执行 callbackFn 函数时被用作 this 的值。

返回值

一个新数组，每个元素都是回调函数的返回值。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const arr = [
    {name:'张三',age:18,sex:'男'},
    {name:'李四',age:19,sex:'女'},
    {name:'王五',age:20,sex:'男'},
    {name:'赵六',age:21,sex:'男'},
]
arr.map( (item,index) => {
    return console.log(item,index);
})
/*
{name: '张三', age: 18, sex: '男'} 0
{name: '李四', age: 19, sex: '女'} 1
{name: '王五', age: 20, sex: '男'} 2
{name: '赵六', age: 21, sex: '男'} 3
*/