js中map的使用方法

Posted 2022-03-23 程序员超时空

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。