JS中map()使用记录

优点和缺点

总的来说,map() 方法是一个强大的工具,适合于需要将数组中的每个元素转换为新形式的情况。然而,对于性能敏感的应用或需要更复杂控制逻辑的场景,可能需要考虑其他方法。

优点:

  1. 函数式编程风格map() 方法是函数式编程的一部分,它有助于编写简洁、声明式的代码。

  2. 链式调用map() 方法返回一个新的数组,可以与其他数组方法(如 filter()reduce()等)进行链式调用,从而创建复杂的数据处理流程。

  3. 无副作用map() 不会修改原始数组,它返回一个新的数组,因此不会产生副作用。

  4. 易于理解和维护map() 方法的使用通常比循环更直观,特别是对于熟悉函数式编程的开发者来说。

  5. 自动遍历数组:你不需要编写循环逻辑来遍历数组,map() 会自动处理。

  6. 高阶函数map() 可以接收一个函数作为参数,这使得它可以很容易地被用于各种不同的场景。

缺点:

  1. 性能问题:在处理大型数组时,map() 可能会比传统的循环慢,因为它需要创建一个新数组并存储结果。

  2. 内存使用:由于 map() 创建了一个新数组,因此在内存中同时存在原始数组和新的映射数组,这在处理大量数据时可能会成为一个问题。

  3. 无法中断:一旦开始,map() 方法会遍历整个数组,无法提前终止。如果你需要在满足某些条件时停止处理,可能需要使用其他方法,如 forEach() 或 for...of 循环。

  4. 忽略未定义的元素:如果数组中有 undefined 或 null 元素,它们会被 map() 跳过,这可能导致意外的行为,特别是如果你依赖于数组索引时。

  5. 不适用于所有数据结构map() 方法仅适用于数组,如果你需要映射其他数据结构(如对象),则需要其他方法或自定义逻辑。

  6. 回调函数必须返回值map() 方法依赖于回调函数返回一个值来构建新数组。如果回调函数没有返回值,或者返回 undefined,新数组中将会有 undefined 值。

开始使用

在JavaScript中,map() 方法是数组原型(Array.prototype)上的一个方法,它创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的返回值。map() 方法不会改变原始数组。

基础语法

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

  • callback:为每个元素执行的函数,该函数接收三个参数:
    • currentValue:数组中正在处理的当前元素。
    • index(可选):数组中正在处理的当前元素的索引。
    • array(可选):map 方法被调用的数组。
  • thisArg(可选):执行 callback 函数时值被用作 this

map() 方法返回一个新的数组,包含由原数组中的每个元素调用一次提供的函数后的返回值。

使用带有索引的回调函数

const numbers = [1, 2, 3, 4, 5];
const withIndexes = numbers.map((n, index) => `Index ${index}:${n}`);
console.log(withIndexes); // ["Index 0: 1", "Index 1: 2", "Index 2: 3", "Index 3: 4", "Index 4: 5"]

使用 thisArg 上下文

const obj = {multiplier: 2,multiplyValues: function(array) {return array.map(function(item) {return this.multiplier * item;}, this);}
};const numbers = [1, 2, 3];
const multiplied = obj.multiplyValues(numbers);
console.log(multiplied); // [2, 4, 6]

在这个例子中,thisArg 被设置为 obj,因此 callback 函数中的 this 指向 obj,允许访问 obj.multiplier

将每个数组元素乘以2

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

字符串转换成数字数组

let strings = ['10', '20', '30'];
let numbers = strings.map(function(str) {return parseInt(str, 10);
});
console.log(numbers); // 输出 [10, 20, 30]

注意事项

  • map() 不会对空数组进行检测,因此它不会改变空数组,而是返回一个新数组。
  • map() 不会改变原始数组,它返回一个新的数组。
  • 如果不提供 thisArg 参数,callback 函数中的 this 将默认指向全局对象(在非严格模式下)或 undefined(在严格模式下)。
  • 如果数组中的某个元素是 undefined 或 null,在映射过程中它们会被跳过,但仍然会出现在结果数组中。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024 微信小程序 学习笔记 第二天

1. WXML 模板语法 数据绑定 事件绑定 条件渲染 列表渲染 2. WXSS 模板样式 rpx 样式导入 全局和局部样式 3. 全局配置 window tabBar 配置tabBar案例 4. 网络数据请求 Get请求 Post 请求 加载时请求 5. 案例 -本地生活(首页) 导航栏 轮播图 九宫格效果…

webpack插件给所有的:src文件目录增加前缀

