BAT等大厂前端面试题

蔚落 2022-12-22 08:57 28阅读 0赞

> 在腾讯和百度的面试中，出现了这样一道面试题，被大家亲切的称呼为网红面试题，这道面试题就是。\[‘1’, ‘2’, ‘3’\].map(parseInt)的输出结果是什么？\[‘1’, ‘2’, ‘3’\].fliter(parseInt)的输出结果是什么？这个面试题，面试官可能不仅仅需要你说出他的结果，还需要你知道为什么会出现这样的结果

### 一、关键语法 ###

1、parseInt  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left]  
2、parseFloat  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 1]

> 先看看parseInt和parseFloat的语法和使用，以便后续在实际例子中解释。

--------------------

### 二、Map ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 2]  
1、\[‘1’, ‘2’, ‘3’\].map(parseInt)

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

> 其实在使用map时，map的callback的第二个参数index引索值就成为parseeInt的radix值。\[‘1’, ‘2’, ‘3’\].map(parseInt)在遍历的过程。其实是经历了下面的过程。

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

*  parseInt(‘1’, 0)：radix的值为0，判断字符串发现介于1~9，用10进制转换，结果为1.
 *  parseInt(‘2’, 1)：radix的值为1，如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
 *  parseInt(‘3’, 2): radix的值为2，这就意味着字符串将被解析成字节数，也就是仅仅包含数值0和1。parseInt的规范指出，它仅尝试分析第一个字符的左侧。这个字符串的第一个字符是“3”，它并不是基础基数2的一个有效数字。所以这个子字符串将被解析为空。如果子字符串被解析成空了，函数将返回为NaN。

2、\[‘1’, ‘2’, ‘3’\].map(parseFloat)

['1', '2', '3'].map(parseFloat)
    // [1, 2, 3]

> parseFloat相对于parseInt比较简单，不用考虑第二个参数，只需要看第一个参数是否能正常转换为数字就行。

parseFloat('1');  // 1
    parseFloat('2');  // 2
    parseFloat('3');  // 3

一个小的知识点：如何快速将一个字符串数组转化为数字类型的数组

['1', '2', '3'].map(parseFloat)
    ['1', '2', '3'].map(Number)

--------------------

### 三、filter ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 3]

1、\[‘1’, ‘2’, ‘3’\].filter(parseInt)

['1', '2', '3'].filter(parseInt)
    // ["1"]

> filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。

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

*  parseInt(‘1’, 0)：radix的值为0，判断字符串发现介于1~9，用10进制转换，结果为1，所以callback的结果等价于true，返回元素’1’。
 *  parseInt(‘2’, 1)：radix的值为1，如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN，结果不等价于true，不返回。
 *  parseInt(‘3’, 2): radix的值为2，这就意味着字符串将被解析成字节数，也就是仅仅包含数值0和1。parseInt的规范指出，它仅尝试分析第一个字符的左侧。这个字符串的第一个字符是“3”，它并不是基础基数2的一个有效数字。所以这个子字符串将被解析为空。如果子字符串被解析成空了，函数将返回为NaN。

2、\[‘1’, ‘2’, ‘3’\].filter(parseFloat)

['1', '2', '3'].filter(parseFloat)
    // ["1", "2", "3"]

> 使用parseFloat时，遍历之后结果的每一项都是结果等价于true，所以全部返回。

--------------------

### 四、反思 ###

> 通过上述的map、filter，我们联想到数组其他方法，当使用parseInt或者是parseFloat来替代callback使用，你只需要理解到parseInt和parseFloat工作原理，那么针对这类问题，其实结果都是能很快输出的，也能套用上面的解析过来，来回答面试官。这类面试题也不是什么难题了。

--------------------

—Ending—

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left]: /images/20221120/52a43f29521644ffa100b691a7823ff8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221120/230dfc619919470d90f7ecc773aff2f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20221120/62f71165b5a14a689e96bba935e588a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 3]: /images/20221120/f27090e3bc384d199553ab91e24d5bb2.png