簡介

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

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

先決條件

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

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

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

步驟 1 —— 在數(shù)組的每個項目上調用函數(shù)

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

以下是一個示例：

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

console.log(sweeterArray)

這將在控制臺中記錄以下輸出：

[ 4, 6, 8, 10, 70 ]

這可以進一步簡化，以使代碼更清晰：

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

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

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

console.log(sweeterArray);

同樣的輸出將記錄在控制臺中：

[ 4, 6, 8, 10, 70 ]

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

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

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

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

以下是一個示例：

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() 期望的函數(shù)的參數(shù)。

這類似于字符串的 .split() 方法，只是在返回數(shù)組之前可以修改每個單獨的字符串字符。

步驟 3 —— 在 JavaScript 庫中渲染列表

像 React 這樣的 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 中的一個無狀態(tài)組件，它渲染了一個帶有列表的 div。使用 .map() 迭代 names 數(shù)組來渲染單獨的列表項。此組件使用 ReactDOM 渲染到具有 Id 為 root 的 DOM 元素上。

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

.map() 可以用于遍歷數(shù)組中的對象，并且類似于傳統(tǒng)數(shù)組，修改每個單獨對象的內容并返回一個新數(shù)組。這種修改是基于回調函數(shù)中返回的內容進行的。

下面是一個例子：

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}
]

在這里，你使用了方括號和點符號來修改數(shù)組中的每個對象。這種用法可以用于在前端應用程序保存或解析接收到的數(shù)據(jù)之前對其進行處理或壓縮。

結論

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

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

最新評論