ES6 中 let 与 var 的区别

ES6 中 let 与 var 的区别

当我们在 JavaScript 中定义变量时，有两种方式：使用 var 关键字和使用 let 关键字。虽然这两者看起来很相似，但它们有一些重要的区别。

作用域

在 JavaScript 中，作用域是指定义变量的代码段，在这个代码段中，变量是可见的。ES6 中，let 关键字允许我们在代码块级作用域中定义变量，而 var 关键字只允许我们在函数级作用域中定义变量。

if (true) {
  let x = 10; // 在代码块级作用域中定义变量
  var y = 20; // 在函数级作用域中定义变量
}

console.log(x); // 报错，x 不可见
console.log(y); // 20

变量提升

在 JavaScript 中，变量提升是指变量在声明之前就可以使用的行为。ES6 中，在代码块级作用域中使用 let 定义变量则不会出现变量提升的问题，而 var 则会出现变量提升的问题。

console.log(x); // undefined
console.log(y); // 报错，y 未定义

var x = 10; // var 出现变量提升
let y = 20;

重复声明

在 JavaScript 中，重复声明变量会导致 UNKOWN 错误。ES6 中，同一个代码块中使用 let 重复声明一个变量会导致语法错误。

let x = 10;
let x = 20; // 报错，重复声明变量

var y = 10;
var y = 20; // 不会报错，可以重复声明变量

循环中的使用

在 for 循环中使用 var 声明的变量，在循环外部也是可见的。而使用 let 声明的变量只是在循环内部可见。

for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, 1000);
}
// 输出 5 5 5 5 5

for (let j = 0; j < 5; j++) {
  setTimeout(function() { console.log(j); }, 1000);
}
// 输出 0 1 2 3 4

上面的代码中，使用了 setTimeout 函数，延时输出变量 i 和 j。使用 var 声明的变量 i，在循环结束后也是可见的，因此输出了 5 5 5 5 5。而使用 let 声明的变量 j，只在循环内部可见，因此每次输出的都是循环中的当前值。

总结

在 ES6 中，使用 let 声明变量更推荐，因为它具有了很多 var 没有的优点。使用 let 可以:

• 避免变量提升导致的错误。
• 在代码块级作用域中定义变量，更加符合逻辑和直觉。
• 在循环中使用更加安全。

总之，让我们更好地使用 JavaScript 编写高质量的代码。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ac1f8aadd4f0e0ff5bc7df