把JS中的map方法玩出花来
一 map是什么
map(callbackFn)
map(callbackFn, thisArg)map() 方法是一个迭代方法。它为数组中的每个元素调用一次提供的 callbackFn 函数,并用结果构建一个新数组。
参数
callbackFn
数组中的每个元素执行的函数。它的返回值作为一个元素被添加为新数组中。该函数被调用时将传入以下参数:
element
数组中当前正在处理的元素。
index 可选
正在处理的元素在数组中的索引。
arrary 可选
调用了 map() 的数组本身。
thisArg 可选
执行 callbackFn 时用作 this 的值。参见迭代方法。
返回值
一个新数组,每个元素都是回调函数的返回值。
示例
1.下面的代码创建了一个新数组,值为原数组中对应数字的平方根。
const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));// roots 现在是 [1, 2, 3]
// numbers 依旧是 [1, 4, 9]
2.以下代码使用一个包含对象的数组来重新创建一个格式化后的数组。
(1).
const arrayUsers = [{id: 1,username: "Magic",address: "Johnson",},{id: 2,username: "Kobe",address: "Bryant",},{id: 3,username: "Lebron",address: "James",},{id: 4,username: "Kareem",address: "Abdul-Jabbar",},{id: 5,username: "Shaquille",address: "O’Neal",},
];
const newUsers = arrayUsers.map((item) => item.username);
console.log(arrayUsers);
// [
// { id: 1, username: 'Magic', address: 'Johnson' },
// { id: 2, username: 'Kobe', address: 'Bryant' },
// { id: 3, username: 'Lebron', address: 'James' },
// { id: 4, username: 'Kareem', address: 'Abdul-Jabbar' },
// { id: 5, username: 'Shaquille', address: 'O’Neal' }
// ]
console.log(newUsers); // [ 'Magic', 'Kobe', 'Lebron', 'Kareem', 'Shaquille' ]
(2).
const kvArray = [{ key: 1, value: 10 },{ key: 2, value: 20 },{ key: 3, value: 30 },
];const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
// { key: 1, value: 10 },
// { key: 2, value: 20 },
// { key: 3, value: 30 }
// ]
3. 回调数组中的部分素
const arrayNumbers = [1, 2, 3, 4];
const doubles = (nums) => nums.map((num) => (num % 2 === 1 ? num * 2 : num));
console.log(arrayNumbers); // [ 1, 2, 3, 4 ]
console.log(doubles(arrayNumbers)); // [ 2, 2, 6, 4 ]
4.在非数组上使用map
const arrayLike = {length: 3,0: 2,1: 3,2: 4,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]
map() 方法读取 this 的 length 属性,然后访问每个整数索引。不能直接使用map()方法。
5.将字符串转换为数组。
const language = "China";
const map = Array.prototype.map;
const letters = map.call(language, (eachLetter) => `${eachLetter}`);console.log(letters); // [ 'C', 'h', 'i', 'n', 'a' ]
与上例子还是有点区别的。
6.数组与对象数组
(1).
let myperson= ['xiaoli','xiaona','xiaoyu','xiaozhu']
let newArr = myperson.map((name) => ({name:name}))
console.log(newArr);(4) [{…}, {…}, {…}, {…}]0:
{name: 'xiaoli'}
1:
{name: 'xiaona'}
2:
{name: 'xiaoyu'}
3:
{name: 'xiaozhu'}
length:
4
[[Prototype]]:
Array(0)
[[Prototype]]:
Object
let myage = [18,28,38,19]
let myperson= ['xiaoli','xiaona','xiaoyu','xiaozhu']
let newArr = myage.map((age, i) => ({age, name: myperson[i]}))
console.log(newArr);(4) [{…}, {…}, {…}, {…}]
xiaoyu.js:4
0:
{name: 'xiaoli', age: 18}
1:
{name: 'xiaona', age: 28}
2:
{name: 'xiaoyu', age: 38}
3:
{name: 'xiaozhu', age: 19}
length:
4
myperson.map((name,index) => ({name:name,age:myage[index]}))
这样更好理解给些,ES6语法。
7.与parseInt()
const returnInt = (element) => parseInt(element, 10);let arr1=["1", "2", "3"].map(returnInt); // [1, 2, 3]
// 实际结果是一个数字数组(如预期)// 与上面相同,但使用简洁的箭头函数语法
let arr2=["1", "2", "3"].map((str) => parseInt(str)); // [1, 2, 3]// 但与 parseInt() 不同,Number() 还会返回一个浮点数或(解析)指数表示法:
let arr4=["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]// 为了进行比较,如果我们对上面的数组使用 parseInt():
let arr5=["1.1", "2.2e2", "3e300"].map((str) => parseInt(str)); // [1, 2, 3]console.log(arr1);
console.log(arr2);
console.log(arr4);
console.log(arr5);(3) [1, 2, 3]
(3) [1, 2, 3]
(3) [1.1, 220, 3e+300]
(3) [1, 2, 3]
有时间继续学习。
相关文章:
把JS中的map方法玩出花来
一 map是什么 map(callbackFn) map(callbackFn, thisArg)map() 方法是一个迭代方法。它为数组中的每个元素调用一次提供的 callbackFn 函数,并用结果构建一个新数组。 参数 callbackFn 数组中的每个元素执行的函数。它的返回值作为一个元素被添加为新数组中。该…...
液晶显示计算器(延时程序)
#include "delay.h" /*------------------------------------------------ uS延时函数,含有输入参数 unsigned char t,无返回值 unsigned char 是定义无符号字符变量,其值的范围是 0~255 这里使用晶振12M,精确延时请…...
线性代数2:梯队矩阵形式
图片来自 Europeana on Unsplash 一、前言 欢迎阅读的系列文章的第二篇文章,内容是线性代数的基础知识,线性代数是机器学习背后的基础数学。在我之前的文章中,我介绍了线性方程和系统、矩阵符号和行缩减运算。本文将介绍梯队矩阵形式…...
【JavaEE】网络编程(网络编程基础、Socket套接字)
一、网络编程基础 1.1、什么是网络编程? 网络编程,指网络上的主机,通过不同的进程,以编程的方式实现网络通信(或称为网络数据传输) 注意:我们只要满足进程不同就行;所以即便是同一…...
Node学习笔记之模块化
一、介绍 1.1 什么是模块化与模块 ? 将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为 模块化 其中拆分出的 每个文件就是一个模块 ,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他 模块使用 1…...
用matlab求解线性规划
文章目录 1、用单纯形表求解线性规划绘制单纯形表求解: 2、用matlab求解线性规划——linprog()函数问题:补充代码:显示出完整的影子价格向量 1、用单纯形表求解线性规划 求解线性规划 m i n − 3 x 1 − 4 x 2 x 3 min -3x_1-4x_2x_3 min−…...
antd获取/更改form表单数据(表单域数据)
创建ref引用 formRef React.createRef();表单和ref绑定 //ref{this.formRef} 先给Form <Form ref{this.formRef} name"control-ref" onFinish{this.onFinish}><Form.Item name"name" label"Name" rules{[{ required: true }]}>…...
Go学习第三章——运算符与进制
Go学习第三章——运算符与进制 1 算术运算符2 关系运算符3 逻辑运算符4 赋值运算符5 其他运算符5.1 位运算符5.2 跟指针有关的运算符 6 运算符的优先级7 获取用户终端输入8 进制转换8.1 进制基本使用8.2 进制之间的转换8.3 原码 反码 补码8.4 位运算符详解 运算符是—种特殊的符…...
H3C IMC dynamiccontent.properties.xhtm 远程命令执行
我举手向苍穹,并非一定要摘星取月,我只是需要这个向上的、永不臣服的姿态。 构造payload: /imc/javax.faces.resource/dynamiccontent.properties.xhtml pfdrtsc&lnprimefaces&pfdriduMKljPgnOTVxmOB%2BH6%2FQEPW9ghJMGL3PRdkfmbii…...
【技能树笔记】网络篇——练习题解析(八)
目录 前言 一、LAN技术 1.1 堆叠与集群 1.2 MSTP的特点 二、WAN技术 2.1 PPP链路建立 2.2 PPPoE 2.3 组播 2.3.1 组播的IP 2.3.2 组播分发树 2.3.3 组播协议 三、IPv6基础 3.1 IPv6地址 3.2 IPv6协议 3.3 IPv6过渡技术 总结 🌈嗨!我是Filotimo__…...
laravel框架介绍(二)
方法1.windows 可以直接下载 Composer-Setup.exe 方法2.配置php.exe目录环境变量,下载 composer.phar和php.exe平级目录, 新建 composer.bat 文件编辑以下内容 php "%~dp0composer.phar" %* 运行composer.bat ,出现版本号为成功 执行 composer self-update 以保持 Co…...
USB学习(1):USB基础之接口类型、协议标准、引脚分布、架构、时序和数据格式
连接计算机外围设备最简单的方法是通过USB(通用串行总线)。USB是即插即用接口,可以将扫描仪、打印机、数码相机、闪存驱动器等计算机外围设备连接到计算机上。本篇文章就来介绍一下USB的一些基础知识,包括。 文章目录 1 接口类型和标准规范2 引脚分布3 …...
less和scss语法详解
比较好的博客文章:Less使用语法(详细):https://blog.csdn.net/weixin_44646763/article/details/114193426 SCSS基本语法:https://www.jianshu.com/p/4efaac23cdb6 总结:我理解的点: 1、符号声…...
【计算机网络笔记】TCP/IP参考模型基本概念,包括五层参考模型
系列文章目录 什么是计算机网络? 什么是网络协议? 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能(1)——速率、带宽、延迟 计算机网络性能(2)…...
RSA加密与签名的区别
文章目录 一、签名验签原理二 RSAUtils 工具类三、通过x509Certificate来获取CA证书的基本信息四、 通过公钥获取公钥长度 一、签名验签原理 签名的本质其实就是加密,但是由于签名无需还原成明文,因此可以在加密前进行哈希处理。所以签名其实就是哈希加…...
arcgis js api 4.x通过TileLayer类加载arcgis server10.2发布的切片服务跨域问题的解决办法
1.错误复现 2.解决办法 2.1去https://github.com/Esri/resource-proxy 网站下载代理配置文件,我下载的是最新的1.1.2版本,这里根据后台服务器配置情况不同有三种配置文件,此次我用到的是DotNet和Java. 2.2 DotNet配置 2.2.1 对proxy文件增加…...
如何让chatGPT给出高质量的回答?
如何让chatGPT给出高质量的回答? ChatGPT从入门到进阶教程合集_哔哩哔哩_bilibili 公式 【指令词】【背景】【输入】【输出要求】 1. 指令词 ——精准任务or命令 如:简述、解释、翻译、总结、润色 2. 背景 ——补充信息 如:简述一篇讲解…...
Java后端开发(八)-- idea(2022版)将commit(未push)的 本地仓库 的 单条commit记录 进行撤销
目录 1.修改Test01类后,提交到本地仓库 。 2.commit成功后,在Git =》Log中会显示,commit记录...
Mysql架构解析,InnoDB架构概述。
MySQL架构解析 Mysql整体架构 MySQL整体架构如下图所示: MySQL逻辑系统架构分为4层: 应用层MySQL服务层存储引擎层系统文件层 下面将对各层的功能和组件进行介绍,并探讨一条语句的执行过程。 应用层 应用层是MySQL体系架构的最上层,它…...
jmeter如何测试websocket接口?
jmeter做接口测试,很多人都是做http协议的接口,就有很多人问websocket的接口怎么测试啊? 首先,我们要明白,websocket接口是什么接口。 然后,我们怎么用jmeter测试? jmeter要测试websocket接口…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
提升移动端网页调试效率:WebDebugX 与常见工具组合实践
在日常移动端开发中,网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时,开发者迫切需要一套高效、可靠且跨平台的调试方案。过去,我们或多或少使用过 Chrome DevTools、Remote Debug…...
解析“道作为序位生成器”的核心原理
解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制,重点解析"道作为序位生成器"的核心原理与实现框架: 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...
