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

本文详细解析了JavaScript中map函数的参数与用法,以及parseInt函数如何将不同进制的字符串转换为十进制整数,包括radix参数的作用与特殊情况处理。

这道题大家应该经常会碰到,我们打印一下结果
在这里插入图片描述
想要彻底弄懂同类型的题,我们必须先弄懂map,parseInt

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

参数解析:

  • item:第一个参数,数组中正在处理的当前元素(必选)
  • index:第二个参数,数组中正在处理的当前元素的索引(可选)
  • thisArr:第三个参数,map 方法被调用的数组(可选)
  • thisValue:对象作为该执行回调时使用,传递给函数,用作 “this” 的值(可选)
parseInt
// radix进制的由数字组成的字符串 string 转换为 10 进制的整数
parseInt(string, radix)

参数解析:

  • string:要被解析的字符串(必选)
  • radix:要解析的数字的基数。该值介于 2 ~ 36 之间(可选)

radix详解:

  • 如果radix值为 0,则数字将以 10 为基础来解析
  • 如果radix小于 2 (!==0)或者大于 36,则 parseInt() 将返回 NaN
  • 没有设置该参数时,如果string以 “0x” 或 “0X” 开头,将以 16 为基数
  • 没有设置该参数时,如果 string 以 0 开头,转换为8进制或十进制
  • 没有设置该参数时,如果 string 以 1 ~ 9 开头,将以 10 为基数
  • 如果string超出radix的表示范围,则返回NaN

实践

['1', '2', '3'].map(parseInt)
// 等同于
['1', '2', '3'].map((item, index) => {
	return parseInt(item ,index)
})
parseInt('1', 0) // 1 ===> radix值为 0,则数字将以 10 为基础来解析
parseInt('2', 1) // NaN ===> radix小于2,返回NaN
parseInt('3', 2) // NaN ===> string超出radix的表示范围,返回NaN

parseInt('10', 9) // 9 ===> 1 * 9 ^ 1 + 0 * 9 ^ 0 = 9 
parseInt("17", 8) // 15 ===> 1 * 8 ^ 1 + 7 * 8 ^ 0 = 15
parseInt("1f", 16) // 31 ===> 16 + 15
parseInt(' 12x') // 12 ===> 开头和结尾的空格是允许的
parseInt('s90') // NaN ===> 如果字符串的第一个字符不能被转换为数字,那会返回 NaN
parseInt(' 12abc!6') // 12 ===> 只有字符串中的第一组数字会被返回
<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` 按十进制解析 &rarr; 返回 `1` 2. **第二项**:`parseInt(2, 1)` - `radix=1` 无效(超出 `2~36`)&rarr; 返回 `NaN` 3. **第三项**:`parseInt(3, 2)` - 二进制中 `3` 是无效数字 &rarr; 返回 `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` 隐式传递索引参数作为进制基数**。理解函数参数传递机制是避免此类问题的关键。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值