首頁  >  文章  >  web前端  >  JavaScript容易被坑的問題

JavaScript容易被坑的問題

hzc
hzc轉載
2020-06-28 09:50:232207瀏覽

前言

總括: 這是筆者平時累積的一些覺得比較有趣或比較有難度的JavaScript題目理解和心得,會維持長期更新。

人生莫作婦人身,百年苦樂由他人。

正文

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位元格式」(#根據語言規範,JavaScript 採用「IEEE 754 標準定義的雙精度 64-presion" 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. [1fe3ad94b9a295974e34413b759edeb9f1&&2c695eeb469a5d68159456e93077cdb71true;truee5dfd1e04a098d470fd53bdae68047611e5dfd1e04a098d470fd53bdae6804761true;325346d3d65c60a4c2739f19f2f21fdd8true;false66a8cecc548e92eefe204758893a9e9e066a8cecc548e92eefe204758893a9e9etrue;复制代码

#答案:[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();

推荐教程:《JS教程

以上是JavaScript容易被坑的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除