var 和 let 的优缺点

目录

var 和 let 的优缺点

1、变量提升：

2、作用域：

3、全局声明：

4、重复声明：

5、循环中的行为：

示例 

变量提升：

作用域：

全局声明：

重复声明：

---

var 和 let 的优缺点

1、变量提升：

• var 声明的变量存在变量提升，即可以在声明之前使用变量。这意味着可以在变量声明之前访问变量，但其值为 undefined。
• let 声明的变量不会存在变量提升，只能在声明后使用。

2、作用域：

• var 声明的变量作用域是函数级别的，即在函数内部声明的变量在整个函数范围内有效，可能会导致变量污染和命名冲突问题。
• let 声明的变量作用域是块级别的，即在最近的包含块（大括号）内有效，可以避免变量污染和命名冲突问题。

3、全局声明：

• 使用 var 可以在全局范围内声明变量，而 let 只能在块级作用域中声明变量。

4、重复声明：

• 在同一个作用域内，使用 var 可以重复声明同一个变量，后续的声明会覆盖前面的声明。
• 使用 let 声明变量时，如果在同一个作用域内重复声明同一个变量，会抛出语法错误。

5、循环中的行为：

• 在循环中使用 var 声明的变量会有一些特殊行为，例如在 for 循环中使用 var 声明的变量是全局变量，可能导致意外的结果。
• 在循环中使用 let 声明的变量会在每次迭代时创建一个新的块级作用域，避免了变量共享和命名冲突问题。

示例 

 当使用 var 和 let 声明变量时，它们在作用域和变量提升方面的区别可以通过以下示例来说明：

• 变量提升：

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

console.log(b); // ReferenceError: b is not defined
let b = 20;

 在上面的代码中，使用 var 声明的变量 a 存在变量提升，可以在声明之前访问，但其值为 undefined。而使用 let 声明的变量 b 则不会存在变量提升，所以在声明之前访问会抛出 ReferenceError。

• 作用域：

function example() {
  var x = 10;
  if (x > 5) {
    var y = 20;
    let z = 30;
    console.log(y); // 20
    console.log(z); // 30
  }
  console.log(y); // 20
  console.log(z); // ReferenceError: z is not defined
}

example();

 在上面的代码中，使用 var 声明的变量 y 在整个函数作用域内都是可见的，所以可以在 if 语句块外部访问。而使用 let 声明的变量 z 的作用域是块级作用域，只在 if 语句块内有效，所以在外部访问会抛出 ReferenceError。

• 全局声明：

var globalVar = 10;
let globalLet = 20;

console.log(window.globalVar); // 10
console.log(window.globalLet); // undefined

在上面的代码中，使用 var 声明的全局变量会成为 window 对象的属性，可以通过 window 对象访问。而使用 let 声明的全局变量不会成为 window 对象的属性，所以无法通过 window 对象访问。

• 重复声明：

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

let y = 30;
let y = 40; // SyntaxError: Identifier 'y' has already been declared

 使用 var 声明的变量可以在同一个作用域内重复声明，后续的声明会覆盖前面的声明。而使用 let 声明的变量在同一个作用域内重复声明会抛出语法错误。