JavaScript中常見的錯(cuò)誤和解決方法

發(fā)布時(shí)間：2020-06-28 19:06:57 來源：億速云閱讀：297 作者：Leah 欄目：web開發(fā)

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹JavaScript中常見的錯(cuò)誤和解決方法，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

正文

1.setTimeout和setInterval深入理解

在setTimeout和setInterval深入理解這篇博客里筆者曾做過總結(jié)，我們知道JavaScript試單線程的產(chǎn)物，兩個(gè)函數(shù)就是利用了插入代碼的方式實(shí)現(xiàn)了偽異步，和AJAX的原理實(shí)際上是一樣的。下面來看下這個(gè)例子：

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

結(jié)果：控制臺(tái)依次輸出1,2,3;

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

你覺得這段代碼的執(zhí)行結(jié)果是什么呢？答案是，alert永遠(yuǎn)不會(huì)出現(xiàn)。
這是為什么呢？因?yàn)?，while這段代碼沒有執(zhí)行完，所以插入在后面的代碼便永遠(yuǎn)不會(huì)執(zhí)行。
綜上所述，其實(shí)JS終歸是單線程產(chǎn)物。無論如何“異步”都不可能突破單線程這個(gè)障礙。所以許多的“異步調(diào)用”（包括Ajax）事實(shí)上也只是“偽異步”而已。只要理解了這么一個(gè)概念，也許理解setTimeout和setInterval也就不難了。

2. 閉包初探小題

在JavaScript閉包初探這篇博客里面進(jìn)行了初步探討，有幾個(gè)小題個(gè)人覺得還是比較有意思的:

　　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函數(shù)，搞清楚每層fun的函數(shù)是那個(gè)fun函數(shù)尤為重要。

//答案：
//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)//求輸出結(jié)果復(fù)制代碼

首先, map接受兩個(gè)參數(shù), 一個(gè)回調(diào)函數(shù) callback, 一個(gè)回調(diào)函數(shù)的this值
其中回調(diào)函數(shù)接受三個(gè)參數(shù) currentValue, index, arrary;而題目中, map只傳入了回調(diào)函數(shù)--parseInt.其次, parseInt 只接受兩個(gè)兩個(gè)參數(shù) string, radix(基數(shù)). radix的合法區(qū)間是2-36. 0或是默認(rèn)是10.所以本題即問

parseInt('1', 0);parseInt('2', 1);parseInt('3', 2);復(fù)制代碼

后兩者參數(shù)不合法.所以答案是：[1, NaN, NaN]；

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

根據(jù)語言規(guī)范，JavaScript 采用“IEEE 754 標(biāo)準(zhǔn)定義的雙精度64位格式”（"double-precision 64-bit format IEEE 754 values"）表示數(shù)字。據(jù)此我們能得到一個(gè)有趣的結(jié)論，和其他編程語言（如 C 和 Java）不同，JavaScript 不區(qū)分整數(shù)值和浮點(diǎn)數(shù)值，所有數(shù)字在 JavaScript 中均用浮點(diǎn)數(shù)值表示，所以在進(jìn)行數(shù)字運(yùn)算的時(shí)候要特別注意。精度丟失看看下面的例子:

0.1 + 0.2 = 0.30000000000000004復(fù)制代碼

在具體實(shí)現(xiàn)時(shí)，整數(shù)值通常被視為32位整型變量，在個(gè)別實(shí)現(xiàn)（如某些瀏覽器）中也以32位整型變量的形式進(jìn)行存儲(chǔ)，直到它被用于執(zhí)行某些32位整型不支持的操作，這是為了便于進(jìn)行位操作。大整數(shù)精度在2的53次方以內(nèi)是不會(huì)丟失的，也就是說瀏覽器能精確計(jì)算Math.pow(2,53)以內(nèi)所有的數(shù)，小數(shù)精度，當(dāng)十進(jìn)制小數(shù)的二進(jìn)制表示的有限數(shù)字不超過 52 位時(shí)，在 JavaScript 里也是可以精確存儲(chǔ)的。
解決辦法：Math.round( (.1+.2)*100)/100;

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

此題會(huì)讓人誤以為是2>1&&2<3,其實(shí)不是的，這個(gè)題等價(jià)于

1<2=>true;true<3=>1<3=>true;3<2=>true;false<1=>0<1=>true;復(fù)制代碼

