如何使用 JavaScript 地圖 - .map()

從經典的 for 循環到 forEach() 方法，JavaScript 中使用了各種技術和方法來迭代數據集。最流行的方法之一是 .map() 方法。 .map() 通過對父數組中的每個項目調用特定函數來創建數組。 。地圖（） 是一種非變異方法，它創建一個新的 js 數組，而不是 變異方法，僅對調用數組進行更改。

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

如何為數組中的每個 Item 調用 JS 函數

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

以下是一個示例：

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

此輸出被記錄到console:

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

相同的輸出被記錄到console:

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

使用 sweetArray.map(makeSweeter) 這樣的代碼可以讓你的代碼更具可讀性。

如何將 JS 字符串轉換為數組

.map() 已知屬於數組原型。在 這一步您將使用它將字符串轉換為數組。你不是 在這裏開發適用於字符串的方法。相反，您將使用 特殊的 .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)

此輸出記錄到控製台：

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

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

這與字符串的 .split() 方法類似，隻不過每個單獨的字符串字符都可以在之前修改以數組形式返回。

如何在 JavaScript 庫中渲染列表

像 React 這樣的 JavaScript 庫使用 .map() 來渲染 a 中的項目。 列表。然而，這需要 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() 迭代名稱數組來呈現各個列表項。該組件使用 ReactDOM 在 Id 為 root 的 DOM 元素上進行渲染。

如何重新格式化 JavaScript 數組對象

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

此輸出被記錄到console:

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

在這裏，您使用括號和點修改了數組中的每個對象 符號。該用例可用於處理或壓縮收到的 在前端應用程序上保存或解析之前的數據。

以上是如何使用 JavaScript 地圖 - .map()的詳細內容。更多資訊請關注PHP中文網其他相關文章！