从经典的 for 循环到 forEach() 方法，JavaScript 中使用了各种技术和方法来迭代数据集。最流行的方法之一是 .map() 方法。 .map() 通过对父数组中的每个项目调用特定函数来创建数组。 .map() 是一种非变异方法，它创建一个新的 js 数组，而不是变异方法，后者仅对调用数组进行更改。
如何为数组中的每个 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 useconst makeSweeter = sweetItem => sweetItem * 2;// we have an arrayconst sweetArray = [2, 3, 4, 5, 35];// call the function we made. more readableconst sweeterArray = sweetArray.map(makeSweeter);console.log(sweeterArray);
相同的输出被记录到console:
立即学习“Java免费学习笔记（深入）”；
Output[ 4, 6, 8, 10, 70 ]
使用 sweetArray.map(makeSweeter) 这样的代码可以让你的代码更具可读性。
如何将 JS 字符串转换为数组
.map() 已知属于数组原型。在 这一步您将使用它将字符串转换为数组。你不是 在这里开发适用于字符串的方法。相反，您将使用 特殊的 .call() 方法。
JavaScript 中的一切都是对象，方法是附加到这些对象的函数。 .call() 允许您在另一个对象上使用一个对象的上下文。因此，您可以将数组中的 .map() 上下文复制到字符串中。
.call() 可以传递要使用的上下文的参数以及原始函数参数的参数.
这是一个例如：
const name = "Sammy"const map = Array.prototype.mapconst 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 = () => ();const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);{names.map(name =>
- {name}
)}
这是一个无状态的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()的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500647.html
微信扫一扫 
支付宝扫一扫 
