如何使用JavaScript map遍历数组

从经典for循环到forEach函数，你可使用了各种技术和方法来遍历数组在JavaScript。最流行的方法之一是map函数。

map函数通过对指定组中的每个元素调用指定的函数来创建数组。map函数不会改变原始数组，它会创建一个新数组，它只对数组的元素进行更改并返回。

这种方法在处理数组时有很多用途。在本教程中，您将了解.map()中四个值得注意的用法。

包括调用数组元素的函数、将字符串转换为数组、在 JavaScript库中呈现列表以及重新格式化数组对象。

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

要在本地安装Node.JS，您可以按照如何安装Node.js和创建本地开发环境的步骤进行操作。你也可以使用浏览器的开发者工具。

遍历数组元素

.map()接受回调函数作为其参数之一，回调函数的一个重要参数是正在处理的元素当前值。

这是一个必需的参数。使用此参数，您可以修改数组中的每个元素，返回的元素将会作为新数组的元素。如果map函数中没有返回值，将会默认返回undefined。

例如在以下示例中，如果你去掉语句return myfreaxItem * 2中的return关键词，myfreaxArray的元素将会包含undefined的元素。

const myfreaxArray = [2, 3, 4, 5, 35]
const myfreaxArray = myfreaxArray.map(myfreaxItem => {
    return myfreaxItem * 2 // 如果此处没有返回值，myfreaxArray元素将会包含
})

console.log(myfreaxArray)

Output[ 4, 6, 8, 10, 70 ]

这可以进一步简化以使其更加简洁，您的代码更具可读性。然而我们基本不会这样写，经常使用的箭头函数，并不会将map的回调函数命名，这样做好处可以方便找到错误的位置。

这里说明以下代码的含义，const convertToEven = value => value * 2;这将使用箭头函数，创建一个命名函数convertToEven。

箭头函数的函数体在没有中括号{}.时，默认当作为返回值，value * 2 的值将会被返回，并成为myfrreaxNewArray的元素。

const myfreaxArray = [2, 3, 4, 5, 35];这将会创建一个新的数组，const myfrreaxNewArray = myfreaxArray.map(convertToEven); 这将遍历myfreaxArray的元素，并调用函数convertToEven。

console.log(myfrreaxNewArray);最后是打印map创建的数组myfrreaxNewArray。

// create a function to use
const convertToEven = value => value * 2;

// we have an array
const myfreaxArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const myfrreaxNewArray = myfreaxArray.map(convertToEven);

console.log(myfrreaxNewArray);

将字符串转换为数组

map函数属于数组原型的方法。在此本节中，您将使用它将字符串转换为数组。在字符串中没有map函数。相反，您将使用.call()方法。

JavaScript中的一切都是对象，包括函数也是对象。每个函数对象都存在一个原型方法call。call()方法使用一个指定的上下文this和指定一个或多个参数来调用函数。

在以下示例中，将会指定map函数的上下文为name变量并调用map函数，eachLetter => {}是map函数的回调函数。

这类似于字符串的split方法，使用这种方式可以在将字符串创建数组之前进行修改。如果使用split方法，你可能需要再次调用map函数对每个字符进行修改。

const name = "myfreax.com"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}`
})

console.log(newName)

在React遍历数组

你也可以在React中使用map函数变量数组生成react的组件。但是，这需要JSX语法，因为.map()方法仅在在JSX语法可用。

这是React中的一个无状态组件，这将渲染一个列表li。并为每个li标签，设置key，其文本元素的names数组的元素。

在jsx的语法中，map可以遍历你自定义的组件，不只是HTML的元素。

import React from "react";
import ReactDOM from "react-dom";

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

遍历数组对象

.map()可用于遍历数组中的对象，并以与传统数组类似的方式修改每个单独对象的内容并返回一个新数组。

在这里，您使用括号和点表示法修改了数组中的每个对象。此用例可用于在将接收到的数据保存或解析到前端应用程序之前对其进行处理或压缩。

const myfreaxUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myfreaxUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.age = item.name.length * 10;
    return container;
})
console.log(usersByLikes);

Output[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

结论

在本教程中，我们讨论JavaScript .map()方法的四种用法。，并结合call方法扩展.map()函数。