原生JS之彻底掌握parseInt计算规则

1,012 阅读5分钟

原来 parseInt 方法的第二个参数是用来标识第一个参数的进制

原来 parseInt 方法的第二个参数是用来标识第一个参数的进制

原来 parseInt 方法的第二个参数是用来标识第一个参数的进制


来一道经典的热身题目作为切入


let arr = [1, 2, 3, 4];
arr = arr.map(parseInt);
console.log(arr);


>>> 进入正题 <<<

parseInt([value], [radix])

首先,这个方法是用来将 字符串 转换为 十进制的数字

其次,第二个参数 radix 是用来标识 该按多少进制 去解析字符串

举个例子:

parseInt('15', 6);
这行代码的计算规则是: 将 '15' 作为 6 进制解析,转换为 10 进制的数字,因此结果为 11

而 [radix] 这个参数,很多时候我们都是不传的,但其实它有自己的默认值

如果不传 [radix] 或者传入 0 ,那么就会被解析为 十进制

此外,还有一个特殊情况,当 [radix] 没有传值的时候,如果 [value] 传入的字符串是以 '0x / oX' 开头,则默认会被解析为 十六进制


各种情况的例子如以下代码


// 切入题
let arr = [1, 2, 3, 4];
arr = arr.map(parseInt);
console.log(arr);


/*
 *  parseInt([value], [radix])
 *
 *  用法之只传一个参数: parseInt([value]),不传第二个参数时
 *      1.把 VALUE 转换为数字,要求 VALUE 是字符串(不是字符串的会先默认转换为字符串)
 *      2.从字符串的左边开始查找,找到有效数字字符转换为数字
 *      3.遇到一个非有效数字字符则立即停止查找,第一个字符为非有效数字字符直接返回 NaN
 *  用法之传两个参数: parseInt(string, radix)
 *      1.第二个参数为 进制,即将 string 作为 radix 进制解析(也就是把 string 看成是 radix 进制的值)
 *      2.把 string 转化为 十进制 的数字
 *      3.[radix] 不传或者传 0,则默认按照 10 处理(特殊:[value]以 0x / 0X 开头, radix 默认按照 16 进制处理)
 *      4.[radix] 不在 2 ~ 36 之间,最后结果都会变成 NaN
 *
 */
 
 // example 1
 console.log(parseInt('2AF5', 16)); //=> 10997 
 /*
  *     => 将 '2AF5'作为 16 进制解析,转换为 10 进制
  *     => 其他进制转十进制计算方法:  从个位开始,按照每一个数位的权重计算
  *     => 5*16^0 + F*16^1 + A*16^2 + 2*16^3 => 5*16^0 + 15*16^1 + 10*16^2 + 2*16^3 = 10997
  */
  
  // example 2
  console.log(parseInt('72.45', 8)); //=> 58
  /*
   *    => 从左到有查找,不识别浮点,获取到 '72'
   *    => 将 '72' 作为 8 进制解析,转换为 10 进制
   *    => 2*8^0 + 7*8^1 = 58
   */
  
  // example 3
  console.log(parseInt('231', 3)); //=> 2
  /*
   *    => 3 进制的计数值为 0, 1, 2, 不在此范围内的将不会被查找
   *    => 查找到 3 不在其计数范围内,停止查找,获取到 '2'
   *    => 2*3^0 = 2
   */
  console.log(parseInt('12px', 10) ); //=> 同上 => 2*10^0 + 1*10^1 = 12
  
  // 切入题
  let arr = [1, 2, 3, 4];
  arr.map(parseInt);
  console.log(arr); //=> [1, NaN, NaN, NaN]
  /*
   *    => map 的回调函数默认传入 当前项 及 当前项的索引
   *    => 迭代1. parseInt(1, 0) => parseInt 第二个参数传 0 则为默认的 十进制 => 1
   *    => 迭代2. parseInt(2, 1) => 1 不在 2~36 的进制范围内 => NaN
   *    => 迭代3. parseInt(3, 2) => 3 不在 二进制 的计数范围 => NaN
   *另外夹带私货来点拓展    => 迭代4. parseInt(4, 3) => 4 不在 三进制 的技术范围 => NaN
   */
   
   /*
    *   拓展:
    *       1.与 parseInt 方法类似的 parseFloat 是不支持第二个参数的,因此没有进制转换
    *       2.parseInt 和 parseFloat 的共同点和区别:
    *       (1) 共同点: 这两个方法都是用来将 [字符串类型的数据] 转换为 [数字类型]
    *       (2) 区别一: parseInt 不识别浮点, parseFloat 能够识别浮点
    *       (3) 区别二: parseInt 支持第二个参数,用来标识字符串的进制,而 parseFloat 不支持第二个参数
    */
   

热身题中还可以延伸的知识点: 数组中迭代方法的拓展

/*
 *  map(callback)
 *      $params
 *          callback  数组中每一项需要执行的方法,默认会传入当前项及当前项的索引作为方法的参数,方法的返回值会替换数组中的每一项
 *      $return
 *          [Array]  每一项数据被方法处理过后的数组
 */
 
 //example
 let ary = [1, 2, 3, 4];
 ary.map((item, index) => item * index);
 console.log(ary); //=> [0, 2, 6, 12]
 
 /*
  * 数组迭代方法扩展(遍历数组中的每一项做一些特定的处理)
  *     forEach 遍历数组每一项(数组中有多少项,就会触发多少次回调函数,每一次把迭代的当前项和当前项的索引传递给回调函数)
  *     map 和 forEach 类似,但是支持返回值,回调函数中的返回值会把当前迭代的一项替换掉
  *     find 迭代数组每一项的时候,只要有一项在回调函数中返回 true 则找到内容并返回这一项,后面不再迭代
  *     filter 迭代每一项的时候,回调函数中所有返回 true 的每一项,存到一个新数组,最后将新数组返回(包含筛选出来的所有项)
  *     every 判断数组中的每一项是否符合回调函数的验证条件,全部符合返回 true ,存在不符合则立即返回 false
  *     some 判断数组中是否在迭代中至少存在一项符合回调函数的验证条件的,有则返回 true
  *     reduce 上一次回调函数的运算结果会作为下一次处理的信息(累积汇总)
  */