【读完掌握】JavaScript 中 Array.prototype.map() 的定义、特点、易错点、使用技巧 返回undefined的解决方法

mu# JavaScript中 Array.prototype.map() 使用的注意点

如果读者对 map()函数的定义很熟悉的话，直接跳到特点部分。

定义

map()方法创建一个新数组，并且这个数组中的每个元素是调用一次提供的函数后的自己值

解读

注意，在map()方法中，我们需要一个函数作为参数，并且，需要一个 返回值 作为新数组中的元素。

语法

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
   
 // Return element for new_array 
}[, thisArg])

参数

callback

生成新数组元素的函数，使用三个参数：

• currentValue

  callback 数组中正在处理的当前元素。

• index可选

  callback 数组中正在处理的当前元素的索引。

• array可选

  map 方法调用的数组。

thisArg可选

执行 callback 函数时值被用作this。

返回值

一个由原数组每个元素执行回调函数的结果组成的新数组

特点

与foreach()的区别

• foreach()函数对原数组进行直接操作，并且返回 undefined
• map()函数的回调函数必须有返回值，作为新数组的元素
• map() 函数对原数组不会造成影响

容易犯的错误

1. 回调函数中没有返回值

   比如我们需要对某个数组进行操作的时候，用到了下述函数，最终会得到一个元素都是undefined的新数组: