blog 44个 Javascript 变态题解析 (上)

trafficstars

读者可以先去做一下感受感受. 当初笔者的成绩是 21/44...

当初笔者做这套题的时候不仅怀疑智商, 连人生都开始怀疑了....

不过, 对于基础知识的理解是深入编程的前提. 让我们一起来看看这些变态题到底变态不变态吧!

第1题

["1", "2", "3"].map(parseInt)

知识点:

首先, map接受两个参数, 一个回调函数 callback, 一个回调函数的this值

其中回调函数接受三个参数 currentValue, index, arrary;

而题目中, map只传入了回调函数--parseInt.

其次, parseInt 只接受两个两个参数 string, radix(基数).

在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：

如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制).

如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制），那么具体是哪个基数由实现环境决- 定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个规定。因此，永远都要明确给出radix参数的值。

如果字符串 string 以其它任何值开头，则基数是10 (十进制)。

所以本题即问

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

首先后两者参数不合法.

所以答案是 [1, NaN, NaN]

第2题

[typeof null, null instanceof Object]

两个知识点:

typeof 返回一个表示类型的字符串.

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上.

这个题可以直接看链接... 因为 typeof null === 'object' 自语言之初就是这样....

typeof 的结果请看下表:

type         result
Undefined   "undefined"
Null        "object"
Boolean     "boolean"
Number      "number"
String      "string"
Symbol      "symbol"
Host object Implementation-dependent
Function    "function"
Object      "object"

所以答案 [object, false]

第3题

[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]

知识点:

Array/Reduce

arr.reduce(callback[, initialValue])

reduce接受两个参数, 一个回调, 一个初始值.

回调函数接受四个参数 previousValue, currentValue, currentIndex, array

需要注意的是 If the array is empty and no initialValue was provided, TypeError would be thrown.

所以第二个表达式会报异常. 第一个表达式等价于 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9

答案 an error

第4题

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

两个知识点:

简而言之 + 的优先级大于 ?

所以原题等价于 'Value is true' ? 'Somthing' : 'Nonthing' 而不是 'Value is' + (true ? 'Something' : 'Nonthing')

答案 'Something'

第5题

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

这个相对简单, 一个知识点:

Hoisting

在 JavaScript中， functions 和 variables 会被提升。变量提升是JavaScript将声明移至作用域 scope (全局域或者当前函数作用域) 顶部的行为。

这个题目相当于

var name = 'World!';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

所以答案是 'Goodbye Jack'

第6题

var END = Math.pow(2, 53);
var START = END - 100;
var count = 0;
for (var i = START; i <= END; i++) {
    count++;
}
console.log(count);

一个知识点:

Infinity

~~在 JS 里, Math.pow(2, 53) == 9007199254740992 是可以表示的最大值. 最大值加一还是最大值. 所以循环不会停.~~

补充: @jelly7723

js中可以表示的最大整数不是2的53次方，而是1.7976931348623157e+308。 2的53次方不是js能表示的最大整数而应该是能正确计算且不失精度的最大整数，可以参见js权威指南。 9007199254740992 +1还是 9007199254740992 ，这就是因为精度问题，如果 9007199254740992 +11或者 9007199254740992 +111的话，值是会发生改变的，只是这时候计算的结果不是正确的值，就是因为精度丢失的问题。

第7题

var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});

答案是 []

看一篇文章理解稀疏数组

我们来看一下 Array.prototype.filter 的 polyfill:

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) { // 注意这里!!!
        var val = t[i];
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }

    return res;
  };
}

我们看到在迭代这个数组的时候, 首先检查了这个索引值是不是数组的一个属性, 那么我们测试一下.

0 in ary; => true
3 in ary; => false
10 in ary; => true

也就是说从 3 - 9 都是没有初始化的'坑'!, 这些索引并不存在与数组中. 在 array 的函数调用的时候是会跳过这些'坑'的.

第8题

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
[two - one == one, eight - six == two]

JavaScript的设计缺陷?浮点运算：0.1 + 0.2 != 0.3

IEEE 754标准中的浮点数并不能精确地表达小数

那什么时候精准, 什么时候不经准呢? 笔者也不知道...

答案 [true, false]

第9题

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

两个知识点:

switch 是严格比较, String 实例和字符串不一样.

var s_prim = 'foo';
var s_obj = new String(s_prim);

console.log(typeof s_prim); // "string"
console.log(typeof s_obj);  // "object"
console.log(s_prim === s_obj); // false

答案是 'Do not know!'

第10题

