JavaScript let

JavaScript 在 ES6 (2015) 中引入了 let 关键字声明变量。用 let 定义的变量不能重新声明并且具有作用域。

JavaScript 在 ES6 (2015) 中引入了 let 关键字声明变量。用 let 定义的变量不能重新声明并且具有作用域。

不能重新声明

用 var 定义的变量,可以随便重复定义,用 let 定义的变量不能重新声明

var name = "张三"; // 正确
var name = "李四"; // 正确

let age = 30; // 正确
let age = 31; // 语法错误: 'age' 已经声明过

块作用域

作用域可以理解为有效范围,变量的作用域即使变量生效的范围。

ES6 (2015) 之前,JavaScript 的作用域只有全局作用域(Global Scope)函数作用域(Function Scope)

JavaScript 在 ES6 (2015) 引入了块作用域,块由大括号 {} 包围形成,在块中声明的变量的有效范围只在块内。

{ } 块内声明的变量不能从块外访问:

{
  let x = 2; // x 的作用域在此块内
  console.log(x); // 正确
}
console.log(x); // 错误: Uncaught ReferenceError: y is not defined

var 关键字声明的变量作用域是全局作用域。

在块内使用 var 声明的变量可以从块外访问。

{
  var x = 2;
  console.log(x);
}
console.log(x);
// x CAN be used here

重新声明变量

使用 var 关键字声明的变量作用域,重新声明变量可能会带来问题。

var 在块内重新声明变量会改变块外声明的同名变量的值。

var x = 10;
console.log("x =", x); // 输出 x = 10
{
  var x = 2;
  console.log("x =", x); // 输出 x = 2
}

console.log("x =", x); // 输出 x = 2

使用 let 关键字重新声明变量可以解决这个问题。

let 在块内重新声明变量不会改变块外声明的同名变量的值。

let x = 10;
console.log("x = ", x); // 输出 x = 10
{
  let x = 2;
  console.log("x = ", x); // 输出 x = 2
}

console.log("x = ", x); // 输出 x = 10

var vs let

允许使用 var 在程序中的任何地方重新声明 JavaScript 变量。

var x = 2;
console.log("x =", x); // 输出: x = 2
var x = 3;
console.log("x =", x); // 输出: x = 3

使用 let 声明过的变量,不允许在同一块中重新声明变量。

var x = 2; // 允许
let x = 3; // 不允许,因为 x 已经声明过
{
  let x = 2; // 允许,x 的作用域为此块
  let x = 3; // 不允许,因为 x 已经在此块声明过
}

{
  let x = 2; // 允许,x 的作用域为此块
  var x = 3; // 不允许, 使用 let 声明过的变量不能重复声明
}

使用 let 声明过的变量,允许在另一个块中使用 let 重新声明。

let x = 2; // Allowed
{
  let x = 3; // Allowed
}

{
  let x = 4; // Allowed
}

浏览器支持

Internet Explorer 11 或更早版本不完全支持 let 关键字。

下表定义了完全支持 let 关键字的第一个浏览器版本:

Chrome Edge Firefox Safari Opera
Chrome 49 Edge 12 Firefox 44 Safari 11 Opera 36
2016.03 2015.07 2015.01 2017.09 2016.03