JavaScript 中的一些奇怪問題

JavaScript 在開發程序中可能會出現很多奇怪的問題，以下是一些示例：

1、變數提升問題

變數提升是 JavaScript 中一個常見的問題，特別是當沒有充分理解變數作用域和宣告提升時，以下是一個變數提升導致的問題示例：

var a = 1;
function foo() {
  console.log(a);
  var a = 2;
}
foo(); // 輸出：undefined

預期輸出是 1，但實際上輸出的是 undefined，這是因為在函式內部宣告了一個同名變數 a，函式作用域內的變數宣告被提升到了函式開頭，所以 console.log(a) 實際上輸出的是 undefined，

解決該問題的方法是使用 let 或 const 關鍵字宣告變數，這樣可以避免變數提升和作用域污染：

let a = 1;
function foo() {
  console.log(a);
  let a = 2;
}
foo(); // 輸出：報錯 Uncaught ReferenceError: Cannot access 'a' before initialization

2、this 指向問題

this 關鍵字在 JavaScript 中非常重要，但也很容易導致問題，this 關鍵字的指向是動態的，它的值取決于函式的呼叫方式，以下是一個 this 關鍵字導致的問題示例：

var name = "John";

var person = {
  name: "Bob",
  sayName: function () {
    console.log("name", this.name);
  },
};

var sayName = person.sayName;

sayName();

預期輸出是 "Bob"，但實際上輸出的是 "John"，這是因為在全域作用域中呼叫 sayName 函式時，this 指向的是全域物件 window，而全域作用域中定義的 name 變數值為 "John"，

解決該問題的方法是使用 call、apply 或 bind 方法來改變 this 的指向：

sayName.call(person);

3、`==` 和 `===` 比較問題

console.log(false == "0"); // 輸出 true
console.log(false === "0"); // 輸出 false

在第一行中，"0" 被轉換為 false，因此 false == false，結果為 true，在第二行中，使用了嚴格相等運算子 ===，它不會自動轉換型別，因此 false 和 "0" 不相等，結果為 false，

JavaScript 中的 == 和 === 都是比較運算子，用于比較兩個值是否相等，它們之間的主要區別在于它們在比較時進行的型別轉換的方式不同，

== 比較運算子會進行型別轉換，它在比較之前會嘗試將兩個運算元轉換為相同的型別，具體來說，如果比較的兩個運算元的型別不同，則會按照一定的規則進行型別轉換，轉換后再進行比較，以下是 == 運算子的型別轉換規則：

如果比較的兩個運算元都是字串，則將它們轉換為數字進行比較，
如果其中一個運算元是數字，另一個運算元是字串，則將字串轉換為數字進行比較，
如果其中一個運算元是布林值，則將其轉換為數字進行比較，
如果其中一個運算元是物件，另一個運算元是原始型別，則將物件轉換為原始型別再進行比較，

例如：

1 == "1"; // true
true == 1; // true
null == undefined; // true

=== 恒等運算子不會進行型別轉換，它僅在兩個運算元嚴格相等時回傳 true，兩個運算元嚴格相等的定義是它們的型別和值都相等，以下是 === 運算子的比較規則：

如果比較的兩個運算元型別不同，則回傳 false，
如果比較的兩個運算元都是物件，則僅當它們參考同一個物件時才回傳 true，
如果比較的兩個運算元都是原始型別，則僅當它們的型別和值都相等時才回傳 true，

例如：

1 === "1"; // false
true === 1; // false
null === undefined; // false

因為 === 恒等運算子不會進行型別轉換，所以它通常比 == 比較運算子更加嚴格和安全，在比較兩個值時，建議優先使用 === 運算子，只有在明確需要進行型別轉換時，才應該使用 == 運算子，

4、回圈中的異步問題

異步操作是 JavaScript 中一個重要的特性，但也容易導致一些問題，以下是一個異步操作導致的問題示例：

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

