JavaScript 怪癖：您需要了解的內容-js教程-PHP中文網

JavaScript 怪癖：您需要了解的內容

PHPz

發布： 2024-08-01 09:10:51

原創

919 人瀏覽過

JavaScript Quirks: What You Need to Know

JavaScript 是一種強大且靈活的語言，但它也有一些怪癖，即使是經驗豐富的開發人員也會感到驚訝。了解這些奇怪的行為可以幫助您編寫更健壯且無錯誤的程式碼。在本文中，我們將探討 JavaScript 中一些最顯著的奇怪之處。

1. 類型強制

JavaScript 在某些情況下會自動轉換類型，這可能會導致意外結果。

console.log(1 + '1'); // '11' - Number 1 is coerced to a string
console.log(1 - '1'); // 0 - String '1' is coerced to a number
console.log(true + true); // 2 - true is coerced to 1
console.log('' == 0); // true - Empty string is coerced to 0
console.log([] == 0); // true - Empty array is coerced to 0

登入後複製

2. NaN 不等於 NaN

NaN 代表“Not-a-Number”，用來表示不是有效數字的值。有趣的是，NaN 不等於其自身。

console.log(NaN === NaN); // false
console.log(Number.isNaN(NaN)); // true - Correct way to check for NaN

登入後複製

3. 運算符的類型

typeof 運算子可能會傳回一些意想不到的結果。

console.log(typeof null); // 'object' - This is a long-standing bug in JavaScript
console.log(typeof []); // 'object' - Arrays are technically objects in JavaScript
console.log(typeof function(){}); // 'function' - Functions have their own type

登入後複製

4. 新增數組

由於類型強制，將兩個數組相加可能會產生令人驚訝的結果。

console.log([] + []); // '' - Both arrays are coerced to empty strings
console.log([] + {}); // '[object Object]' - Empty array is coerced to empty string, empty object is coerced to string '[object Object]'
console.log({} + []); // 0 - Here, {} is interpreted as an empty block

登入後複製

5. 浮點運算

JavaScript 使用浮點運算，可能會導致精確度問題。

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

登入後複製

6. 雙重等於（==）運算符

== 運算子在比較之前執行類型強制，這可能會導致意外結果。通常最好使用嚴格相等運算子 (===)。

console.log('' == false); // true
console.log(0 == false); // true
console.log('' == 0); // true
console.log(null == undefined); // true

登入後複製

7. var 的誤導範圍界定

用 var 宣告的變數是函數作用域，而不是區塊作用域，這可能會導致意外的行為。

if (true) {
  var x = 5;
}
console.log(x); // 5 - x is available outside the block

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 3 3 3 - Because var is function-scoped, the same i is referenced

登入後複製

8. 全域對象

在瀏覽器中，this指的是非嚴格模式下的全域window物件。這可能會導致一些令人驚訝的行為。

function foo() {
  console.log(this); // window (in browser)
}
foo();

const bar = {
  method: function() {
    console.log(this); // bar object
  }
};
bar.method();

const baz = bar.method;
baz(); // window (in browser)

登入後複製