20个 Js 变态题解析

原题来自: javascript-puzzlers

第一题

        /*
         * 解析：
         *    map的语法：.map(callback(index,domElement))
         *     map接收两个参数: map调用者this(aray)和回调函数，回调函数有两个参数:
                     如果this是普通数组，index是当前遍历的元素，domElement是索引
                     如果this是jquery对象数组，index是索引，domElement是当前遍历的元素
             return: 由回调函数中的返回值组成的新的数组
         *  parseInt的语法：parseInt(string, radix), 
         *     string必选。要被解析的字符串 
         *     radix可选。解析数字的基数，介于2~36之间，省略或为0则将以10为基数来解析，
                         小于2或大于36 则 parseInt() 将返回 NaN。
         *    return: 解析后的数字
             
         *    所以本题就是问：
         *    parseInt('1', 0);
         *    parseInt('2', 1);
         *    parseInt('3', 2);
         *
         *  所以结果输出： [1, NaN, NaN]
         */
        console.info(["1", "2", "3"].map(parseInt));
    

第二题

        /*
         * 解析：
         *    typeof 返回一个表示类型的字符串
             typeof 的结果请看下面:
             **type**         **result**
             Undefined   "undefined"
             Null        "object"
             Boolean     "boolean"
             Number      "number"
             String      "string"
             Symbol      "symbol"
             Host object Implementation-dependent
             Function    "function"
             Object      "object"

             instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上
             
             所以输出["object", false]
         */
        function two(){
            console.info([typeof null, null instanceof Object]); //["object", false]
        }

第三题

        /*
          解析：
             reduce语法：array.reduce(callbackfn[, initialValue])
                array必需。一个数组对象。
                callbackfn 必需。
                    回调函数接受四个参数 previousValue, currentValue, currentIndex, array。
                    对于数组中的每个元素，reduce 方法都会调用 callbackfn 函数一次。
                initialValue 可选。如果指定 initialValue，则它将用作初始值来启动累积。
                            第一次调用 callbackfn 函数会将此值作为参数而非数组值提供。
            
                当满足下列任一条件时，将引发 TypeError 异常：
                    1.callbackfn 参数不是函数对象。
                    2.数组不包含元素，且未提供 initialValue。
            Math.pow语法: Math.pow(x,y)。
                pow() 方法可返回 x 的 y 次幂的值。
            
            所以第二个表达式会报异常. 
            第一个表达式等价于 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9
         */
        console.info([ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]);

第四题

/*
   解析：
     + 优先级大于 ?
   此题等价于： 'Value is true' ? 'Something' : 'Nothing'
   所以结果是：'Something'
*/
var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

第五题

/*
    解析：
       变量声明提前，在 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
*/
var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

第六题

/*
    [JavaScript中的稀疏数组与密集数组][1]
    
    解析：
      一般来说,JavaScript中的数组是稀疏的,也就是说,数组中的元素之间可以有空隙
      其实在javascript中并没有常规的数组，所有的数组其实就是一个对象。
      javascript的数组根本没有索引，因为索引是数字，而js中数组的索引是string,
      arr[1]其实就是arr["1"],给arr["1000"] = 1,arr.length也会自动变为1001.
      这些表现的根本原因就是,JavaScript中的对象就是字符串到任意值的键值对.注意键只能是字符串.
    
    看一下 Array.prototype.filter 的部分代码:
    
    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);
        }
      }
    }
    从上面可知filter对数组进行遍历时，会首先检查这个索引值是不是数组的一个属性.测试一下：
    console.info(0 in ary); //true
    console.info(1 in ary); //true
    console.info(4 in ary); //false
    console.info(10 in ary); // false
    也就是说3~9的索引根本没有是初始化
    
    所以答案：[];
*/
var ary = [0,1,2];
ary[10] = 10;
console.info(ary.filter(function(x) { return x === undefined;}));

第七题

/*    
    答案：[true, false]
    解析：
        JavaScript的设计缺陷?浮点运算：0.1 + 0.2 != 0.3
        其实在大多数语言里在做浮点运算时都会有丢失精度的问题。
        console.info(0.7+0.1);//输出0.7999999999999999
        console.info(0.2+0.1);//输出 0.30000000000000004
        console.info(0.5+0.1); //输出0.6
        那这是js的问题吗？当然不是。你的电脑做着正确的二进制浮点运算，
        但问题是你输入的是十进制的数，电脑以二进制运算，
        这两者并不是总是转化那么好的，有时候会得到正确的结果，但有时候就不那么幸运了
*/
var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
[two - one == one, eight - six == two]

第八题

