const 和 let 使用的那些坑

2023-09-11 03:07:51

JavaScript 陷阱：你应该知道的常见问题

在 JavaScript 开发中，有许多陷阱可能导致意外的结果，甚至错误。了解这些陷阱并采取措施避免它们至关重要，这将有助于你编写更健壮、更可靠的代码。

变量提升

JavaScript 中的变量提升是指在执行代码之前，将所有变量声明提升到脚本或函数的顶部。这意味着，即使你声明了一个变量，并在后面才使用它，这个变量也会在脚本或函数的开头被声明。

console.log(x); // undefined
var x = 10;

在上面的代码中，变量 x 在函数的开头被提升，并赋予了 undefined 的值。当代码执行到 console.log(x) 时，x 的值仍然是 undefined，因此输出 undefined。

为了避免这种情况，始终在使用变量之前声明它。

作用域

JavaScript 中的作用域是指变量和函数的可见范围。在 JavaScript 中，有两种作用域：全局作用域和局部作用域。全局作用域是整个脚本或函数可以访问的变量和函数，而局部作用域是只在函数内部可以访问的变量和函数。

var x = 10; // 全局变量

function myFunction() {
  var y = 20; // 局部变量
}

console.log(x); // 10
console.log(y); // ReferenceError: y is not defined

在上面的代码中，x 是一个全局变量，因此可以在脚本或函数的任何地方访问它。y 是一个局部变量，因此只能在 myFunction 函数内部访问它。当代码执行到 console.log(y) 时，y 的值是 undefined，因此输出 ReferenceError: y is not defined。

闭包

JavaScript 中的闭包是指一个函数可以访问另一个函数内部的变量。闭包可以用于在函数外部访问函数内部的变量，或者在函数内部访问函数外部的变量。

function outerFunction() {
  var x = 10;

  function innerFunction() {
    console.log(x); // 10
  }

  return innerFunction;
}

var innerFunction = outerFunction();

innerFunction();

在上面的代码中，outerFunction 函数返回了一个内部函数 innerFunction。innerFunction 函数可以访问 outerFunction 函数内部的变量 x，即使 outerFunction 函数已经执行完毕。

闭包可以用于很多场景，比如在事件处理函数中访问函数外部的变量，或者在函数内部创建私有变量。

常见的 JavaScript 陷阱

除了变量提升、作用域和闭包之外，JavaScript 中还有许多其他陷阱。一些常见的 JavaScript 陷阱包括：

使用 == 和 === 比较对象时 ，== 会尝试将对象转换为原始值，而 === 会比较对象的内存地址。这可能会导致意外的结果。
使用 === 比较 NaN 时 ，=== 会返回 false。这是因为 NaN 是一个特殊的数字，它不等于任何其他数字，包括它自己。
使用 == 和 === 比较 undefined 和 null 时 ，== 会返回 true，而 === 会返回 false。这是因为 undefined 和 null 是两种不同的类型，它们不等于对方。
在循环中修改数组时 ，可能会导致数组元素的顺序被打乱。这是因为 JavaScript 数组是一个动态数组，它可以自动调整大小。
在函数中使用 return 语句时 ，函数会立即返回，并不会执行后面的代码。这是因为 return 语句会终止函数的执行。