預期輸出是 0、1、2、3、4，但實際上輸出的是 5、5、5、5、5，因為 setTimeout 函式是一個異步操作，它會在回圈結束后再執行，當 setTimeout 函式被呼叫時，i 的值已經變成了 5，因此它會輸出 5，而不是預期的 0、1、2、3 和 4，為了解決這個問題，可以使用立即呼叫的函式運算式（IIFE）或 let 關鍵字來解決變數作用域的問題，

通過使用 IIFE 來來解決該問題：

for (var i = 0; i < 5; i++) {
  (function (j) {
    setTimeout(function () {
      console.log(j);
    }, 1000);
  })(i);
}
// 輸出 0、1、2、3、4

5、參考型別比較問題

在 JavaScript 中，參考型別（如陣列和物件）的比較可能導致一些奇怪的問題，以下是一個參考型別比較導致的問題示例：

console.log([] == []); // 輸出 false
console.log([] === []); // 輸出 false

這是因為 JavaScript 中比較參考型別時，比較的是它們在記憶體中的地址，而不是它們的內容，因此，兩個空陣列雖然看起來相同，但它們在記憶體中的地址不同，因此比較結果為 false，

6、變數命名問題

不恰當的變數命名可能導致一些問題，以下是一個變數命名導致的問題示例：

var NaN = "not a number";
console.log(NaN); // 輸出 NaN
console.log(typeof NaN); // 輸出 "number"

因為 NaN 是 JavaScript 中一個關鍵字，表示 Not a Number，不應該被用作變數名，因為變數名和關鍵字相同，所以 typeof 運算子回傳了 "number"，而不是預期的 "string"，

7、資料型別轉換問題

JavaScript 中有很多不同的資料型別，型別轉換可能導致一些奇怪的問題，以下是一個資料型別轉換導致的問題示例：

console.log(1 + "2" + "2"); // 輸出 "122"
console.log(1 + +"2" + "2"); // 輸出 "32"
console.log(1 + -"1" + "2"); // 輸出 "02"
console.log(+"1" + "1" + "2"); // 輸出 "112"
console.log("A" - "B" + "2"); // 輸出 "NaN2"
console.log("A" - "B" + 2); // 輸出 NaN

這些奇怪的輸出都是因為型別轉換造成的，例如在第一行中，數字 1 和字串 "2" 相加，得到字串 "12"，然后再和字串 "2" 相加，得到字串 "122"，

8、NaN 的比較問題

NaN 是一種特殊的數值，表示 "Not a Number"，在 JavaScript 中，NaN 與任何值都不相等，包括它自己，以下是一個 NaN 比較導致的問題示例：

console.log(NaN == NaN); // 輸出 false
console.log(NaN === NaN); // 輸出 false

解決該問題的方法是使用全域函式 isNaN() 來判斷一個值是否為 NaN：

console.log(isNaN(NaN)); // 輸出 true

9、0.1 + 0.2 不等于 0.3 問題

在 JavaScript 中，使用浮點數進行計算時，可能會出現精度問題，例如，0.1 + 0.2 的結果并不是 0.3，以下是一個精度問題導致的問題示例：

console.log(0.1 + 0.2 == 0.3); // 輸出 false

解決該問題的方法是將浮點數轉換為整數進行計算，最后再將結果除以 10，或者使用 Number.EPSILON 來比較兩個浮點數是否相等：

console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // 輸出 true

參考：JavaScript 中 0.1+0.2 不等于 0.3 的問題

10、最大整數問題

在 JavaScript 中，最大整數可以通過訪問 Number.MAX_SAFE_INTEGER 屬性來獲取，這個屬性的值為 9007199254740991，它是 JavaScript 中可安全表示的最大整數，超過這個值的整數將不再被準確表示，例如，9007199254740992 將被表示為 9007199254740992，但是 9007199254740993 將被表示為 9007199254740992，因為它超出了 JavaScript 可以準確表示的整數范圍，

11、布林值的算術運算問題

在 JavaScript 中，當對布林值使用算術運算子時，它們會被自動轉換為數字型別，true 被轉換為數字 1，false 被轉換為數字 0，

