JavaScript易错知识点整理

本文将整理出JavaScript中经常易错的知识点，包括但不限于变量作用域、数据类型、语法注意点等。通过阅读本文，你将能够更加熟练地使用JavaScript。

变量作用域

var声明变量的作用域

在JavaScript中，使用var声明的变量，其作用域为函数级作用域。这意味着在函数内部声明的变量，在函数外部是无法访问的。但是如果在函数内部使用了var声明的变量，在函数外部同样可以访问到这个变量，这是因为JavaScript有变量提升的机制。

示例：

function foo() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 输出结果为10
}

foo();

在上面的示例中，函数内部使用var声明了一个x变量，在if语句块内进行了赋值操作。如果没有使用var进行声明的话，x变量的作用域仅限于if语句块内部。

let和const声明变量的作用域

在ES6中引入了let和const来声明变量，它们的作用域为块级作用域。这意味着在块级作用域内声明的变量，在块外部是无法访问的。

示例：

function foo() {
  if (true) {
    let x = 10;
    const y = 20;
  }
  console.log(x); // 报错：x未定义
  console.log(y); // 报错：y未定义
}

foo();

在上面的示例中，使用let和const声明的变量，其作用域仅限于if语句块内部。在块外部访问这些变量会报错。

数据类型

NaN

NaN是JavaScript中的特殊值，它表示“不是一个数字”。使用isNaN()函数可以判断一个值是否为NaN。但是需要注意的是，NaN与任何值都不相等，包括自己本身。

示例：

console.log(NaN == NaN); // 输出结果为false
console.log(isNaN(NaN)); // 输出结果为true
console.log(isNaN('abc')); // 输出结果为true

在上面的示例中，第一个console.log输出结果为false，这是因为NaN与任何值都不相等，包括自己本身。第二个console.log输出结果为true，这是因为NaN是唯一一个与自己不相等的值。第三个console.log输出结果也为true，这是因为字符串'abc'无法进行转换为数字，会被转换为NaN。

引用数据类型

JavaScript中存在着基本数据类型和引用数据类型两种数据类型。引用数据类型包括对象、数组、函数等。

引用数据类型在传递参数时，传递的是其在内存中的地址，也就是说，函数内部如果改变该参数，会对原对象产生影响。

示例：

function change(obj) {
  obj.name = 'Alice';
}

var person = {
  name: 'Bob'
};
change(person);
console.log(person); // 输出{name: 'Alice'}

在上面的示例中，定义了一个change函数用来改变对象的属性值。在函数外部声明了一个person对象，执行change函数后，person对象的name属性被改为了'Alice'。

语法注意点

三元表达式的注意点

在JavaScript中，三元表达式可以用来进行简单的条件判断。但是需要注意的是，三元表达式的判断条件部分需要使用严格相等运算符（===）。

示例：

var x = 1;
var result = x == 1 ? 'Yes' : 'No';
console.log(result); // 输出Yes

var y = false;
var result2 = y == false ? 'Yes' : 'No';
console.log(result2); // 输出Yes

var z = 0;
var result3 = z == false ? 'Yes' : 'No';
console.log(result3); // 输出Yes，这里需要注意

在上面的示例中，第一个和第二个三元表达式都能够正确地输出结果。但是第三个三元表达式输出了'Yes'，这是因为JavaScript会进行类型转换，将数字0转换为false进行比较。所以在使用三元表达式时需要特别注意类型转换的问题。

for...in循环的注意点

在JavaScript中，可以使用for...in循环来遍历对象的属性。但是需要注意的是，在遍历时会遍历对象的原型链上的属性。如果只想遍历对象本身的属性，需要使用hasOwnProperty函数来判断。

示例：

var person = {
  name: 'Bob',
  age: 18
};

Object.prototype.gender = 'male';

for (var prop in person) {
  console.log(prop);
}
// 输出 name、age、gender

for (var prop in person) {
  if (person.hasOwnProperty(prop)) {
    console.log(prop);
  }
}
// 输出 name、age

在上面的示例中，第一个for...in循环遍历了person对象的name、age以及原型链上的gender属性。第二个for...in循环遍历了person对象的name、age属性。