数组的Map方法详解

article/2025/8/5 9:40:07

作用

map():创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

语法

arr.map(callback(currentValue [, index [, array]]){ // Return element for new_array }[, thisArg])

  • callback:生成新数组元素的函数,该函数接收一至三个参数:
    • currentValue:数组中正在处理的当前元素。
    • index: 可选,数组中正在处理的当前元素的索引。
    • array: 可选, map 方法正在操作的数组。

thisArg: 可选,执行 callback 函数时值被用作 this

返回值:一个由原数组每个元素执行回调函数的结果组成的新数组。

  • map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。
  • callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。
  • callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
  • map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)

因为 map 生成一个新数组,当你不打算使用返回的新数组却使用请用 forEach 或者 for-of 替代。

使用示例

求数组中每个元素的平方根

const numbers = [1, 4, 9];
const roots = numbers.map(Math.sqrt);
console.log(roots); // [1, 2, 3]

上述的代码在 map 中传入了一个 Math.sqrt 然后就计算出了 numbers 每个元素的平方根,那么它是如何实现的?
看如图所示,可以发现 Math.sqrt 实际上是一个函数,然后接收一个 number 类型的参数,在此示例中可以这么认为

const roots = numbers.map(function (item) {// 这里面就是 Math.sqrt 函数做的操作,它将返回每一个 item 的平方根
});

返回的数组元素中存在 undefined

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.map(function (num, index) {if (index < 3) {return num;}
});console.log(filteredNumbers);

在 map 中改变了原数组

基础数据类型的数组,如代码与结果所示,基础类型的数组在修改 item 时并不会改变原数组。
是因为 map 方法处理数组元素的范围是在 callback 方法第一次调用之前就已经确定了。

const arr = [1, 5, 10, 15, 66, 200];const newArr = arr.map(function (item) {if (item > 15) {item += 1}return item
});console.log(arr);
console.log(newArr);

对象数组,如代码与结果所示,对象数组在修改 item 时会改变原数组

const arr = [{ name: 'wfly', age: 18 },{ name: 'fly', age: 8 },{ name: 'fnn', age: 18 },
];const newArr = arr.map(function (item) {if (item.name.includes('fly')) {item.age += 1}return item
});console.log(arr);
console.log(newArr);

使用过程中直接改变原数组

  • map 方法处理数组元素的范围是在 callback 方法第一次调用之前就已经确定了。
  • 调用 map 方法之后 追加 的数组元素不会被 callback 访问。
  • 如果存在的数组元素改变了,那么传给 callback 的值是 map 访问该元素时的值。在 map 函数调用后但在访问该元素前,该元素被删除的话,则无法被访问到。
const arr = [3, 5, 10, 15, 66, 200];const newArr = arr.map(function (item, index) {arr[index] = arr[index] + 10arr.push(999)console.log('当前 arr 的值:', arr);arr.unshift(111)return item
});console.log(arr);
console.log(newArr);

如结果所示,会发现 newArr 输出的是 [3, 13, 23, 33, 43, 53],为什么会造成这种现象,
我们在示例代码中每一次 callback 的执行,都会将原数组的 arr 对象的 index+10,同时我们每一次执行 callback 都会在给原数组 push 一个元素以及 unshift 的一个元素
当然由于 push 是在尾部添加,它不会被 callback 所访问,但是 unshift 是在头部添加,会导致原数组之前的元素每执行一次 callback 都会向后移一项
由于 callbackitem,每次都是访问当前项的元素,而恰好 3 这个元素每次都是 +10 然后向后移一项,
所以得出结果 [3, 13, 23, 33, 43, 53]

所以上述的代码示例如果没有添加 unshift 去改变原数组的话,输出的结果就是 [3, 5, 10, 15, 66, 200]

map + parseInt 问题

["1", "2", "3"].map(parseInt); // [1, NaN, NaN]

如果看完第一个示例这个问题就很容易明白,parseInt 是一个函数,但是它接受的参数是两个,所以它不会输出 [1, 2, 3],
它在处理时实际上是 parseInt(1, 0),parseInt(2, 1),parseInt(3, 2),第一项参数是数组的 item,第二个参数是当前数组的索引

正确的处理方法应该如下

['1', '2', '3'].map(str => parseInt(str));

http://chatgpt.dhexx.cn/article/pdWLAxtm.shtml

相关文章

javascript 中的map()方法

Vue全套学习免费视频&#xff1a;B站 小胖梅-的个人空间_哔哩哔哩_Bilibili 个人微信&#xff1a;renxm2023&#xff08;有前端技术群 提供技术问答 &#xff09; 接口数据映射 从接口得到数据 res: let r res.map(item > {return {title: item.name,sex: item.sex 1…

详解map(一)—— map的常用方法

前言 map是语言中常用的一个数据结构&#xff0c;其在不同语言中有着不同的实现的&#xff0c;现在我们看下在go中的底层实现。 更多内容分享&#xff0c;欢迎关注公众号&#xff1a;Go开发笔记 map源码 map的底层实现的源码位于runtime/map.go中&#xff0c;其相关方法的调…

Hive 分支判断 case函数 if函数

文章目录 CASE函数1.含义&#xff1a;2.示例&#xff1a; IF函数1.含义&#xff1a;2.示例&#xff1a; CASE函数 1.含义&#xff1a; CASE a WHEN b THEN c [WHEN d THEN e]* [ELSE f] END当a b,返回 c; 当 a d, 返回 e; 否则 返回 f 2.示例&#xff1a; emp_sex 表数据…

SQL语句--CASE函数写法的简单举例,及应用

SQL语句–CASE函数写法的简单举例&#xff0c;及应用 ---case函数的基本结构&#xff1a;case when...then...else... ----可以写也可以不写&#xff0c;按实际需求end【举个栗子_1】 eg1&#xff1a; --我想实现的效果&#xff1a; --当ID为1时&#xff0c;输出结果显示“…

MySQL:case函数和if函数的select用法(超详细)

case在select语句中的第一种用法&#xff1a; 这种写法只是针对某一个单一属性的具体值来做判断select id,name,(case sex when 0 then 男 when 1 then 女 else 未知 end)性别 from user; case在select语句中的第二种用法&#xff1a; case后面的判别依据关键字sex&#xff0c;…

oracle之case函数(case when then else end)用法

在写项目时&#xff0c;会遇到有字典项的业务&#xff0c;例如数字1代表男&#xff0c;数字2代表女&#xff0c;用做展示的时候&#xff0c;遇到对应数字就展示中文对应的男or女。 现在数据库创建一张表(message_mid)&#xff0c;字典项的字段是state&#xff1a;0代表办结&…

sql中的case函数的使用

以下内容首发于我的个人博客网站&#xff1a; http://riun.xyz/ 参考连接&#xff1a; https://www.cnblogs.com/HDK2016/p/8134802.html 一、分组时不同情况的处理 现有如下表&#xff1a; 需要按照大洲进行分组&#xff0c;最终得出如下结果&#xff1a; 可以使用case进行…

sql round函数(case函数)

注意&#xff1a;关于SELECT语句拼写注意事项 先列再纵&#xff0c;即&#xff1a;select 列 from tablename group by 纵 1. round(parm1,int parm2)&#xff1a;对parm1进行四舍五入操作&#xff0c;parm2为保留小数的有效位数&#xff1b; parm1 通常为double类型&#x…

sql中的case函数

在sql中case是一个控制流语句;类似于if语句 Case语句有两种形式:简单case语句与搜索case语句; 简单的case语句:可以检查表达式的值与一组唯一值的匹配: 语法: Case expression When value1 then returnvaluse1 When value2 then returnvaluse2 Else defaultvalue End Ca…

CASE函数

CASE函数 是一种多分支的函数&#xff0c;可以根据条件列表的值返回多个可能的结果表达式中的一个。 可用在任何允许使用表达式的地方&#xff0c;但不能单独作为一个语句执行。 分为&#xff1a; 简单CASE函数 搜索CASE函数 简单 CASE函数 1 2 3 4 5 6 CASE 测试表达式 WHE…

sql语句之case函数的用法

简单case函数语法&#xff1a; 是一种多分支的函数&#xff0c;可以根据条件列表的值返回多个可能的结果表达式中的一个。&#xff08;类似于if,else&#xff09; 简单 CASE函数&#xff1a; 计算测试表达式&#xff0c;按从上到下的书写顺序将测试表达式的值与每个WHEN子句的…

【MYSQL快速入门】case函数

case函数&#xff1a; 是一种多分支的函数&#xff0c;可以根据条件列表的值返回多个可能的结果表达式中的一个。 简单case函数&#xff1a; case 测试表达式 when 简单表达式1 then 结果表达式1 when 简单表达式2 then 结果表达式2.. when 简单表达式3 then 结果表达式n [e…

三分钟搞懂SQL的Case函数

文章标题 前言一: 使用语法作用一: 结合分组统计数据作用二: 分条件更新字段值作用三: 检查表中字段值是否一致作用四: 行转列(重点-面试常见)五:普通case函数和搜索case函数的区别六:总结 温馨提示: 本文大约1832字,阅读完大概需要2-3分钟,希望您能耐心看完,倘若你对该知识点已…

域名泛解析设置方法

域名泛解析是指&#xff1a;利用 *&#xff08;星号&#xff09;来做次级域名以实现所有的次级域名均指向同一 IP 地址。 例如你的域名是 a.com,设置泛解析&#xff08;.a.com&#xff09;后&#xff0c;所有该域名下的次级域名&#xff08;如 b.a.com&#xff09;都将指向与 a…

服务器泛解析网站,网站域名解析教程

我们这篇文章就讲一下域名解析的教程&#xff0c;在讲之前先介绍一些基础的概念&#xff0c;对域名解析过程有一个理解。 下面这段看不明白没关系&#xff0c;看不懂直接不看&#xff0c;跟着下面教程操作就可以了。 我们都知道&#xff0c;访问一个网站输入域名&#xff0c;比…

linux系统如何绑定域名解析,Linux系统网站如何站点部署域名泛解析绑定

做过站群或绑定多个二级域名的技术人员都知道&#xff0c;在windows下如果可绑定多个二级域名&#xff0c;一般都会用到默认站点的空主机头&#xff0c;只有绑定了80端口的空主机头&#xff0c;才可实现多个二级域名的绑定&#xff0c;或指定目录或301转发。但是&#xff0c;服…

Nginx服务器php自动进行二级域名泛解析

Nginx服务器php自动进行二级域名泛解析: 目录&#xff1a;想要实现多用户博客系统泛解析二级域名【以baidu.com为例】 例如&#xff1a;用户qulinke1230注册了一个账号&#xff0c;那么他可以通过【qulinke1230.baidu.com】格式访问他的博客 实现&#xff1a; 1、首先要在你的域…

子域名爆破的泛解析问题

字节跳动——渗透测试实习生面试题&#xff1a;信息收集如何处理子域名爆破的泛解析问题&#xff1f; 一、什么是域名泛解析 利用通配符* &#xff08;星号&#xff09;来做次级域名以实现所有的次级域名均指向同一IP地址。在域名前添加任何子域名&#xff0c;均可访问到所指向…

域名泛解析什么意思?怎么设置?

域名泛解析什么意思 在域名前添加任何子域名&#xff0c;均可访问到所指向的网站。也就是客户的域名yfi6.com之下所设的*.yfi6.com全部域名均可访问。 域名泛解析怎么设置 泛域名解析是指将*.域名解析到同一IP。 泛域名解析和域名解析有何不同&#xff1f; 泛域名解析是指&a…