1.webpack4的版本写法 class AddPrefixPlugin {apply(compiler) {compiler.hooks.compilation.tap(AddPrefixPlugin, (compilation) > {HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(AddPrefixPlugin,(data, cb) > {// 使用正则表达式替换所有包含 /st…

【C语言】用队列实现栈

用两个队列(先进先出)实现一个栈(后进先出) 题目链接:https://leetcode.cn/problems/implement-stack-using-queues/description/ 1.C语言首先要造一个队列出来 2.两个队列实现栈,始终保持一个队列为空&…

无人机之环保监控篇

随着科技的不断进步,无人机作为一种创新的技术手段,在环保监控领域发挥着越来越重要的作用。 一、覆盖范围广 无人机能够轻松覆盖广阔的地理区域,无论是偏远的山区、广袤的森林还是大型的工业园区。相比传统的地面检测方式,其不…

关于promise的一些例题(运行步骤详细说明)

关于promise的一些例题(详细说明) 基本例题 // 直接运行 输出 1 2 const promise new Promise((resolve, reject) > {console.log(1);resolve();console.log(2); });// then后面放入微队列 promise.then(() > {console.log(3); });// 输出4 之后没有代码了所以运行为队…

vue中无法调试

vue.config.js中增加 devtool configureWebpack: {name: name,resolve: {alias: {: resolve(src)}},devtool: "cheap-module-source-map" // add},然后重启即可。 顺便招聘:1.需要会日语。2.Java,JS,Vue,DB任一会者皆…

Greenplum数据库中常用的赋予和回收权限

一 赋予表级权限: 使用GRANT语句可以向用户或角色赋予对指定表的权限。以下是一些常见的表级权限及其示例语句: 1 SELECT权限: 允许用户查询表中的数据。 GRANT SELECT ON table_name TO user_name; 2 INSERT权限: 允许用户向表中…

SpringBoot结合easypoi.excel,实现数据导出Excel

大多数业务项目中必然会遇到的一个需求&#xff0c;导出数据文件---Excel。 这里简单贴一下自己开发使用的方式方法&#xff0c;抛砖引玉。 也可小白直接大胆食用。 功能Maven依赖&#xff1a; <dependency><groupId>cn.afterturn</groupId><artifact…

mysql8.x 新增一个端口映射到当前服务(Windows)

1. 查看当前端口是否被占用。 netstat ano | findstr 33061 2.端口映射. netsh interface portproxy add v4tov4 listenport33061 listenaddress0.0.0.0 connectport3306 connectaddress192.168.1.xx 3. 创建一个用户&#xff08; myuser% %指的是所有IP都能访问&#xf…

17 敏捷开发—Scrum(2)

从上一篇 「16 敏捷开发实践&#xff08;1&#xff09;」中了解了Scrum是一个用于开发和维护复杂产品的框架&#xff0c;是一个增量的、迭代的开发过程。一般由多个Sprint&#xff08;迭代冲刺&#xff09;组成&#xff0c;每个Sprint长度一般为2-4周。下面全面介绍Scrumde 角色…

使用umi作为模板如何实现权限管理

三种权限管理的方法&#xff1a; 在做后台管理系统时&#xff0c;难免会使用到权限管理&#xff0c;权限管理方式有三种&#xff0c;分别是&#xff1a;路由、守卫、后端配合。 路由&#xff1a;通过动态路由&#xff0c;根据登录人员不同注册不同的路由&#xff0c;直接让没…

PostgreSQL 数据库 安装

1、官网下载 起源与发展&#xff1a;PostgreSQL最初起源于加州大学伯克利分校的Postgres项目&#xff0c;该项目始于1986年&#xff0c;并一直演进到1994年。在1995年&#xff0c;Postgres项目增加了SQL翻译程序&#xff0c;并更名为Postgres95。随后&#xff0c;在1996年&…

Linux:core文件无法生成排查步骤

1、进程的RLIMIT_CORE或RLIMIT_SIZE被设置为0。使用getrlimit和ulimit检查修改。 使用ulimit -a 命令检查是否开启core文件生成限制 如果发现-c后面的结果是0&#xff0c;就临时添加环境变量ulimit -c unlimited&#xff0c;之后在启动程序观察是否有core生成&#xff0c;如果…

Linux网络:传输层协议TCP(一)

目录 一、TCP协议的定义 二、确认应答机制ACK 三、序号、确认序号 四、超时重传机制 一、TCP协议的定义 TCP 全称为 "传输控制协议(Transmission Control Protocol"). 人如其名, 要对数据的传 输进行一个详细的控制; TCP 协议段格式 • 源/目的端口号: 表示数据…

GO发票真伪批量查验方法、数电票查验接口

“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”&#xff0c;识别率高、识别速度快。 发票&#xff0c;是发生的成本、费用或收入的原始凭证。于公司来说&#xff0c;发票主要是公司做账的依据&…

解决Windows 11更新错误0x800f081f的详细指南

在尝试更新Windows 11时&#xff0c;用户可能会遇到各种错误代码&#xff0c;其中之一是0x800f081f。这个错误通常与Windows更新组件或系统文件的损坏有关。本文将提供解决这一特定错误的详细步骤&#xff0c;并解释可能的原因。 错误代码0x800f081f概述 错误代码0x800f081f指…

【Devops系统】如何构建Devops系统

什么是Devops DevOps是一种软件开发和文化实践&#xff0c;它强调软件开发&#xff08;Dev&#xff09;和IT运营&#xff08;Ops&#xff09;之间的紧密合作与沟通。DevOps的目标是通过自动化软件的集成、测试、部署和监控来简化流程&#xff0c;从而加快软件交付的速度&#x…

pythonGame-实现简单的贪食蛇游戏

通过python简单复现贪食蛇游戏。 使用到的库函数&#xff1a; import pygame import time import random 游戏源码&#xff1a; import pygame import time import randompygame.init()white (255, 255, 255) yellow (255, 255, 102) black (0, 0, 0) red (213, 50, 80…

代码随想录算法训练营第四十四天|99.岛屿数量 100.岛屿的最大面积

99.岛屿数量 深搜 class Solution:def numIslands(self, grid: List[List[str]]) -> int:def dfs(i, j):if not 0 < i < m or not 0 < j < n or grid[i][j] "0":returngrid[i][j] "0"for x,y in (i1,j),(i-1,j),(i,j1),(i,j-1):dfs(x,y)…

新版海螺影视主题模板M3.1全解密版本多功能苹果CMSv10后台自适应主题

苹果CMS2022新版海螺影视主题M3.1版本&#xff0c;这个主题我挺喜欢的&#xff0c;之前也有朋友给我提供过原版主题&#xff0c;一直想要破解但是后来找了几个SG11解密的大哥都表示解密需要大几百大洋&#xff0c;所以一直被搁置了。这个版本是完全解密的&#xff0c;无需SG11加…