JavaScript中的map()方法详解

1. map() 的返回值是一个新的数组,新数组中的元素为 “原数组调用函数处理过后的值”

2. 简单使用:遍历整个数组,将大于4的元素乘以2

const array = [2, 3, 4, 4, 5, 6]

console.log("array",array)
const map = array.map(x => {
    if (x == 4) {
        return x * 2
    }
    return x
})

console.log("map",map)

输出的结果为:等于4的元素乘以2

3. map()函数的参数详解

一般参数是一个回调函数
array.map((item,index,arr)=>{
	//item是操作的当前元素
	//index是操作元素的下表
	//arr是需要被操作的元素
	//具体需要哪些参数 就传入那个
})
 const array = [2, 3, 4, 4, 5, 6]
 console.log("原数组array为",array)
 const map2=array.map((item,index,arr)=>{
            console.log("操作的当前元素",item)
            console.log("当前元素下标",index)
            console.log("被操作的元素",arr)
            //对元素乘以2
            return item*2
 })
 console.log("处理之后先产生的数组map",map2)

输出的结果为:

4. 总结:map()方法经常拿来遍历数组,但是不改变原数组,但是会返回一个新的数组;

5.注意:有时候会出现这种现象,出现几个undefined

 const array = [2, 3, 4, 4, 5, 6]
 console.log("原数组array为",array)
 const map = array.map(x => {
            if (x == 4) {
                return x * 2
            }
  })

其实,map()方法是对每一项数组进行遍历,遍历一次,返回一个值,给新数组加上一个元素,这是就是满足x=4的元素,只有两个,所以其他项就返回了undefined。

6、map()方法是数组对象自带的方法,用于遍历数组中的每个元素,并对每个元素执行指定的函数,然后返回一个新的数组,包含所有函数的返回值。

在JavaScript中,map()方法是数组对象自带的方法,用于遍历数组中的每个元素,并对每个元素执行指定的函数,然后返回一个新的数组,包含所有函数的返回值。

map()方法的语法如下:

array.map(function(currentValue, index, arr), thisValue)

在JavaScript中,map()方法是数组对象自带的方法,用于遍历数组中的每个元素,并对每个元素执行指定的函数,然后返回一个新的数组,包含所有函数的返回值。

map()方法的语法如下:

 

Copy code

array.map(function(currentValue, index, arr), thisValue)

其中,function(currentValue, index, arr)是一个回调函数,它可以接受三个参数:

  • currentValue: 当前正在处理的元素
  • index: 当前正在处理的元素的索引
  • arr: 调用 map() 方法的数组

另外,thisValue是可选的参数,用于设置回调函数中this的值。

下面是一个简单的例子,演示了如何使用map()方法:

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8]

在该例子中,我们将数组numbers中的每个元素都乘以2,然后返回一个新的数组doubledNumbers

希望可以帮到大家;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/566693.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

nfs网络存储配置

准备:yum install rpcbind yum install nfs-server 一台服务器:192.168.220.131 一台客户端:192.168.220.220 服务器: 先启动rpcbind服务:systemctl restart rpcbind 在启动…

B站下行CDN架构的探索与应用

本期作者 背景介绍 B站的下行CDN旧架构如下图所示,可以看到边缘CDN节点与中心调度服务有紧密协作,简单说是先由调度服务进行流量调度(负责均衡的调度到每个网关组件节点),再由回源组件进行集群内的回源收敛,最终到对应…

Rust-01 Hello Rust 10分钟上手编写第一个Rust程序 背景介绍 发展历史 环境配置 升级打怪的必经之路

背景介绍 Rust 是一种多范式、通用的编程语言,强调性能、类型安全和并发性。它通过一个称为“借用检查器”的机制在编译时追踪所有引用的对象生命周期,以强制实现内存安全,即确保所有引用都指向有效的内存,而不需要垃圾收集器。 …

Qwen1.5微调

引子 由于工作上需要,一直在用Qwen做大模型推理,有个再训练的需求,特此琢磨下Qwen的训练。OK,我们开始吧。 一、安装环境 查看显卡驱动版本 根据官网推荐 OK,docker在手,天下我有。 docker pull qwenll…

白酒:馥郁香型白酒的香气特点与生产工艺

云仓酒庄的豪迈白酒介绍到,馥郁香型白酒以其与众不同的香气特点和杰出的生产工艺赢得了消费者的青睐。馥郁香型白酒以其香气浓郁、口感醇厚、回味悠长而著称。下面云仓酒庄豪迈白酒将深入探讨馥郁香型白酒的香气特点与生产工艺。 云仓酒庄豪迈白酒讲诉,馥…

go语言并发实战——日志收集系统(六) 编写日志收集系统客户端

