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

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

PHPz

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

原创

933 人浏览过

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)

登录后复制