1.setTimeout和setInterval深入理解

在setTimeout和setInterval深入理解这篇博客里笔者曾做过总结，我们知道JavaScript试单线程的产物，两个函数就是利用了插入代码的方式实现了伪异步，和AJAX的原理实际上是一样的。下面来看下这个例子：

console.log("1");
setTimeout(function(){
        console.log("3")
    },0);
    console.log("2");

结果：控制台依次输出1,2,3;

function fn() {
setTimeout(function(){alert('can you see me?');},1000);
while(true) {}
}

你觉得这段代码的执行结果是什么呢？答案是，alert永远不会出现。
这是为什么呢？因为，while这段代码没有执行完，所以插入在后面的代码便永远不会执行。
综上所述，其实JS终归是单线程产物。无论如何“异步”都不可能突破单线程这个障碍。所以许多的“异步调用”（包括Ajax）事实上也只是“伪异步”而已。只要理解了这么一个概念，也许理解setTimeout和setInterval也就不难了

2. 闭包初探小题

在JavaScript闭包初探这篇博客里面进行了初步探讨，有几个小题个人觉得还是比较有意思的:

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());//The Window

　  var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};　　alert(object.getNameFunc()());//My Object

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?

//问:三行a,b,c的输出分别是什么？

这是一道非常典型的JS闭包问题。其中嵌套了三层fun函数，搞清楚每层fun的函数是那个fun函数尤为重要。

//答案：
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

分析
首先来看第一行

var a = fun(0);
等同于fun(0, undefined)，因为未传递第二参数，所以打印undefined；
a.fun(1);
因为闭包的存在，所以n依然在内存中存在，所以此式等同于fun(0, undefined).fun(1)；
所以a.fun(1)返回的就是fun(m, n)；
m是传进去的参数1，n是内存中依然存在的0，所以实际返回的是fun(1, 0);因此打印的值为0,；
后面两步就同理了；
注意：这一步弄明白，这道题基本就明白了。所以一定要注意。第一行的后面两步就换了一下参数。第二行就相当于一直迭代，第三行就是稍加变化，重点在这一步。
a.fun(2);
返回fun(2, 0),依然打印0；
a.fun(3);
返回fun(3, 0),依然打印0；
所以第二行打印值为undefined,0,0,0

第二行

var b = fun(0)
从这来看，和第一行暂时一样，打印undefined；
.fun(1)
此时和第一行第二步也是一样，返回fun(1, 0), 打印0；
.fun(2)
这一步其实已经变为fun(1, 0).fun(2)，弄明白了上面，你一定知道这一步应该返回的是fun(2, 1);因为此时在内存中的n是1；所以打印值为1；
.fun(3)
和上一步道理相同，n变为2，即fun(3, 2)；打印2；
所以第二行打印值为undefined,0,1,2
第三行就是一二行的结合，如果弄懂了上面两行，第三行不过是一个验证的过程。也就不在多说。
输出为 undefined,0,1,1

3. Array/map,Number/parseInt

["1", "2", "3"].map(parseInt)//求输出结果 首先, map接受两个参数, 一个回调函数 callback, 一个回调函数的this值其中回调函数接受三个参数 currentValue, index, arrary;而题目中, map只传入了回调函数--parseInt.其次, parseInt 只接受两个两个参数 string, radix(基数). radix的合法区间是2-36. 0或是默认是10. map的回调函数的参数index索引值作了parseInt的基数radix，导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN
所以本题即问
parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);后两者参数不合法.所以答案是：[1, NaN, NaN]；

4. 0.1+0.2!=0.3和9999999999999999 == 10000000000000000;

根据语言规范，JavaScript 采用“IEEE 754 标准定义的双精度64位格式”（"double-precision 64-bit format IEEE 754 values"）表示数字。据此我们能得到一个有趣的结论，和其他编程语言（如 C 和 Java）不同，JavaScript 不区分整数值和浮点数值，所有数字在 JavaScript 中均用浮点数值表示，所以在进行数字运算的时候要特别注意。精度丢失看看下面的例子:

