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 声明的变量在同一个作用域内重复声明会抛出语法错误。

你可能感兴趣的:(javascript,前端,开发语言)