["1", "2", "3"].map(parseInt)

本文详细解释了JavaScript中parseInt函数与Array.prototype.map方法的交互作用,揭示了当parseInt作为map的回调函数时为什么会返回特定的结果。

["1", "2", "3"].map(parseInt)得到什么?

答案是:[1, NaN, NaN].

原因:parseInt接收的是两个参数,map传递的是3个参数。

map函数定义

arr.map(callback[,thisArg]);

callback

原数组中的元素经过该方法后返回一个新的元素。

currentValue 

     callback的第一个参数,数组中当前被传递的元素。

index

     callback的第二个参数,数组中当前被传递的元素的索引。

array

     callback的第三个参数,调用 map 方法的数组。

thisArg可选.  callback函数里的this值 默认是window对象

下面我们将parseInt重新定义,看一下会返回什么?

执行下面的函数:

var parseInt = function (string, radix, others) {
    return string + '-' + radix + '-' + others;
};
['1','2','3'].map(parseInt);

得到:image

为什么会得到这个数组:以数组第一个字符串为例,1-0-1,2,3是因为map的callback返回参数分别是currentValue:1,index:0,array:[1,2,3](此处被转义)。

其他同上。那么接下来,我们将map函数执行原始parseInt函数拆分执行:

parseInt函数定义:

parseInt(stringradix);

string: 需要转化的字符,如果不是字符串会被转换,忽视空格符。

radix:数字2-36之前的整型。默认使用10,表示十进制。

需要注意的是,如果radix在2-36之外会返回NaN。

因为parseInt函数接收2个参数,string,radix,如果map函数返回了这两个参数,不管意义是否是所期望的,都会将其作为参数执行。

以1-0-1,2,3为例,map(parseInt)中,parseInt作为callback函数执行的将是:parseInt('1',0)(前面那个数字1自动被转换为字符串1),其他同上。

看下面的执行函数结果

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);

所以得到1,NaN,NaN

因此,在最开始的题目["1", "2", "3"].map(parseInt)得到的是1,NaN,NaN。

(此处如果出错,主要是对map的callback返回参数和parseInt会接受2个参数的不熟悉)

 

Map函数的其他用途:

例1:遍历querySelectorAll对象,并执行相关函数

var elems = document.querySelectorAll('div');
var values = Array.prototype.map.call(elems, function (elem) {
    return elem;
});

例2:反转字符串

var str = '12345';
Array.prototype.map.call(str, function(x){
    return x;
}).reverse().join();

还有一种翻转字符的方法:

var str = '12345';

var strre = str.split('').reverse().join('');

附:这个方法可以判断回文

复制代码

var str = '12345';
var str1 = Array.prototype.map.call(str, function(x){
    return x;
}).reverse().join();

if (str === str1) {
   console.log('true');
} else {
   console.log('false');
}
<think>我们正在处理一个关于JavaScript的问题:`[1,2,3].map(parseInt)`的行为解释。 根据引用,特别是引用[3]和引用[5],我们可以知道: - `map`方法会为数组中的每个元素调用回调函数,并传递三个参数:当前元素、当前索引和数组本身。 - `parseInt`函数通常接收两个参数:要解析的字符串和基数(进制)。如果基数不在2~36之间(除了0和省略的情况),则返回NaN。 当我们使用`[1,2,3].map(parseInt)`时,实际上相当于: [1,2,3].map((item, index) => parseInt(item, index)) 因为`map`传递三个参数,而`parseInt`可以接收两个参数(第三个参数会被忽略)。所以实际调用为: parseInt(1, 0) // 第一个元素,索引0 parseInt(2, 1) // 第二个元素,索引1 parseInt(3, 2) // 第三个元素,索引2 现在我们逐一分析: 1. parseInt(1, 0): - 当基数为0时,JavaScript会尝试推断基数。如果字符串以0x或0X开头,则按16进制解析;否则按10进制。 - 这里1不是字符串,会被转换为字符串"1",没有前缀,所以按10进制解析,结果为12. parseInt(2, 1): - 基数必须在2~36之间,1不在这个范围,所以返回NaN。 3. parseInt(3, 2): - 基数为2,表示二进制。二进制中只能出现0和1,而3不是有效的二进制数字,所以解析失败,返回NaN。 因此,最终结果是[1, NaN, NaN]。 但是,注意引用[2]和[4]也提到了同样的过程。 所以,我们可以这样解释: 由于`map`传递了索引作为`parseInt`的第二个参数(基数),导致后两次调用因为基数无效或数字超出基数范围而返回NaN。 为了避免这种情况,我们可以使用一个只接收一个参数的函数,例如: [1,2,3].map(num => parseInt(num)) // 或者简写为 [1,2,3].map(Number) 这样每次调用都使用默认的10进制,得到[1,2,3]。 现在,我们按照要求组织答案: 1. 解释mapparseInt的行为 2. 逐步分析 3. 给出结果 4. 如何避免 同时,我们生成相关问题。</think>### JavaScript 中 `[1,2,3].map(parseInt)` 的行为解释 #### 1. **核心机制分析** - **`map()` 方法的行为**: - 语法:`array.map(callback(currentValue, index, array))` - 它会遍历数组,对每个元素调用回调函数,并传递三个参数: - `currentValue`:当前处理的元素(如 `1`, `2`, `3`) - `index`:当前元素的索引(如 `0`, `1`, `2`) - `array`:原数组(此例中可忽略)[^2][^3][^5] - **`parseInt()` 函数的行为**: - 语法:`parseInt(string, radix)` - 接收两个参数: - `string`:需解析的字符串(非字符串会自动转换) - `radix`:进制基数(范围 `2~36`,超出则返回 `NaN`) - 特殊规则: - 若 `radix=0` 或未提供,默认按十进制解析 - 若 `radix=1` 或 `>36`,返回 `NaN` - 若数字在进制下无效(如二进制遇到 `3`),返回 `NaN`[^3][^5] #### 2. **执行过程拆解** 实际相当于以下调用: ```javascript [1,2,3].map((item, index) => parseInt(item, index)); ``` 分步解析: 1. **第一项**:`parseInt(1, 0)` - `radix=0` 按十进制解析 → 返回 `1` 2. **第二项**:`parseInt(2, 1)` - `radix=1` 无效(超出 `2~36`)→ 返回 `NaN` 3. **第三项**:`parseInt(3, 2)` - 二进制中 `3` 是无效数字 → 返回 `NaN`[^3][^4][^5] #### 3. **最终输出** ```javascript [1, NaN, NaN] ``` #### 4. **常见误解澄清** - **误区**:认为 `map(parseInt)` 等价于 `map(num => parseInt(num))` **正解**:`parseInt` 会接收 `map` 传递的索引参数作为进制基数,导致后两次解析失败。 - **正确用法**:需显式限定参数: ```javascript [1,2,3].map(num => parseInt(num)); // 输出 [1, 2, 3] // 或简写为 [1,2,3].map(Number); // 输出 [1, 2, 3] ``` #### 5. **总结** `[1,2,3].map(parseInt)` 的异常结果源于 **`map` 向 `parseInt` 隐式传递索引参数作为进制基数**。理解函数参数传递机制是避免此类问题的关键。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值