你真的用对 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参数,而忽略其他参数。这就是我在日常项目中经常做的事情。


相关文章
|
安全 调度 虚拟化
阿里云郑晓:浅谈GPU虚拟化技术(第三章)
本系列文章推送门: 阿里云郑晓:浅谈GPU虚拟化技术(第一章) GPU虚拟化发展史 阿里云郑晓:浅谈GPU虚拟化技术(第二章)GPU虚拟化方案之——GPU直通模式  今天一个小伙伴@我说:“你浅谈一下,没点技术背景的,估计都看不懂…”,醍醐灌顶啊,面向公众的文章不是学术论文,应以普及基本概念为主。
20708 1
|
算法 Unix Linux
linux线程调度策略
linux线程调度策略
608 0
|
人工智能 自然语言处理 API
Cline:29.7K Star!一文详解VSCode最强开源AI编程搭子:一键生成代码+自动跑终端+操控浏览器...
Cline 是一款集成于 VSCode 的 AI 编程助手,支持多语言模型,实时检查语法错误,帮助开发者提高编程效率。通过智能化手段,Cline 可以生成代码、执行终端命令、调试 Web 应用,并扩展更多功能。
7181 74
|
IDE 开发工具 Android开发
在Windows和macOS平台,自主编译Qt Creator和Qt Designer源码
在Windows和macOS平台,自主编译Qt Creator和Qt Designer源码
1243 0
|
安全 Linux 数据安全/隐私保护
探索 Linux 高级进程间通讯 D-Bus的神秘妙用
探索 Linux 高级进程间通讯 D-Bus的神秘妙用
2534 1
|
关系型数据库 MySQL 程序员
程序员性能之道,从使用perf开始!
程序员性能之道,从使用perf开始!
|
监控 Android开发
[RK3568 Android11]火焰图详解
[RK3568 Android11]火焰图详解
811 0
[RK3568 Android11]火焰图详解
|
芯片 C++ 异构计算
DDR的Controller、Channel、Chip、Rank、Bank、Row、Column、Sided
DDR的Controller、Channel、Chip、Rank、Bank、Row、Column、Sided
6573 0
DDR的Controller、Channel、Chip、Rank、Bank、Row、Column、Sided
休眠与唤醒
休眠与唤醒
406 0