如何在 JavaScript 中使用 map() 迭代数组

简介

从经典的 for 循环到 forEach() 方法，JavaScript 中有各种技术和方法用于遍历数据集。其中最流行的方法之一是 .map() 方法。.map() 通过在父数组的每个项目上调用特定函数来创建一个数组。.map() 是一个非变异方法，它创建一个新数组，而不是变异方法，变异方法只对调用数组进行更改。

在处理数组时，这种方法可以有很多用途。在本教程中，您将了解 JavaScript 中 .map() 的四个值得注意的用法：调用数组元素的函数、将字符串转换为数组、在 JavaScript 库中渲染列表以及重新格式化数组对象。

先决条件

本教程不需要任何编码，但如果您有兴趣跟随示例，可以使用 Node.js REPL 或浏览器开发者工具。

• 要在本地安装 Node.js，可以按照《如何安装 Node.js 并创建本地开发环境》中的步骤进行操作。

• 通过下载并安装最新版本的 Google Chrome，即可使用 Chrome DevTools。

步骤 1 —— 在数组的每个项目上调用函数

.map() 接受回调函数作为其参数之一，该函数的一个重要参数是正在被函数处理的项目的当前值。这是一个必需的参数。通过这个参数，您可以修改数组中的每个项目，并将其作为新数组的修改成员返回。

以下是一个示例：

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
   
    return sweetItem * 2
})

console.log(sweeterArray)

这将在控制台中记录以下输出：

[ 4, 6, 8, 10, 70 ]

这可以进一步简化，以使代码更清晰：

// 创建一个要使用的函数
const makeSweeter = sweetItem => sweetItem *