0.1 + 0.2 = 0.30000000000000004

在具体实现时，整数值通常被视为32位整型变量，在个别实现（如某些浏览器）中也以32位整型变量的形式进行存储，直到它被用于执行某些32位整型不支持的操作，这是为了便于进行位操作。大整数精度在2的53次方以内是不会丢失的，也就是说浏览器能精确计算Math.pow(2,53)以内所有的数，小数精度，当十进制小数的二进制表示的有限数字不超过 52 位时，在 JavaScript 里也是可以精确存储的。
解决办法：Math.round( (.1+.2)*100)/100;

es6误差检查函数

function withinErrorMargin (left, right) {
  return Math.abs(left - right) < Number.EPSILON * Math.pow(2, 2);
}

0.1 + 0.2 === 0.3 // false
withinErrorMargin(0.1 + 0.2, 0.3) // true

1.1 + 1.3 === 2.4 // false
withinErrorMargin(1.1 + 1.3, 2.4) // true

5. [1<2<3,3<2<1]

此题会让人误以为是2>1&&2<3,其实不是的，这个题等价于

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

答案：[true,true] 这个题的重点是对于运算符的理解，一是javascript对于不同类型数值的比较规则，详见js比较表,javascript相等性判断；二是对于比较操作符和赋值运算符的理解，即一个自左向右一个自右向左~

6. 浏览器懵逼史

3.toString;
3..toString;
3...toString;这个题感觉脑洞很大啊~先说答案：error,'3',error;可如果是
var a=3;
a.toString;却又合法了答案就是'3';为啥呢？因为在JS中1.1,1.,.1都是合法数字啊！那么在解析3.toString的时候到底是这是个数字呢，还是方法调用呢？浏览器就懵逼了呗，只能抛出一个error,所以说感觉此题就是在戏耍浏览器......

7. 声明提升

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

答案是什么呢...笔者第一次做的时候傻傻的觉得是Hello,world...实则不然，正确答案是:Goodbye Jack;为什么呢，声明提升...上述代码相当于下面的代码：

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

8. [0]用作比较的时候它是false

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

}读者们你们觉得此题答案是什么呢？true?因为[0]被看做Boolean是被认为是true，理所当然的推出来[0]==true,控制台输出true...看似没错，然而并不是这样滴~[0]这个玩意儿在单独使用的时候是被认为是true的，但用作比较的时候它是false...所以正确答案是false；不信的话，F12控制台输出[0]==false；看是不是true......

9. 1 + - + + + - + 1

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

10. arguments

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语法，实在坑的不行...arguments
首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.也就是说 arguments 是一个 object, c 就是 arguments2, 所以对于 c 的修改就是对 arguments2 的修改.
所以答案是 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...
sidEffecting(arguments);和sidEffecting([a,b,c]);的区别
在一般模式下，如果定义了一个函数，调用它并且传递参数，那么它对应的形参和arguments有一个相互的绑定关系，就是说如果我们修改了arguments[2]，那么这个函数对应的形参c就会被修改了。
在严格模式下，arguments变为参数的静态副本，就是说无论怎么修改arguments[2],其值也不会变.

所以如果你想达到目的,可以吧c=10;替换为arguments[2]=10

11. join

join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。

[,,,].join(", ")
[,,,] => [undefined × 3]

因为javascript 在定义数组的时候允许最后一个元素后跟一个,, 所以这是个长度为三的稀疏数组(这是长度为三, 并没有 0, 1, 2三个属性)
答案: ", , "

12.一道容易被人轻视的面试题

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

注：解析传送门 尝试解析js面试题（一）

13.闭包小题

for(var i = 0; i < 5; i++) {
    console.log(i);
}
//0,1,2,3,4
不用解释吧

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i);
}
//5,5,5,5,5
解析：同步>异步>回调（promise）
因为是setTimeout是异步的。
正确的理解setTimeout的方式(注册事件)： 有两个参数，第一个参数是函数，第二参数是时间值。
 调用setTimeout时，把函数参数，放到事件队列中。等主程序运行完，再调用。
