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