javascript 中的map()方法

article/2025/8/5 9:38:08

Vue全套学习免费视频:B站

小胖梅-的个人空间_哔哩哔哩_Bilibili

个人微信:renxm2023(有前端技术群  提供技术问答 )

接口数据映射

从接口得到数据 res:

let r = res.map(item => {return {title: item.name,sex: item.sex === 1? '男':item.sex === 0?'女':'保密',age: item.age,avatar: item.img}
})

map定义和方法 
map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。 
map()方法按照原始数组元素顺序依次处理元素。 
注意: 
map不会对空数组进行检测 
map不会改变原始数组 

如果没有thisvalue  默认是undefined 或者是null

 看一个例子:demo

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>map方法</title>
</head>
<body><p>点击按钮将数组中的每个元素乘以输入框指定的值,并返回新数组</p><p>最小年龄:<input type="number" id="age" value="10" /></p><button id="btn">点我</button><p id="data">新数组</p><script type="text/javascript">var btn = document.getElementById("btn");var data = document.getElementById("data");var age = document.getElementById("age");var numbers = [25,36,121,49];function myFunction(num,index,arr){console.log('arr',arr);console.log('index',index);console.log('num',num);return num * age.value;}btn.onclick = function(){data.innerHTML = numbers.map(myFunction);}</script>
</body>

页面效果:默认num=undefied 第一次

在实际应用场景中,在便利出的数据需要处理的时候用到map比较多一些,例如商品列表数据回来之后进行展示需要进行另外的操作时,如此不会改变原数组,便可实现效果

map()方法是不会改变原来的数组,也就是例子中的arr,数据处理之后会返回一个新的数组result,这两者之间没有指向关系

 举个例子:

      要求:为数组 arr 中的每个元素求二次方。不要直接修改数组 arr,结果返回新的数组 

      实现:

 function square(arr){return arr.map(function(item){return item*item;});}var arr=[1, 2, 3, 4];console.log(square(arr));结果:[1,4,9,16]


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

相关文章

详解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…

域名泛解析设置

接前一篇《MVC实现动态二级域名》&#xff0c;前面我们说道MVC如何实现动态二级域名&#xff0c;其中也涉及到DNS服务器&#xff0c;也要做相应的泛域名解析设置。所以我在这里&#xff0c;就来说道说道泛域名解析是怎么回事。 1、什么是泛域名解析 泛域名解析是指将*.域名解析…