使用“let”和“var”有什么区别？

Question

ECMAScript 6 推出 这 let 陈述.

我听说它被描述为“局部”变量，但我仍然不太确定它的行为与 var 关键词。

有什么区别？什么时候应该 let 被使用过 var?

Answer 1

的范围规则

主要区别是作用域规则。通过var关键字声明的变量可以被限制在直接功能体（因此功能范围），同时let变量被限定在直接包围块由{ }（因此块范围）表示。

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar);

  {
    let baz = "Bazz";
    console.log(baz);
  }

  console.log(baz); // ReferenceError
}

run();

为什么let关键字被引入到语言的原因是功能范围混乱和是错误的在JavaScript的主要来源之一。

看看这个例子中从另一个计算器问题：

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

My value: 3是输出到控制台每次funcs[j]();被调用因为匿名函数被绑定到相同的相同的变量。

人们不得不创建创建立即调用的函数，以捕获从循环正确的值但也有毛。

起重

当用var关键字声明变量“悬挂”于块的顶部，这意味着它们在其封闭范围可访问声明它们甚至之前：

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

让变量不被初始化，直到它们的定义进行评价。在ReferenceError初始化结果之前访问它们。可变说是在从块的开头“颞死区”，直到初始化处理。

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

创建全局对象属性

在顶层，let，不像var，不全局对象上创建一个属性：

var foo = "Foo";  // globally scoped
let bar = "Bar"; // globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

重新说明

在严格模式，var会让在同一范围内你重新声明相同的变量而let引发一个SyntaxError。

'use strict';
var foo = "foo1';
var foo = "foo2'; // No problem, 'foo' is replaced.

let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

Answer 2

let也可以使用，以避免与封闭件的问题。其结合的新鲜值而不是保持一个旧参考如示于以下实施例。

for(var i=1; i<6; i++) {
  $("#div" + i).click(function () { console.log(i); });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>