js中map的使用方法

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: js中map的使用方法

map在js中的功能相当强大,故整理此文加深记忆。

一、概念

map()方法定义在JavaScript的Array中,它返回一个新的数组,新返回数组中的每个元素为原始数组的每一个元素分别调用map中的回调函数处理后的值。

注意:

  • map()不会对空数组进行检测
  • map()不会改变原始数组(返回新数组)
  • map()不会为数组中缺少的元素调用回调函数
  • 除数组对象外,map()可由具有length属性且具有已按数字编制索引名的任何对象使用(如字符串对象)

二、语法

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

参数说明:

  • function(currentValue, index, arr)必须。为一个回调函数,数组中的每个元素都会执行这个函数。其中函数参数:
  1. currentValue必须。当前元素的的值。
  2. index可选。当前元素的索引。
  3. arr可选。当前元素属于的数组对象。
  • thisValue可选。对象作为该执行回调时使用,传递给函数,用作"this"的值。

三、应用

案例一

var arr = [1,2,3].map(parseInt);
document.write(arr);

结果如下:

分析:

(1)原始数组为[1,2,3],回调函数为parseInt()方法,返回的新数组为arr;

(2)作为回调函数,parseInt()被传递了三个参数:currentValue, index, arr;


(3)parseInt(string,radix)函数可解析一个字符串,并返回一个整数,即将string解析为以radix为基准的有符号整数。其中:


string:必需。要被解析的字符串。


radix:可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。当参数_radix_的值为 0,或没有设置该参数时,parseInt() 会根据_string_来判断数字的基数。(如果_string_以 “0x” 开头,parseInt() 会把_string_的其余部分解析为十六进制的整数。如果_string_以 0 开头,那么 ECMAScript v3 允许parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果_string_以 1 ~ 9 的数字开头,parseInt()将把它解析为十进制的整数。)


a、只有字符串中的第一个数字会被返回;


b、如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN;


(4)根据map的概念:分别对数组的每一个元素调用回调函数,则:


arr =[1,2,3].map(parseInt) =[parseInt(1,0),parseInt(2,1),parseInt(3,2)] = [1,NaN,NaN];


关于parseInt(3,2) = NaN的解释:


parseInt(string,radix) 方法规定radix的值应该大于等于2或者小于36,即介于2~36之间。


a、parseInt(3,2)满足radix介于2~36之间的条件;


b、由于radix=2是作为基数,要将字符串3转换为基数为2的整数,基数为2的数中仅包含0、1、2三个数,3不在基数为2的 数中,因此parseInt(3,2) = NaN。

案例二

var arr = [1,1,1,1].map(parseInt);
document.write(arr);

结果如下:

分析:

var arr = [1,1,1,1].map(parseInt) = [parseInt(1,0),parseInt(1,1),parseInt(1,2),parseInt(1,3)] = [1,NaN,1,1];


parseInt(1,1)中radix参数小于2,因此返回NaN。

相关文章
|
3月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
5月前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
5月前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
4月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
70 0
|
5月前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
4月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
50 0
|
4月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
37 0
|
4月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
33 0
|
5月前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
6月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62