function showCase2(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase2(String('A'));

解释: String(x) does not create an object but does return a string, i.e. typeof String(1) === "string"

还是刚才的知识点, 只不过 String 不仅是个构造函数直接调用返回一个字符串哦.

答案 'Case A'

第11题

function isOdd(num) {
    return num % 2 == 1;
}
function isEven(num) {
    return num % 2 == 0;
}
function isSane(num) {
    return isEven(num) || isOdd(num);
}
var values = [7, 4, '13', -9, Infinity];
values.map(isSane);

一个知识点

Arithmetic_Operators#Remainder

此题等价于

7 % 2 => 1
4 % 2 => 0
'13' % 2 => 1
-9 % % 2 => -1
Infinity % 2 => NaN

需要注意的是余数的正负号随第一个操作数.

答案 [true, true, true, false, false]

第12题

parseInt(3, 8)
parseInt(3, 2)
parseInt(3, 0)

第一个题讲过了, 答案 3, NaN, 3

第13题

Array.isArray( Array.prototype )

一个知识点:

Array/prototype

一个鲜为人知的实事: Array.prototype => [];

---> 对JS原型的一些思考 by renaesop

答案: true

第14题

var a = [0];
if ([0]) {
  console.log(a == true);
} else {
  console.log("wut");
}

JavaScript-Equality-Table
更新通过一张简单的图，让你彻底地、永久地搞懂JS的==运算非常不错的一篇文章!

解析:

Boolean([0]) === true
[0] == true
- true 转换为数字 => 1
- [0] 转化为数字失败, 转化为字符串 '0', 转化成数字 => 0
- 0 !== 1

答案: false

第15题

[]==[]

[] 是Object, 两个 Object 不相等

答案是 false

第16题

'5' + 3
'5' - 3

两个知识点:

+ 用来表示两个数的和或者字符串拼接, -表示两数之差.

请看例子, 体会区别:

> '5' + 3
'53'
> 5 + '3'
'53'
> 5 - '3'
2
> '5' - 3
2
> '5' - '3'
2

也就是说 - 会尽可能的将两个操作数变成数字, 而 + 如果两边不都是数字, 那么就是字符串拼接.

答案是 '53', 2

第17题

1 + - + + + - + 1

这里应该是(倒着看)

1 + (a)  => 2
a = - (b) => 1
b = + (c) => -1
c = + (d) => -1
d = + (e) => -1
e = + (f) => -1
f = - (g) => -1
g = + 1   => 1

所以答案 2

第18题

var ary = Array(3);
ary[0]=2
ary.map(function(elem) { return '1'; });

稀疏数组. 同第7题.

题目中的数组其实是一个长度为3, 但是没有内容的数组, array 上的操作会跳过这些未初始化的'坑'.

所以答案是 ["1", undefined × 2]

这里贴上 Array.prototype.map 的 polyfill.

Array.prototype.map = function(callback, thisArg) {

        var T, A, k;

        if (this == null) {
            throw new TypeError(' this is null or not defined');
        }

        var O = Object(this);
        var len = O.length >>> 0;
        if (typeof callback !== 'function') {
            throw new TypeError(callback + ' is not a function');
        }
        if (arguments.length > 1) {
            T = thisArg;
        }
        A = new Array(len);
        k = 0;
        while (k < len) {
            var kValue, mappedValue;
            if (k in O) {
                kValue = O[k];
                mappedValue = callback.call(T, kValue, k, O);
                A[k] = mappedValue;
            }
            k++;
        }
        return A;
    };

第19题

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1)

这是一个大坑, 尤其是涉及到 ES6语法的时候

知识点:

Functions/arguments

首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.

也就是说 arguments 是一个 object, c 就是 arguments[2], 所以对于 c 的修改就是对 arguments[2] 的修改.

所以答案是 21.

然而!!!!!!

当函数参数涉及到 any rest parameters, any default parameters or any destructured parameters 的时候, 这个 arguments 就不在是一个 mapped arguments object 了.....

请看:

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c=3) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1)

答案是 12 !!!!

请读者细细体会!!

第20题


var a = 111111111111111110000,
    b = 1111;
a + b;

答案还是 111111111111111110000. 解释是 Lack of precision for numbers in JavaScript affects both small and big numbers. 但是笔者不是很明白................ 请读者赐教!

第21题

var x = [].reverse;
x();

这个题有意思!

知识点:

Array/reverse

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

也就是说最后会返回这个调用者(this), 可是 x 执行的时候是上下文是全局. 那么最后返回的是 window.

补充:

@stellar91 这个笔者实践了一下发现 firefox 是 window, chrome 报错 VM190:2 Uncaught TypeError: Array.prototype.reverse called on null or undefined(…) 可能是实现不同, 在 chrome 中应该是对调用者做了检查.

答案是 window

第22题

Number.MIN_VALUE > 0

true

@10081677wc MIN_VALUE 属性是 JavaScript 中可表示的最小的数（接近 0 ，但不是负数），它的近似值为 5 x 10-324。

今天先到这里, 下次我们来看后22个题!

44个 Javascript 变态题解析 (下)

Jun 09 '16 11:06 xiaoyu2er

看来我基础还是不行呀

Jun 11 '16 07:06 lovecn

19题，答案应该是21吧。

Jun 11 '16 14:06 liuxiaojiu

@liuxiaojiu 你说的是第一种情况还是第二种, 第一种情况就是 21. 如果参数列表出现了 reset, default param 这种语法的话就不是了.