console.log(true + true); // 輸出：2

console.log(true - true); // 輸出：0

12、閉包導致的問題

12.1、記憶體泄漏問題

閉包中參考的外部變數不會被垃圾回收，可能導致記憶體泄漏，以下是導致記憶體泄漏的示例代碼：

function outerFunction() {
  var bigArray = new Array(1000000);

  return function innerFunction() {
    console.log(bigArray);
  };
}

var inner = outerFunction();

// 忘記釋放 inner 函式會導致記憶體泄漏

解決方法：

在使用閉包時，確保在不再需要它時釋放它，在此示例中，可以將 inner 變數設定為 null 以釋放閉包，

function outerFunction() {
  var bigArray = new Array(1000000);

  return function innerFunction() {
    console.log(bigArray);
  };
}

var inner = outerFunction();

// 使用完 inner 函式后釋放它
inner = null;

12.2、意外的變數共享

如果多個閉包共享同一個外部變數，它們可能會意外地修改該變數的值，導致意想不到的結果，以下是示例代碼：

function createFunctions() {
  var result = [];

  for (var i = 0; i < 5; i++) {
    result[i] = function () {
      console.log("Index: " + i);
    };
  }

  return result;
}

var functions = createFunctions();

// 所有函式輸出的值都是 5，而不是預期的 0、1、2、3、4
functions[0](); // 輸出 "Index: 5"
functions[1](); // 輸出 "Index: 5"
functions[2](); // 輸出 "Index: 5"
functions[3](); // 輸出 "Index: 5"
functions[4](); // 輸出 "Index: 5"

解決方法：

在回圈中使用閉包時，需要創建一個新的作用域來存盤回圈變數的值，可以使用立即呼叫的函式運算式（IIFE）來創建一個新的作用域，以下是修改后的代碼：

function createFunctions() {
  var result = [];

  for (var i = 0; i < 5; i++) {
    (function (i) {
      result[i] = function () {
        console.log("Index: " + i);
      };
    })(i);
  }

  return result;
}

var functions = createFunctions();

// 此時，每個函式都輸出正確的值
functions[0](); // 輸出 "Index: 0"
functions[1](); // 輸出 "Index: 1"
functions[2](); // 輸出 "Index: 2"
functions[3](); // 輸出 "Index: 3"
functions[4](); // 輸出 "Index: 4"

12.3、回圈中的問題

在回圈中使用閉包時，可能會出現問題，如果在閉包中使用回圈變數，它們將共享同一個值，可能導致錯誤結果，以下是示例代碼：

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

上述代碼屬于閉包情況，請參考《JavaScript 回呼函式屬于閉包？》

解決方法：

與上一個示例類似，可以使用 IIFE 創建一個新的作用域來存盤回圈變數的值，以下是修改后的代碼：

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

或者可以使用 let 關鍵字宣告回圈變數，它會在每次迭代中創建一個新的變數，從而避免共享變數的問題，以下是使用 let 關鍵字的代碼：

for (let i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

使用 let 關鍵字是更加簡單和可讀性更高的方法，因為它會自動解決共享變數的問題，但是在一些較老的瀏覽器版本中可能不支持 let 關鍵字，因此使用 IIFE 是更通用的解決方法，

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17174558.html

宣告：歡迎任何形式的轉載，但請務必注明出處！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545761.html

標籤：其他

上一篇：第125篇: 期約Promise基本特性

下一篇：JavaScript 回呼函式屬于閉包？

JavaScript 中的一些奇怪問題

JavaScript 中的一些奇怪問題

1、變數提升問題

2、this 指向問題

3、== 和 === 比較問題

4、回圈中的異步問題

5、參考型別比較問題

6、變數命名問題

7、資料型別轉換問題

8、NaN 的比較問題

9、0.1 + 0.2 不等于 0.3 問題

10、最大整數問題

11、布林值的算術運算問題

12、閉包導致的問題

12.1、記憶體泄漏問題

12.2、意外的變數共享

12.3、回圈中的問題

3、`==` 和 `===` 比較問題