JavaScript 填坑史

前言

總括： 這是筆者平時積累的一些以爲比較有意思或是比較有難度的JavaScript題目理解和心得，會保持長期更新。

• 原文地址：Javascript填坑史

• 知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）

• 博主博客地址：Damonare的我的博客

人生莫做婦人身，百年苦樂由他人。

正文

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

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.因此本題即問

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;

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. 瀏覽器懵逼史（1）

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. 坑爹史（1）

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. 坑爹史（2）

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. 坑爹史（3）

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...
請讀者細細體會!!

11. 坑爹史（4）

[,,,].join(", ")複製代碼

[,,,] => [undefined × 3]複製代碼

由於javascript 在定義數組的時候容許最後一個元素後跟一個,, 因此這是個長度爲三的稀疏數組(這是長度爲三, 並無 0, 1, 2三個屬性哦)
答案: ", , "

12. 瀏覽器懵逼史(2)

var a = {class: "Animal", name: 'Fido'};
a.class複製代碼

這個題比較流氓.. 由於是瀏覽器相關, class是個保留字(如今是個關鍵字了);Fuck!
因此答案不重要, 重要的是本身在取屬性名稱的時候儘可能避免保留字. 若是使用的話請加引號 a['class']

13.一道容易被人輕視的面試題

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();複製代碼

14.閉包小題

for(var i = 0; i < 5; i++) {
    console.log(i);
}

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i);
}

for(var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}

for(var i = 0; i < 5; i++) {
    (function() {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}

for(var i = 0; i < 5; i++) {
    setTimeout((function(i) {
        console.log(i);
    })(i), i * 1000);
}

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);複製代碼

15. 函數的隱式轉換

function fn() {
    return 20;
}
console.log(fn + 10); // 輸出結果是多少

function fn() {
    return 20;
}

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

console.log(fn + 10);  // 輸出結果是多少？

function fn() {
    return 20;
}

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

fn.valueOf = function() {
    return 5;
}

console.log(fn + 10); // 輸出結果是多少？複製代碼

16. 函數防抖和函數節流(ES6)

//函數節流
const throttle = (fun, delay) => {
    let last = null;
    return () => {
        const now = + new Date();
        if (now - last > delay) {
            fun();
            last = now;
        }
    }
}
//實例
const throttleExample  = throttle(() => console.log(1), 1000);
//調用
throttleExample();
throttleExample();
throttleExample();
//函數防抖
const debouce = (fun, delay) => {
    let timer = null;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fun();
        }, delay);
    }
}
//實例
const debouceExample = debouce(() => console.log(1), 1000);
//調用
debouceExample();
debouceExample();
debouceExample();複製代碼