var和ES6的let

[susouth]

📚在线阅读:var和ES6的let - No.59

概述

• 通过 var 定义的变量，它的作用域是在 function 或任何外部已经被声明的 function，是全域的 。
• 透過 let 定义的变量，它的作用域是在一個块（block）。

function varvslet() {
  console.log(i); // i 是 undefined 的，因为变量提升
  // console.log(j); // ReferenceError: j 没有被定义

  for( var i = 0; i < 3; i++ ) {
    console.log(i); // 0, 1, 2
  };

  console.log(i); // 3
  // console.log(j); // ReferenceError: j 没有被定义

  for( let j = 0; j < 3; j++ ) {
    console.log(j);
  };

  console.log(i); // 3
  // console.log(j); // ReferenceError: j 没有被定义
}

详细的区别

• 变量提升

  let 不會被提升到整个块的作用域。相比之下，var 可以被提升。

{
  console.log(c); // undefined。因为变量提升
  var c = 2;
}

{
  console.log(b); // ReferenceError: b 没有被定义
  let b = 3;
}

• 循环中的闭包

  let 在每次循环可以重新被 bind，确保在它之前结束的循环被重新赋值，所以在闭包中它被用來避免一些问题。

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

使用 let 替换 var

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

我们应该用 let 替代 var 嗎？

不是的，let 是新的块作用域。语法强调在 var 已经是区块作用域时時，let 应该替换 var ，否则请不要替换 var。let 改善了在 JS 作用域的选项，而不是取代。var 对于变量依旧是有用的，可被用在整個 function 之中。

let 兼容性

• 在 server 端，比如 Node.js，你现在可以安心的使用 let。

• 在 client 端，通过 transpiler（比如 Traceur），可以安心的使用 let 语法。否则请在这里确认你的浏览器是否支持。

Playground

JS Bin on jsbin.com<script src="https://static.jsbin.com/js/embed.min.js?3.39.11"></script>

更多信息

• Let keyword vs var keyword
• For and against let
• Explanation of let and block scoping with for loops.

• 用 100 行代码提升 10 倍的性能
• 前端高频笔试题面试题记录（下）
• let 和 const 命令