你真的用对 Array.map() 了吗

简介: 你真的用对 Array.map() 了吗

假期过得愉快吗?快要上班啦,让我们来温习下知识,进入学习状态吧!

今天我们要说说 Array.map(),你真的知道它怎么用嘛?

有时,你可能需要接受一个数组,并对其元素应用一些过程,以便获得一个具有修改过的元素的新数组。

你可以简单地使用内置的array .map()方法,而不是使用循环来手动遍历数组。

map()方法允许您遍历数组并使用回调函数修改其元素。然后,回调函数将在数组的每个元素上执行。

例如,假设你有以下数组元素:

let arr = [3, 4, 5, 6];

现在假设需要将数组的每个元素都乘以3。你可以考虑使用如下的for循环:

let arr = [3, 4, 5, 6];
for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}
console.log(arr); // [9, 12, 15, 18]

但实际上,可以使用Array.map()方法来达到相同的结果。这里有一个例子:

let arr = [3, 4, 5, 6];
let modifiedArr = arr.map(function(element){
    return element *3;
});
console.log(modifiedArr); // [9, 12, 15, 18]

map()方法通常用于对元素应用一些更改,无论是像上面的代码中那样乘以一个特定的数字,还是执行应用程序可能需要的任何其他操作。

如何在对象数组上使用map()

例如,你可能有一个对象数组,它存储你朋友的姓和名值,如下所示:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

可以使用map()方法遍历数组,并按如下方式连接firstName和lastName的值:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];
let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})
console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

map()方法传递的不仅仅是一个元素。让我们看看map()传递给回调函数的所有参数。

完整的map()语法

map()方法的语法如下:

arr.map(function(element, index, array){  }, this);

对每个数组元素调用回调函数,map()方法总是将当前元素、当前元素的索引和整个数组对象传递给它。

这个参数将在回调函数中使用。缺省情况下,它的值是未定义的。例如,下面是如何将this值更改为数字80:

let arr = [2, 3, 5, 7]
arr.map(function(element, index, array){
  console.log(this) // 80
}, 80);

如果感兴趣,还可以使用console.log()测试其他参数:

let arr = [2, 3, 5, 7]
arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

这就是你需要知道的关于array.map()方法的全部内容。通常,你只会在回调函数中使用element参数,而忽略其他参数。这就是我在日常项目中经常做的事情。


相关文章
|
5天前
|
JavaScript API iOS开发
DeepSeek Harness下载、安装、配置一篇搞定(2026整理,送常用插件)
DeepSeek Harness(DSH)是DeepSeek于2026年开源的MIT协议AI Agent框架,支持插件化组装模型、工具、沙箱与UI,兼容主流大模型。本文提供免Node.js的桌面端安装包(Win/macOS),含详细图文教程及热门插件推荐。
2461 17
|
6天前
|
iOS开发 Docker MacOS
【2026实测】Docker Desktop下载、安装、汉化、配置教程(附官网安装包)
Docker Desktop 是 Docker 官方推出的桌面容器管理工具,集成引擎、CLI、图形界面与 Kubernetes,支持 Win/macOS/Linux。2026 最新版 4.88.1 强化 ARM 原生运行、镜像加速及资源可视化,附中文汉化与国内镜像配置指南。
1076 3
|
云安全 安全 网络安全
|
5天前
|
Linux 开发工具 iOS开发
Codex保姆级教程(下载+安装+登录+使用,含所有版本,2026最新)
Codex是OpenAI推出的开源AI编程智能体,本地运行,可理解整个代码库,支持自然语言指令改代码、执行命令、跑测试、修Bug,兼容Win/macOS/Linux。(239字)
|
6天前
|
安全 算法 定位技术
《高性价比人生指南》完整原版:普通人用最少的资源,过好这一生的底层逻辑~How To Live Better
📖《高性价比人生指南》是一份基于实证、拒绝焦虑的生存手册,倡导以“人生时薪”为视角,重新计算时间、金钱与精力的成本与收益。它不承诺逆袭,只教人算清账:省下的钱若耗掉时间便亏;买体验比买物品更值;睡眠是最高杠杆的健康投资;关系贵在情绪价值而非表面热络;学习重在改变行为而非自我安慰。核心理念:用低成本、高回报的微小行动,换取长期的选择权——不是成为谁,而是掌控自己人生的主动权。
|
18天前
|
人工智能 API 开发工具
DeepSeek Harness 神插件:白嫖 13 家大厂模型
`dsh-our-free-model` 是 DeepSeek Harness 神级插件:零配置、零API Key、零账号,聚合13家大厂免费模型(含DeepSeek V4.1 Flash、Kimi K3等),支持本地网关、用量看板与自动降级,真正实现“白嫖即用”。
3231 51
|
12天前
|
JavaScript 安全 前端开发
Nodejs Brotli decoder 代码执行漏洞 (CVE-2026-111497)10629
Node.js发布安全更新修复Brotli解码器高危RCE漏洞(CVE-2026-111497),建议受影响版本用户立即升级。
2116 2
|
11天前
|
人工智能 JSON Linux
【保姆级】ComfyUI部署教程(下载+安装+配置+工作流,2026最新)
ComfyUI 是一款开源节点式AI生成工具,支持图像、视频、音频及3D内容创作。通过拖拽连线组合模型加载、提示词、采样等节点,构建可复用、易修改的工作流,兼容SD1.5、SDXL、Flux、Qwen Image等主流模型。

热门文章

最新文章