【前端词典】arr.filter(parseInt) 考查点为何

61,248 阅读3分钟

这一类的面试题目时不时出现,那么它的考点在哪里呢?

其实这类题的目的很清楚,即考察:

  • 数组方法的基础知识
  • 数值转换方法的基础知识

也就是考察 基础知识的扎实程度,换句话说这是一道基础题。

map()、filter()、reduce() 等数组方法

说明一下:map()、filter() 是 ES5 为数组定义的迭代方法, reduce() 是 ES5 为数组定义的归并方法。这些方法并不是 ES6 新增的语法(之前在一场面试中,面试官很肯定的说这是 ES6 新增的方法)。

  • 你可以在 《JavaScript 高级程序设计-第三版》 96-97 页中看到明确的说明。

语法:

  array.filter(callback[,thisObject]);
  // array.map(callback[,thisObject]);
  // array.reduce(callback[,initialValue])

都不会改变原始数组。

参数:

  callback:要对每个数组元素执行的回调函数。
  thisObject:在执行回调函数时定义的 this 对象(没有传递或者为 null,将会使用全局对象)。
  // initialValue: 作为第一次调用 callback 函数时的第一个参数的值。

map()

对原数组中的每个元素按顺序执行一次指定的函数(即 callback),callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。

回调函数可以有三个参数:当前元素,当前元素的索引 [可选] 和当前的数组对象 [可选]

filter()

对原数组中的每个元素执行一次指定的函数(即 callback),并且创建一个新的数组,该数组元素是所有回调函数执行时返回值为 true 的原数组元素。

回调函数可以有三个参数:当前元素,当前元素的索引 [可选] 和当前的数组对象 [可选]

reduce()

对原数组中的每个元素执行一次指定的函数(即 callback),返回最后一次回调返回值。

回调函数可以有四个参数:累计器,当前元素,当前元素的索引 [可选] 和当前的数组对象 [可选]

提醒:reduce() 区别于 map()/filter() 的地方就在回调函数的第一个参数 - accumulator : 累计器

parseInt()、parseFloat() 两个数值转换方法

parseInt 语法

  parseInt(string, radix)  

将一个字符串 string 转换为 radix(值默认为 10) 进制的整数,radix 为介于 2-36 之间的数。

注意:string 将看作是一个数的 n 进制表示,返回的值为十进制

返回值:

  • 如果被解析参数的第一个字符无法被转化成数值类型,则返回 NaN
  • 如果 radix 小于 2 或者大于 36,则返回 NaN

在 radix 为 undefined,或者 radix 为 0 或者没有指定的情况下,JavaScript 作如下处理:

  • 如果字符串 string 以"0x"或者"0X"开头, 则 radix 是 16 (16进制).
  • 如果字符串 string 以"0"开头, radix 是8(八进制)或者10(十进制),具体值由实现环境决定。ECMAScript 5 规定使用 10,但是并不是所有的浏览器都遵循这个规定。因此,永远都要明确给出 radix 参数的值
  • 如果字符串 string 以其它任何值开头,则 radix 是 10 (十进制)。

parseFloat 语法

  parseFloat(string)

只有一个参数,用作将给定值解析成浮点数(如果给定值不能被转换成数值,则会返回 NaN)。

解释 arr.filter(parseInt)

其实以上的过程就很好地解析了这个问题,此类问题只要理解基本方法的传参就不会出错了,而且不需要强记['1', '2', '3'].map(parseInt)的结果。

let arr = [2,0,11,10];
arr.filter(parseInt);

// arr.map(parseInt); // [2, NaN, 3, 3]

1、首先 arr 的每个元素执行一次 parseInt,传入 parseInt 的参数就是当前元素和当前元素的索引

2、经历如下过程:

- parseInt(2,0)   // 结果为 2,转成 Boolean 为 true
- parseInt(0,1)   // 结果为 NaN,转成 Boolean 为 false
- parseInt(11,2)  // 结果为 3,转成 Boolean 为 true
- parseInt(10,3)  // 结果为 3,转成 Boolean 为 true

所以最后返回 [2, 11, 10]

总结

基础很重要,这是送分题。