经典面试题：JavaScript 中 `['10', '10', '10', '10', '10', '10'].map(parseInt)` 返回值是什么？

时间：

分类：

js

字数：

1k 字

时长：

大约需要 4 分钟

次数：

0 人阅读

换个问法： [10, 10, 10, 10, 10, 10].map(parseInt) 的返回值是什么？

一个是数组中全是 '10' 的字符串，一个是 10 的数字，他们的返回值有没有区别？返回值是什么？为什么会这样返回？

此问题主要考察 map 和 parseInt 两个方法的函数参数个数。

先说返回结果

[10, NaN, 2, 3, 4, 5]

不知道有没有觉得意外？

js 数组的 map 方法，大家都用过，用来遍历一个数组，返回一个新数组。

js parseInt 方法大家估计也用过，用来强制转换一个字符串为数字，或者用来进制转换。

两个混在一起，有没有第一时间想到返回值？

再来看看为什么会是这个返回值？

js Array.prototype.map() 方法说明

Array.prototype.map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。MDN 文档中的说明节选：

  • 语法
1
2
>map(callbackFn)
>map(callbackFn, thisArg)
  • 参数

callbackFn
为数组中的每个元素执行的函数。它的返回值作为一个元素被添加为新数组中。该函数被调用时将传入以下参数：

element
数组中当前正在处理的元素。

index
正在处理的元素在数组中的索引。

array
调用了 map() 的数组本身。

thisArg 可选
执行 callbackFn 时用作 this 的值。

  • 返回值
    一个新数组，每个元素都是回调函数的返回值。

记住此处的 callbackFn 的三个函数入参！！再看 parseInt 方法~~~

js parseInt 方法说明

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。MDN 文档中的说明节选：

  • 语法
1
>parseInt(string, radix);

  • 参数

    string
    要被解析的值。如果参数不是一个字符串，则将其转换为字符串 (使用 ToString抽象操作)。字符串开头的空白符将会被忽略。

    radix 可选
    从 2 到 36 的整数，表示进制的基数。例如指定 16 表示被解析值是十六进制数。如果超出这个范围，将返回 NaN。假如指定 0 或未指定，基数将会根据字符串的值进行推算。注意，推算的结果不会永远是默认值 10！文章后面的描述解释了当参数 radix 不传时该函数的具体行为。

  • 返回值
    从给定的字符串中解析出的一个整数，当以下条件满足任意一个，则返回 NaN

radix 小于 2 或大于 36，或
第一个非空格字符不能转换为数字。

为什么？

callbackFn 有三个入参，parseInt 有两个接收参数，这是造成 [10, NaN, 2, 3, 4, 5] 返回值的最大原因！

看这个例子：

1
['10', '10', '10', '10', '10', '10'].map(console.log)

输出：

1
2
3
4
5
6
10 0 ['10', '10', '10', '10', '10', '10']
10 1 ['10', '10', '10', '10', '10', '10']
10 2 ['10', '10', '10', '10', '10', '10']
10 3 ['10', '10', '10', '10', '10', '10']
10 4 ['10', '10', '10', '10', '10', '10']
10 5 ['10', '10', '10', '10', '10', '10']

将上面每次输出值传入 parseInt 看看返回结果：

1
2
3
4
5
6
console.log(parseInt(10, 0, ['10', '10', '10', '10', '10', '10'])); // 10  radix为 0 表示未传参数，转为默认的 10 进制结果
console.log(parseInt(10, 1, ['10', '10', '10', '10', '10', '10'])); // NaN  原因：radix 小于 2 或大于 36
console.log(parseInt(10, 2, ['10', '10', '10', '10', '10', '10'])); // 2  转为 2 进制结果
console.log(parseInt(10, 3, ['10', '10', '10', '10', '10', '10'])); // 3  转为 3 进制结果
console.log(parseInt(10, 4, ['10', '10', '10', '10', '10', '10'])); // 4  转为 4 进制结果
console.log(parseInt(10, 5, ['10', '10', '10', '10', '10', '10'])); // 5  转为 5 进制结果

关于进制转换，可以去百度搜索下其他文章阅读了解。

现在明白开头的返回值 [10, NaN, 2, 3, 4, 5] 是怎么来的了吧！！

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-11-20/js-map/

如果您觉得文章不错，可以点击文章中的广告支持一下！