引言

从经典的 forloop 到 forEach ()方法,在 JavaScript 中有多种用于迭代数据集的技术和方法。 最流行的方法之一是。 Map ()方法。 . Map ()通过调用父数组中每个项的特定函数创建一个数组。 . Map ()是一个非可变方法,因为它创建一个新数组,而不是只更改调用数组的可变方法。

当使用数组时,这种方法可以有很多用途。 在本教程中,我们将看到四个值得注意的使用。 在 JavaScript 中 map () : 调用数组元素的函数,将字符串转换为数组,在 JavaScript 库中呈现列表,以及重新格式化数组对象。

对数组中的每个项调用函数

. Map ()接受一个回调函数作为其参数之一,该函数的一个重要参数是该函数正在处理的项的当前值。 这是一个必需的参数。 有了这个参数,我们可以修改数组中的每个单独的项,并从中创建一个新函数。

下面是一个例子:

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

console.log(sweeterArray) // [4, 6, 8, 10, 70]

这可以进一步简化,使其更加清晰:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

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

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray); // [4, 6, 8, 10, 70]

拥有像 sweetArray.map (makeSweeter)这样的代码会使你的代码更具可读性。

将字符串转换为数组

. Map ()已知属于 Array 原型。 让我们使用它将字符串转换为数组。 我们在这里没有开发处理字符串的方法。 相反,我们将使用特殊的。 Call ()方法。

Javascript 中的所有东西都是一个对象,而方法都是附加到这些对象上的函数。 . Call ()允许我们在另一个对象上使用一个对象的上下文。 因此,我们将复制。 将数组中的 map ()映射到字符串。

. Call ()可以传递要使用的上下文的参数和原始函数的参数。

下面是一个例子:

const name = "Sammy"
const map = Array.prototype.map

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

console.log(newName) // ["Sa", "aa", "ma", "ma", "ya"]

在这里,我们使用了。 Map () ,并传递函数的一个参数。 Map ()期望。

这个函数类似于。 的 split ()方法,该方法只允许在数组中返回每个字符串字符之前对其进行修改。

在 JavaScript 库中渲染列表

类似 React use 的 JavaScript 库。 Map ()在列表中呈现项。 但是,这需要 JSX 语法,因为。 Map ()方法用 JSX 语法包装。

下面是一个 React 组件的例子:

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);

这是 React 中的无状态组件,它呈现一个包含列表的 div。 单个列表项使用。 Map ()来迭代最初创建的名称数组。 这个组件是在 id 为 root 的 DOM 元素上使用 ReactDOM 呈现的。

重新格式化数组对象

. Map ()可用于循环访问数组中的对象,并以类似于传统数组的方式修改每个对象的内容并返回一个新数组。 此修改是根据回调函数中返回的内容进行的。

下面是一个例子:

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})


console.log(usersByLikes);
// [{shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50}]

在这里,我们使用括号和点符号修改数组中的每个对象。 此用例可用于在保存或解析前端应用程序之前处理或压缩已接收的数据。

总结

在本教程中,我们研究了。 在 JavaScript 中使用 map ()方法。 结合其他方法,可以实现。 Map ()可以扩展。 有关更多信息,请参阅如何在 JavaScript 中使用数组方法: 迭代方法文章。