簡(jiǎn)介

從經(jīng)典的 for 循環(huán)到 forEach() 方法，JavaScript 中有各種技術(shù)和方法用于遍歷數(shù)據(jù)集。其中最流行的方法之一是 .map() 方法。.map() 通過(guò)在父數(shù)組的每個(gè)項(xiàng)目上調(diào)用特定函數(shù)來(lái)創(chuàng)建一個(gè)數(shù)組。.map() 是一個(gè)非變異方法，它創(chuàng)建一個(gè)新數(shù)組，而不是變異方法，變異方法只對(duì)調(diào)用數(shù)組進(jìn)行更改。

在處理數(shù)組時(shí)，這種方法可以有很多用途。在本教程中，您將了解 JavaScript 中 .map() 的四個(gè)值得注意的用法：調(diào)用數(shù)組元素的函數(shù)、將字符串轉(zhuǎn)換為數(shù)組、在 JavaScript 庫(kù)中渲染列表以及重新格式化數(shù)組對(duì)象。

先決條件

本教程不需要任何編碼，但如果您有興趣跟隨示例，可以使用 Node.js REPL 或?yàn)g覽器開(kāi)發(fā)者工具。

• 要在本地安裝 Node.js，可以按照《如何安裝 Node.js 并創(chuàng)建本地開(kāi)發(fā)環(huán)境》中的步驟進(jìn)行操作。

• 通過(guò)下載并安裝最新版本的 Google Chrome，即可使用 Chrome DevTools。

步驟 1 —— 在數(shù)組的每個(gè)項(xiàng)目上調(diào)用函數(shù)

.map() 接受回調(diào)函數(shù)作為其參數(shù)之一，該函數(shù)的一個(gè)重要參數(shù)是正在被函數(shù)處理的項(xiàng)目的當(dāng)前值。這是一個(gè)必需的參數(shù)。通過(guò)這個(gè)參數(shù)，您可以修改數(shù)組中的每個(gè)項(xiàng)目，并將其作為新數(shù)組的修改成員返回。

以下是一個(gè)示例：

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

console.log(sweeterArray)

這將在控制臺(tái)中記錄以下輸出：

[ 4, 6, 8, 10, 70 ]

這可以進(jìn)一步簡(jiǎn)化，以使代碼更清晰：

// 創(chuàng)建一個(gè)要使用的函數(shù)
const makeSweeter = sweetItem => sweetItem * 2;

// 我們有一個(gè)數(shù)組
const sweetArray = [2, 3, 4, 5, 35];

// 調(diào)用我們創(chuàng)建的函數(shù)。更易讀
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

同樣的輸出將記錄在控制臺(tái)中：

[ 4, 6, 8, 10, 70 ]

像 sweetArray.map(makeSweeter) 這樣的代碼使您的代碼更易讀。

步驟 2 —— 將字符串轉(zhuǎn)換為數(shù)組

.map() 被認(rèn)為屬于數(shù)組原型。在這一步中，您將使用它將字符串轉(zhuǎn)換為數(shù)組。在這里，您不是為字符串開(kāi)發(fā)該方法。相反，您將使用特殊的 .call() 方法。

在 JavaScript 中，一切都是對(duì)象，方法是附加到這些對(duì)象的函數(shù)。.call() 允許您在另一個(gè)對(duì)象上使用一個(gè)對(duì)象的上下文。因此，您將在字符串上復(fù)制 .map() 的上下文，并傳遞給 .call() 方法的函數(shù)參數(shù)。

以下是一個(gè)示例：

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

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

console.log(newName)

這將在控制臺(tái)中記錄以下輸出：

[ "Sa", "aa", "ma", "ma", "ya" ]

在這里，您在字符串上使用了 .map() 的上下文，并傳遞了 .map() 期望的函數(shù)的參數(shù)。

這類(lèi)似于字符串的 .split() 方法，只是在返回?cái)?shù)組之前可以修改每個(gè)單獨(dú)的字符串字符。

步驟 3 —— 在 JavaScript 庫(kù)中渲染列表

像 React 這樣的 JavaScript 庫(kù)使用 .map() 來(lái)渲染列表。但是，這需要 JSX 語(yǔ)法，因?yàn)?nbsp;.map() 方法被包裝在 JSX 語(yǔ)法中。

以下是一個(gè) 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 中的一個(gè)無(wú)狀態(tài)組件，它渲染了一個(gè)帶有列表的 div。使用 .map() 迭代 names 數(shù)組來(lái)渲染單獨(dú)的列表項(xiàng)。此組件使用 ReactDOM 渲染到具有 Id 為 root 的 DOM 元素上。

步驟 4 — 重新格式化數(shù)組對(duì)象

.map() 可以用于遍歷數(shù)組中的對(duì)象，并且類(lèi)似于傳統(tǒng)數(shù)組，修改每個(gè)單獨(dú)對(duì)象的內(nèi)容并返回一個(gè)新數(shù)組。這種修改是基于回調(diào)函數(shù)中返回的內(nèi)容進(jìn)行的。

下面是一個(gè)例子：

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

這個(gè)輸出被記錄在控制臺(tái)中：

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

在這里，你使用了方括號(hào)和點(diǎn)符號(hào)來(lái)修改數(shù)組中的每個(gè)對(duì)象。這種用法可以用于在前端應(yīng)用程序保存或解析接收到的數(shù)據(jù)之前對(duì)其進(jìn)行處理或壓縮。

結(jié)論

在本教程中，我們介紹了 JavaScript 中 .map() 方法的四種用法。結(jié)合其他方法，可以擴(kuò)展 .map() 的功能。欲了解更多信息，請(qǐng)參閱我們的《如何在 JavaScript 中使用數(shù)組方法：迭代方法》文章。

到此這篇關(guān)于如何在JavaScript中使用map()迭代數(shù)組的文章就介紹到這了,更多相關(guān)JS用map()迭代數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論