zoukankan      html  css  js  c++  java
  • 【面试题】439- 这是一道网红面试题

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

    一、关键语法

    1、parseInt

    2、parseFloat

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


    二、Map

    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

    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工作原理,那么针对这类问题,其实结果都是能很快输出的,也能套用上面的解析过来,来回答面试官。这类面试题也不是什么难题了。

    源自:https://juejin.im/post/5dbff8735188252ddb2fd25e

    声明:文章著作权归作者所有,如有侵权,请联系小编删除。

    原创系列推荐

    1. JavaScript 重温系列(22篇全)

    2. ECMAScript 重温系列(10篇全)

    3. JavaScript设计模式 重温系列(9篇全)

    4. 正则 / 框架 / 算法等 重温系列(16篇全)

    5. Webpack4 入门(上)|| Webpack4 入门(下)

    6. MobX 入门(上) ||  MobX 入门(下)

    7. 59篇原创系列汇总

    回复“加群”与大佬们一起交流学习~

    点这,与大家一起分享本文吧~

    个人博客:http://www.pingan8787.com 微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。 目前已连续推送文章 600+ 天,愿每个人的初心都能一直坚持下去!
  • 相关阅读:
    【MyBatis】学习笔记010--#{}与¥{}的区别
    【MyBatis】学习笔记009--基于注解的CRUD
    【MySQL】limit语法
    【MyBatis】学习笔记008--分页查询
    【MyBatis】学习笔记007--日志工厂
    【MyBatis】学习笔记006--resultMap简单结果映射
    【MyBatis】学习笔记005--生命周期与作用域
    【MyBatis】学习笔记004--XML配置
    重学动态规划
    剑指 Offer 09. 用两个栈实现队列
  • 原文地址:https://www.cnblogs.com/pingan8787/p/13069574.html
Copyright © 2011-2022 走看看