JavaScript ES2015: 块作用域

在ES2015之前，JavaScript只有函数作用域，这意味着变量或函数声明的作用范围是整个函数，对于其他函数或全局作用域无效。

但是，ES2015引入了块级作用域，这意味着变量或函数声明的作用范围是在包含它们的块内。

块作用域的概念

块级作用域指的是由一对花括号包围的代码块。在块级作用域中声明的变量仅在该代码块中有效。

示例代码如下：

function foo() {
  var a = "hello";
  if (true) {
    var b = "world";
    let c = "!";
  }
  console.log(a); // "hello"
  console.log(b); // "world"
  console.log(c); // 报错，c未定义
}

在此示例中，变量a和b都在函数作用域中声明，在if代码块中声明的变量c只在此代码块中有效。

let和const关键字

ES2015引入了两个新关键字：let和const。它们都用来声明块级作用域中的变量。

let

let关键字用于声明块级作用域的变量。与使用var声明变量不同，使用let声明的变量仅在声明它的代码块中有效。

示例代码如下：

function foo() {
  var a = "hello";
  if (true) {
    let b = "world";
  }
  console.log(a); // "hello"
  console.log(b); // 报错，b未定义
}

const

const关键字用于声明只读变量。与let相同，使用const声明的变量也是块级作用域的。

示例代码如下：

function foo() {
  const PI = 3.14;
  if (true) {
    const PI = 3.1415926;
    console.log(PI); // 3.1415926
  }
  console.log(PI); // 3.14
}

循环中let变量的使用

在循环中使用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
}

在第一个示例中使用了var声明变量i，最终的结果是在循环结束后，i的值为5，因此5个回调函数都打印出5。

而在第二个示例中使用了let声明变量j，由于循环中的每个迭代都有自己的变量j，因此每个回调函数都打印了相应的值。

总结

在块作用域中声明变量有助于避免变量作用域的错误。使用let和const声明变量可以提高代码的可读性和健壮性。但是，当使用块级作用域时，需要注意变量的可见性和作用范围。