Jun 11 '16 14:06 xiaoyu2er

keng

Jun 12 '16 08:06 NoManReady

第一题不用猜测，传0就是按照10进制http://www.w3school.com.cn/jsref/jsref_parseInt.asp

Jun 13 '16 07:06 loudou140806

@xiaoyu2er 你好，我看错了。不好意思

Jun 15 '16 14:06 liuxiaojiu

基础很重要啊！

Jun 16 '16 01:06 Thinking80s

对于第6题的解释，楼主可能说错了。 js中可以表示的最大整数不是2的53次方，而是1.7976931348623157e+308。 2的53次方不是js能表示的最大整数而应该是能正确计算且不失精度的最大整数，可以参见js权威指南。 9007199254740992 +1还是 9007199254740992 ，这就是因为精度问题，如果 9007199254740992 +11或者 9007199254740992 +111的话，值是会发生改变的，只是这时候计算的结果不是正确的值，就是因为精度丢失的问题。

Jul 03 '16 14:07 jelly7723

@jelly7723 谢谢指出, 我把你的理解修改到文章中

Jul 03 '16 23:07 xiaoyu2er

@xiaoyu2er 在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：

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

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Jul 17 '16 11:07 paranoidjk

@paranoidjk 谢谢指出已添加到正文

Jul 17 '16 23:07 xiaoyu2er

第21题，请您自己运行一下看看结果

Jul 18 '16 14:07 FeMiner

@stellar91 这个笔者实践了一下发现 firefox 是 window, chrome 报错 VM190:2 Uncaught TypeError: Array.prototype.reverse called on null or undefined(…) 可能是实现不同, 在 chrome 中应该是对调用者做了检查.

Jul 19 '16 00:07 xiaoyu2er

刚刚仔细思考了一下13题，我认为这是原型继承的本质。

prototype的语义是原型，new的语义，是对原型的克隆。new 出来的东西（比如说array），最自然情况的是和原型相同，所以反推就有: Array.prototype是一个数组， String.prototype是一个字符串，Function.prototype是一个函数。正式这种貌似“奇怪”的行为，才真正遵循了原型的语义。

另外一个例子是，instanceof判断的依据是实例的方法是不是具有prototype的方法。这个相当于是new的逆过程。

准备再探索一下起源，感觉网上说原型本质的好稀有。

Oct 23 '16 05:10 renaesop

renaesop/blog#17

Oct 24 '16 10:10 renaesop

17题不是很理解，求详解

Feb 28 '17 07:02 Stevenzwzhai

@Stevenzwzhai 这样可能要好理解些：

1 + - + + + - + 1
1 + (- + + + - + 1) // (- + + + - + 1) 这步主要就是用一元负号(-)运算符和一元正号(+)运算符，反复作用于操作数。从右往左依次消除符号：
- - + + + (- 1)
- - (+ + + (- 1)) // 一元正号的作用：计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。这里的操作数是-1，所以可以消掉全部正号
- - (-1)
- 1
1 + 1
所以结果为2

这道题考察的是对一元正负号的理解吧（不要误把+ +当成递增运算符）

Mar 04 '17 10:03 huguangju

MIN_VALUE 属性是 JavaScript 中可表示的最小的数（接近 0 ，但不是负数），它的近似值为 5 x 10-324。

May 27 '17 08:05 10081677wc

第20题，因为Math(2,53)<111111111111111110000, 计算失去精度

Aug 15 '17 15:08 wolfjyx

有没有办法让1+1==3？

Feb 06 '18 04:02 houyhea

谢谢分享

Feb 26 '18 05:02 llli0v0

谢谢分享

Apr 09 '18 09:04 seekersIsMe

第19题还是有点没看明白呢。。

Aug 16 '18 08:08 changhongWang

第20题

这个题跟 6 题差不多，都是精度问题 111111111111111110000..toString(2) => 1100000010111111001111101101101110100011000101111001000000000000000 总共为 67 bits，前 53 bits 为 11000000101111110011111011011011101000110001011110010 剩下 14 bits 00000000000000，这14 位的值用来计算舍入的，当值小于 8192 (即 0b10000000000000，或 1<< 13)舍掉，大于 8192 时进入。当等于 8192 时，由于53 bits的最后一位是 0，所以也舍掉；如果53 bits的最后一位是 1 的时候，就会进入。回到原题，

var a = 111111111111111110000, 
    b = 1111; 
a + b;

当 b <= 8192 时， a + b = a。

Feb 12 '19 08:02 jparser

学习一下

Aug 02 '19 13:08 Borkes

blog blog copied to clipboard

44个 Javascript 变态题解析 (上)

第1题

第2题

第3题

第4题

第5题

第6题

第7题

第8题

第9题

第10题

第11题

第12题

第13题

第14题

第15题

第16题

第17题

第18题

第19题

第20题

第21题

第22题

第20题

blog
blog copied to clipboard