/*
    解析：
        switch 是严格比较。
        直接看这个：
        var str = 'foo';
        var obj = new String(str);

        console.log(typeof str); // "string"
        console.log(typeof obj);  // "object"
        console.log(str === obj); // false
    
    答案： 'Do not know!'
*/
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'));

第九题

/*
    解析：
    还是上题的知识点，不过String 不仅是一个构造函数，直接调用会返回一个字符串

    答案：'Case A'
*/
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'));

第十题

/*
    解析： 这题没什么可说的，
    console.info([] instanceof Array); // true
    console.info([] instanceof Object); // true
    []是一个数组对象. [] == [] 等价于：
    var a = [];
    var b = [];
    a == b; 所以肯定是false
*/
console.log([]==[]); //false

第十一题

/*
    解析：
        +用来表示两个数的和或者字符串拼接, -表示两数之差
        - 会尽可能的将两个操作数变成数字, 而 + 如果两边不都是数字, 那么就是字符串拼接
*/
console.info('5' + 3) // 53
console.info('5' - 3) // 2

第十二题

/*
    解析：
        函数内部的arguments局部变量其实就是该函数的实际参数数组，
        所以c就是arguments[2], 也就是说对c的修改就是对arguments[2]的修改。
        所以答案是：21， 如果说这个题还可以, 下面第十三题真就有些变天了
*/
function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1);

第十二题

/*
    解析：
        当函数参数涉及到 any rest parameters,
        any default parameters or any destructured parameters 的时候, 
        这个 arguments 就不在是一个 mapped arguments object 了....., 
        所以答案是12，这个需要好好体会一下
*/
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);

第十三题

/*
    同第六题 稀疏数组，题中数组长度为3，但是只初始化了一个索引，array上的操作会跳过未初始化的索引
    答案：["1", undefined, undefined]
*/
var ary = Array(3);
ary[0]=2
ary.map(function(elem) { return '1'; });

第十四题

/*
   解析：
    这个题会让人误以为是 2 > 1 && 2 < 3 其实不是的.
    这个题相当于：
    1 < 2 => true;
    true < 3 => 1 < 3 =>true;
    3 < 2 => false;
    false < 1 => 0 < 1 =>true;
    
    所以答案是：[true, true]
*/
console.info([1 < 2 < 3, 3 < 2 < 1]);

第十五题

/*
    解析：
      1、对于string,number等基础类型，==和===是有区别的
       1）不同类型间比较，==只比较“转化成同一类型后的值”看“值”是否相等，
            ===如果类型不同，其结果就是不等
       2）同类型比较，直接进行“值”比较，两者结果一样
      2、对于Array,Object等高级类型，==和===是没有区别的
            进行“指针地址”比较
      3、基础类型与高级类型，==和===是有区别的
       1）对于==，将高级转化为基础类型，进行“值”比较
       2）因为类型不同，===结果为false

        
*/
console.info(2 == [2]); // true

第十六题

 /*
    因为在 js 中 1.1, 1., .1 都是合法的数字. 
    那么在解析 3.toString 的时候这个 . 到底是属于这个数字还是函数调用呢? 只能是数字, 因为3.合法啊!
  */

3.toString() //error
3..toString() // '3'
3...toString() // error
var a = 3;
a.toString(); // '3'

第十七题

/*
    解析：
        y 被赋值到全局. x 是局部变量. 所以打印 x 的时候会报 ReferenceError
    
*/
(function(){
  var x = y = 1;
})();
console.log(y); // 1
console.log(x); // error

第十八题

/*
    解析：
    具体的对象没有prototype属性，所以a.prototype是undefined,
    Object.getPrototypeOf(obj) 返回一个具体对象的原型
    
    答案：false, true
*/
var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

第十九题

/*
    解析：
       用new创建f的实例的原型指向 f.prototype，也就是：
       f.prototype == Object.getPrototypeOf(new f()); // true
       而Object.getPrototypeOf(f)是 f 函数的原型，也就是：
       Object.getPrototypeOf(f) == Function.prototype; //true
      所以答案是 false
*/
function f() {}
var a = f.prototype, b = Object.getPrototypeOf(f);
a === b

第二十题

/*
    解析：
        foo.name 是函数的名字，函数的名字是不可变的，
        这里出错的原因是容易把name理解成foo的 static 属性,
        我的理解是name是foo函数的固有属性，可以理解为是final的
    答案：['foo', 'foo']
*/
function foo() { }
var oldName = foo.name;
foo.name = "bar";
[oldName, foo.name]

ps：笔者只是按着自己的理解整理的，水平有限，有不对之处还望指出。
参考：https://github.com/xiaoyu2er/blog/issues