上节回顾 在上一篇文章中我们介绍了编写客户端的四个步骤,分别是: 读取配置文件,寻找日志路径初始化服务根据日志路径l来收集日志将收集到的日志发送Kafka中 关于上述的内容博主画了一个思维导图(有点丑,大家勉强看看&#xff0…

flutter 设置启屏页 flutter_native_splash 坑记录

flutter_native_splash | Flutter packageCustomize Flutters default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.https://pub.dev/packages/flutter_native_splash 发现一直白屏 原因是 代码中 下面…

关于Developers网站的一些使用分享

Android Developers 官网使用分享 语音切换android studio 版本下载最新版本下载位置历史版本下载位置 android studio 版本和 AGP 对应关系API 和 android studio 版本和 AGP 对应关系android studio 版本android 版本API levelandroid.hardware.camera2 语音切换 Developers…

要养生也要时尚,益百分满足你的所有需求

要养生也要时尚,益百分满足你的所有需求 艾灸是个好东西,尤其是在近几年的时候,艾灸就像一阵浪潮席卷进了人们的日常生活之中,我们可以在街边看到大大小小的艾灸馆,有些评价比较高的艾灸馆门前甚至还排起了长长的队伍…

在数字化转型过程中,企业的资产管理需要做出哪些调整?

在数字化转型过程中,企业的资产管理做出调整的常见于以下几个方面: 1、提高工作效率:数字化转型能够让员工在部门与部门之间的沟通更加顺畅,节省时间,提高效率。这要求企业在资产管理中采用数字化工具和流程&#xff…

《Chain-of-Thought Prompting Elicits Reasoning in Large Language Models》【大模型思维链】

目录 前言一、思维链介绍1-1、指令1-2、逻辑依据1-3、示例 二、Cot一般分类2-1、Zero-Shot-CoT2-2、Few-Shot-CoT 三、Cot的好处&缺陷&适用3-1、Cot的好处3-2、Cot的缺陷3-3、Cot的适用 四、变体4-1、自我验证(self-consistency checking) 总结 …

【剪映专业版】03立体自动翻页

【剪映专业版】立体自动翻页制作 1.导入素材,图片或视频均可 2.将素材2拖动至素材1的上方,点击蒙版,选择线性蒙版,并旋转为90度。 3.复制素材1,并拖动到素材2上方,分割并删除后半部分,点击蒙版…

WebGL绘制和变换三角形

1、绘制多个点 构建三维模型的基本单位是三角形。不管三维模型的形状多么复杂,其基本组成部分都是三角形,只不过复杂的模型由更多的三角形构成而已。 gl.vertexAttrib3f()一次只能向顶点着色器传入一个顶点,而绘制三角形、矩形和立方体等&am…

【MySQL 数据宝典】【磁盘结构】- 005 Undo log 撤销日志

一、基本介绍 ​ 每当我们要对一条记录做改动时(这里的改动可以指 INSERT 、 DELETE 、 UPDATE ),都需要留一手 -> 把回滚时所需的东西都给记下来 ​ 你插入一条记录时,至少要把这条记录的主键值记下来,之后回滚的…

【Redis】set 数据类型

文章目录 常用命令sadd & smemberssismember & scardspopsmove & srem 多个集合间的交互命令交集 & sinter & sinterstore并集 & sunion & sunionstore差集 & sdiff & sdiffstore 内部编码 集合类型也是保存多个字符串类型的元素的&#x…

【电控笔记5.6】Butterworth滤波器

Butterworth滤波器 需求:在增益交越频率拥有最小的相位滞后 波器经常被使用原因是 Butterworth 滤波器对于给定阶数,拥有最倾斜的衰减率而在伯德图又不会产生凸峰,同时在低频段的相位滞后小,因此本节将为各位介绍 Butterworth 低…

基于SSM的在线家教管理系统(含源码+sql+视频导入教程)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的在线家教管理系统1拥有三种角色 管理员:学生管理、老师管理、发布管理、留言管理、回复管理、订单管理等教师:我的订单、我的关注、查看回复留言、登录注…

使用 Docker 部署 Draw.io 在线流程图系统

1)介绍 Draw.io GitHub:https://github.com/jgraph/drawio Draw.io 是一款开源的绘制流程图的工具,拥有大量免费素材和模板。程序本身支持中文在内的多国语言,创建的文档可以导出到多种网盘或本地。无论是创建流程图、组织结构图…

手拿滑块撕瑞数,我叫超弟你记住!腾讯滑块2024.4.23最新版,高复用,看到就是赚到,珍惜资源首次公开!!!

众所周知,腾讯阿里系安全属于国内天花板,让很多同行望眼欲穿,却束手无策,我们小团队因业务需要,一直都有现成的解决方案,有需求的朋友可以私信,后续准备办一个商学院,完全分享行内超…

基于java,SpringBoot和HTML实验室预约管理系统设计

摘要 本研究旨在设计并实现一个基于Java, Spring Boot和HTML的实验室预约管理系统,以解决实验室资源分配不均、管理混乱和预约流程繁琐等问题。系统采用B/S架构设计,后端使用Spring Boot框架进行开发,前端使用HTML进行页面设计,实…