js中map的使用方法

本文涉及的产品
云解析DNS,个人版 1个月
全局流量管理 GTM,标准版 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。

相关文章
|
19小时前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
9 1
|
4天前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
12天前
|
存储 JavaScript 前端开发
JavaScript进阶-Map与Set集合
【6月更文挑战第20天】JavaScript的ES6引入了`Map`和`Set`,它们是高效处理集合数据的工具。`Map`允许任何类型的键,提供唯一键值对;`Set`存储唯一值。使用`Map`时,注意键可以非字符串,用`has`检查键存在。`Set`常用于数组去重,如`[...new Set(array)]`。了解它们的高级应用,如结构转换和高效查询,能提升代码质量。别忘了`WeakMap`用于弱引用键,防止内存泄漏。实践使用以加深理解。
|
15天前
|
JavaScript 前端开发
JavaScript 数组的函数 map/forEach/reduce/filter
JavaScript 数组的函数 map/forEach/reduce/filter
|
2月前
|
前端开发 JavaScript 程序员
Javascript:forEach、map、filter、reduce、reduceRight
Javascript:forEach、map、filter、reduce、reduceRight
|
2月前
|
存储 缓存 JavaScript
JavaScript中的Set和Map:理解与使用
JavaScript中的Set和Map:理解与使用
|
2月前
|
JavaScript 前端开发
JavaScript中的map和foreach:理解与使用
JavaScript中的map和foreach:理解与使用
|
2月前
|
JavaScript 前端开发
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
【5月更文挑战第11天】JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式。map() 用于创建新数组,其中元素是原数组元素经过指定函数转换后的结果;filter() 则筛选出通过特定条件的元素生成新数组;reduce() 将数组元素累计为单一值。这三个方法使代码更简洁易读,例如:map() 可用于数组元素乘以 2,filter() 用于选取偶数,reduce() 计算数组元素之和。
21 2
|
2月前
|
JavaScript 安全 前端开发
js的map函数
js的map函数
11 0
|
2月前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
40 3