JavaScript 学习-map方法

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

上一篇文章学到数组的遍历方法 forEach(), 但是还是有点小问题的. 另更多更文学习了 JavaScript 中的 【ES6 - for/of】、【JS-特殊符号-位运算符】、【JS-逻辑运算符-短路了?】、 【JavaScript-箭头函数】、

本文来继续学习 JavaScript 中一些其他遍历迭代的方法: 数组的常用遍历方法: map(), 在实际工作中经常用到的一种方法.

JavaScript map()

文档: Array.prototype.map() | MDN

在 JavaScript 中对一些数据进行遍历迭代的方法有很多,学到的有for/in/for/of/forEach, 可简单记下: for/in 遍历对象 <--> for/of 遍历数组. 而forEach()书写更方便.

map() | MDN 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

首先来看下最简单的使用方法: 代码如下:

const array = [1, 2, 3, 5, 8]

array.map((item) => {
  // 这里输出数组的每一项元素:
  console.log(item)
})
// 依次输出: 1, 2, 3, 5, 8

const map1 = array.map((item) => item * 2)
console.log(map1)
// [2, 4, 6, 10, 16]
console.log(array)
// [1, 2, 3, 5, 8]

从上面的代码可以看出, map() 方法并不会改变原数组, 还可以使用map()方法对数组进行定制化复制: 比如上面把原数组的每一项乘于 2 赋值给 map1

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。

map()方法的返回值

使用 map() 有返回值: 一个由原数组每个元素执行回调函数的结果组成的新数组。

map() 方法作用:

复制数据(数组): 可以使用 map 对数组的每一项进行重新格式化后并返回..

这里有一道经典的面试题:

;['1', '2', '3'].map(parseInt)

就是这一行简单的代码, 期望输出 [1, 2, 3], 而实际结果是 [1, NaN, NaN], 这里面的问题就是 map 和 parseInt 的参数问题, 详细解释可查看开头的 MDN 文档进行学习