部分JS经典题目解析

原创 Fly丶 随笔 js 6152阅读 22 天前 举报

此次列举出一些觉得有意思的JS题目(来源于出了名的44题),相信有非常多关于这些题目的博客,写这篇博客的目的在于巩固一些知识点,希望能和读者共同进步。

1. map函数执行过程
["1", "2", "3"].map(parseInt)

答案: [1, NaN, NaN]
解析: map(function callback(current, index, array)), map 回掉提供三个参数,current value, index of current value, array.
parseInt(value, radix), parseInt 提供两个参数,value 表示需要转换的string,radix表示string原本的进制单位,从2到36.

所以这道题的执行过程是这样的:
array.map(parseInt(value(current), radix(index) )); 回掉会自动按序分配参数
current => value, index => radix;

真实执行过程
array.map(parseInt(1, 0)) => parseInt(1, 0), 0 默认代表十进制。
parseInt(2, 1), 没有1进制,所以返回NaN,
parseInt(3,2), 2进制只有0,1, 所以同样返回NaN

2.[typeof null, null instanceof Object]
答案: [object, false]
解析: typeof 返回一个表示类型的字符串, typeof null == object.
instanceof 用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性, 显而易见,null 没有构造函数,所以返回的是false

  1. 运算符优先级
    var val = 'smtg';

console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing')

答案:Something
解析:+ 运算符优先级高于 > ,所以没有括号的情况下, 会先执行字符串连接操作。
所以等价于 ‘Value is true'? 'Something' : 'Nothing'
如果搞不清运算符优先级的时候,可以加上括号

  1. 稀疏数组与Array.filter

答案:[]

解析: 这边的ary 是一个稀疏数组,index从3到9都没有定义,所以ary[3~9]的值是undefined(可以在chrome tool里通过ary[index]来查看),那么乍一看这个题的答案应该是返回7个undefined组成的数组。

但是这里返回的是[],原因在于filter函数的作用。

可以看红色文字下方的代码,filter函数会先判断当前index是否在数组中被设置,即是否有ary[index] = value的过程,否则会跳过这个index。

所以对于稀疏数组,未定义的index会被跳过,从而导致这道题的答案是[]。 如果有ary[index] = undefined, 那么结果就会是返回由undefined 组成的数组。

5. String('A') 和 new String('A') 的区别

以下两个代码段的输出结果是?

答案:‘Do not know!' ; 'Case A'

解析:为什么两个代码段的输出不一致呢?

两个原因:1.switch进行比较的时候用的是全等符“===”,所以不会做类型转换,即“10”不会等于10;

  1. new String() 和 String 返回的类型不同,前者返回的是object,后者返回的是string,所以在做全等比较的时候,返回的结果是false。

所以如果有需要用到switch对于字符串做比较的时候,需要注意传入的参数类型。

6. 你真的了解"=="吗?
下面两个代码段的输出是?

答案:false, false

解析:如果单纯的把[0]转换成boolean类型的话,结果会是true,所以if判断语句的结果是true。 

看了很多其他的博客,都有说到“==”会做类型转换,比较其值,我觉得这个答案依然无法详细解释上述代码的结果。

查阅了更多资料后,找到了一些“==“的规则:

1、如果两个值类型相同,进行 === 比较,比较规则同上 
2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较: 
a、如果一个是null、一个是undefined,那么[相等]。 
b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。 
c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。 
d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说(比较麻烦,我也不大懂) 
e、任何其他组合(array数组等),都不相等。

所以其实”==“的转换规则,并没有想象的那么简单,由此可见[0] == true, 应该采用的是规则c, 而[] == [] 应该采用的是规则e.

最后附上一张”==“比较的结果图

7.  Arguments of methods

答案:21, 12

解析:第一个代码段的答案,我相信很容易得出。问题是第二个代码段,乍一看结果应该和第一个代码段相同,实则不然,那么是为什么呢?

其实这边不同的结果是由arguments 这个对象(arguments 不是数组)造成的,如果函数的参数有默认值的时候,那么arguments这个对象不会追踪参数值的变化,并且只记录传递过来的值。

所以第二个代码段中,arguments的结果是(1,1,1),sideEffecting函数拿到的结果是ary[0] =1, ary[2] =1; 所以回到a+b+c = 1+1+10 ==》 12。

  1. 有趣的比较符又来了
    [1 < 2 < 3, 3 < 2 < 1]
    答案: true, true

解析:1<2<3 等价于1<2=> true; true<3 => 1<3=> true;

3<2=> false; false<1 => 0<1=> true.

9.变量提升

答案: 1, error

解析:这道题目涉及到变量提升的范围,以及赋值语法。

var x=y=1 等价于 var x=1; y=1; 这里的y会被提升至全局域,所以的除上述答案。

var x=1,y=1 等价于var x=1; var y=1, 这样写的话,x,y都是局部变量,不会被提升。

先总结这么几道,之后碰到觉得有趣的题目,会持续更新。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复