答案：[true,true] 這個(gè)題的重點(diǎn)是對(duì)于運(yùn)算符的理解，一是javascript對(duì)于不同類型數(shù)值的比較規(guī)則，詳見js比較表,javascript相等性判斷；二是對(duì)于比較操作符和賦值運(yùn)算符的理解，即一個(gè)自左向右一個(gè)自右向左~

6. 瀏覽器懵逼史（1）

3.toString;3..toString;3...toString;復(fù)制代碼

這個(gè)題感覺腦洞很大啊~先說答案：error,'3',error;
可如果是

var a=3;
a.toString;復(fù)制代碼

卻又合法了答案就是'3';
為啥呢？
因?yàn)樵贘S中1.1,1.,.1都是合法數(shù)字??！那么在解析3.toString的時(shí)候到底是這是個(gè)數(shù)字呢，還是方法調(diào)用呢？瀏覽器就懵逼了唄，只能拋出一個(gè)error,所以說感覺此題就是在戲耍瀏覽器......

7. 聲明提升

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

答案是什么呢...筆者第一次做的時(shí)候傻傻的覺得是Hello,world...實(shí)則不然，正確答案是:Goodbye Jack;
為什么呢，聲明提升...上述代碼相當(dāng)于下面的代碼：

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?因?yàn)閇0]被看做Boolean是被認(rèn)為是true，理所當(dāng)然的推出來[0]==true,控制臺(tái)輸出true...看似沒錯(cuò)，然而并不是這樣滴~[0]這個(gè)玩意兒在單獨(dú)使用的時(shí)候是被認(rèn)為是true的，但用作比較的時(shí)候它是false...所以正確答案是false；不信的話，F(xiàn)12控制臺(tái)輸出[0]==false；看是不是true......

###9. 坑爹史（2）

1 + - + + + - + 1

這題應(yīng)該是等同于：（倒著看）

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語法，實(shí)在坑的不行...arguments
首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.也就是說 arguments 是一個(gè) object, c 就是 arguments2, 所以對(duì)于 c 的修改就是對(duì) arguments2 的修改.
所以答案是 21.
然而!!!!!!
當(dāng)函數(shù)參數(shù)涉及到 any rest parameters, any default parameters or any destructured parameters 的時(shí)候, 這個(gè) arguments 就不在是一個(gè) mapped arguments object 了.....請(qǐng)看:

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...
請(qǐng)讀者細(xì)細(xì)體會(huì)!!

11. 坑爹史（4）

[,,,].join(", ")

[,,,] => [undefined × 3]

因?yàn)閖avascript 在定義數(shù)組的時(shí)候允許最后一個(gè)元素后跟一個(gè),, 所以這是個(gè)長度為三的稀疏數(shù)組(這是長度為三, 并沒有 0, 1, 2三個(gè)屬性哦)
答案: ", , "

12. 瀏覽器懵逼史(2)

var a = {class: "Animal", name: 'Fido'};
a.class

這個(gè)題比較流氓.. 因?yàn)槭菫g覽器相關(guān), class是個(gè)保留字(現(xiàn)在是個(gè)關(guān)鍵字了);Fuck!
所以答案不重要, 重要的是自己在取屬性名稱的時(shí)候盡量避免保留字. 如果使用的話請(qǐng)加引號(hào) 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);}

//請(qǐng)寫出以下輸出結(jié)果：
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. 函數(shù)的隱式轉(zhuǎn)換

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

function fn() {
    return 20;
}

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

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

function fn() {
    return 20;
}

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

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

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

16. 函數(shù)防抖和函數(shù)節(jié)流(ES6)

//函數(shù)節(jié)流
const throttle = (fun, delay) => {
    let last = null;
    return () => {
        const now = + new Date();
        if (now - last > delay) {
            fun();
            last = now;
        }
    }
}
//實(shí)例
const throttleExample  = throttle(() => console.log(1), 1000);
//調(diào)用
throttleExample();
throttleExample();
throttleExample();
//函數(shù)防抖
const debouce = (fun, delay) => {
    let timer = null;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fun();
        }, delay);
    }
}
//實(shí)例
const debouceExample = debouce(() => console.log(1), 1000);
//調(diào)用
debouceExample();
debouceExample();
debouceExample();

關(guān)于JavaScript中常見的錯(cuò)誤和解決方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)