js 中数组的 map() 函数的基本使用

最新推荐文章于 2025-10-19 21:39:08 发布

原创最新推荐文章于 2025-10-19 21:39:08 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#数据结构 #算法 #javascript

一些重要笔记同时被 3 个专栏收录

28 篇文章

订阅专栏

20 篇文章

订阅专栏

算法

9 篇文章

订阅专栏

map方法用于遍历数组并返回处理后的元素，不改变原数组。它接受一个函数作为参数，对每个元素执行该函数。filter则根据函数返回的布尔值筛选数组元素，生成新数组。在需要转换数组元素时使用map，需要过滤元素时使用filter。

map() 是对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

一、定义和用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

二、语法

array.map(function(currentValue,index,arr),thisValue)

注意：返回值返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

下面是一个示例

// 正常的写法
var arr = [1, 2, 3, 4, 5];

var newArr = arr.map((item) => {
    return item * item;
})

console.log(newArr)  // [1, 4, 9, 16, 25]

// 简便解法
var arr = [1, 2, 3, 4, 5];

var newArr = arr.map(item => item * item)

console.log(newArr)

map() 接收的回调函数，可以有多个参数。通常我们仅使用第一个参数，表示数组的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身。

var arr = ['A', 'B', 'C']
var result = arr.map(function(element, index, self) {
    console.log(element) // 依次打印 'A', 'B', 'C'
    console.log(index) // 依次打印 0, 1, 2
    console.log(self) // self 就是变量 arr
    return true
})

三、map() 方法与 filter() 方法的区别

举一个简单的例子

var arr = [2, 6, 5, 1, 3, 4]

var result1 = arr.map(function (item,index,array) {
  return item>1
})

var result2 = arr.filter(function (item,index,array) {
  return item>1
})
console.log(result1) // [ true, true, true, false, true, true ]
console.log(result2) // [ 2, 6, 5, 3, 4 ]

所以，由此可以看出，map 的结果只是对当前元素调用函数后（x是否大于1）的结果。而 filter 会将结果为 true 的数组存到新的数组里面。

总结：当想改变数组的时候用 map，想对数组进行过滤用 filter