原题等价于：
var i = 0;
i++;
i++;
i++;
i++;
i++;
setTimeout(function() {
    console.log(i);
}, 0);
setTimeout(function() {
    console.log(i);
}, 0);
setTimeout(function() {
    console.log(i);
}, 0);  
setTimeout(function() {
    console.log(i);
}, 0);  
setTimeout(function() {
    console.log(i);
}, 0);  

for(var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}
//0,1,2,3,4
解析：我们想要让输出结果依次执行，我们就必须借助闭包的特性，每次循环时，将i值保存在一个闭包中，当setTimeout中定义的操作执行时，则访问对应闭包保存的i值即可。

而我们知道在函数中闭包判定的准则，即执行时是否在内部定义的函数中访问了上层作用域的变量。因此我们需要包裹一层自执行函数为闭包的形成提供条件。

因此，我们只需要2个操作就可以完成题目需求，一是使用自执行函数提供闭包条件，二是传入i值并保存在闭包中。

也可以在setTimeout的第一个参数处利用闭包:
for(var i = 0; i < 5; i++) {
    setTimeout((function(i) {
        console.log(i);
    })(i), i * 1000);
}
//0,1,2,3,4

如果不满足传入i值并保存在闭包中，则像这样：
for(var i = 0; i < 5; i++) {
    (function() {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}
//5,5,5,5,5
for(var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })();
}
// undefine

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);
//2,3,5,4,1
解析：同步>异步>回调（promise）

14. 函数的隐式转换

function fn() {
    return 20;
}
console.log(fn + 10);
 // function fn() {
      return 20;
    }10

function fn() {
    return 20;
}

fn.toString = function() {
    return 10;
}

console.log(fn + 10);  // 20

function fn() {
    return 20;
}

fn.toString = function() {
    return 10;
}

fn.valueOf = function() {
    return 5;
}
console.log(fn + 10);   // 15

解析： 1，当加号运算符时，String和其他类型时，其他类型都会转为 String；其他情况，都转化为Number类型 ， 注： undefined 转化为Number是 为’NaN‘， 任何Number与NaN相加都为NaN。
2，其他运算符时， 基本类型都转换为 Number，String类型的带有字符的比如： '1a' ,'a1' 转化为 NaN 与undefined 一样。
3，Number类型会先调用valueOf(), String类型会先调用toString(), 如果结果是原始值，则返回原始值，否则继续用toString 或 valueOf(),继续计算，如果结果还不是原始值，则抛出一个类型错误;

15. 考察this

var length = 10;
function fn() {
  console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1);

输出：10， 2
第一次输出10应该没有问题。我们知道取对象属于除了点操作符还可以用中括号，所以第二次执行时相当于arguments调用方法，this指向arguments，而这里传了两个参数，故输出arguments长度为2。

16、var和函数的提前声明

function fn(a) {
  console.log(a); 
  var a = 2;
  function a() {}
  console.log(a); 
}
fn(1);

输出：function a() {} ， 2
我们知道var和function是会提前声明的，而且function是优先于var声明的（如果同时存在的话），所以提前声明后输出的a是个function，然后代码往下执行a进行重新赋值了，故第二次输出是2。

17、局部变量和全局变量

var f = true;
if (f === true) {
  var a = 10;
}

function fn() {
  var b = 20;
  c = 30;
}

fn();
console.log(a);
console.log(b);
console.log(c);

输出：10 报错 30　　
function内的新声明的变量才是局部变量，而没有用var声明的变量在哪里都是全局变量。再次提醒切记只有function(){}内新声明的才能是局部变量，while{...}、if{...}、for(..) 之内的都是全局变量（除非本身包含在function内）。

18、给基本类型数据添加属性，不报错，但取值时是undefined

var a = 10;
a.pro = 10;
console.log(a.pro + a);

var s = 'hello';
s.pro = 'world';
console.log(s.pro + s);

答案：NaN undefinedhello
给基本类型数据加属性不报错，但是引用的话返回undefined，10+undefined返回NaN，而undefined和string相加时转变成了字符串。