ECMAScript 5'用于'循环，'i'覆盖，而ECMAScript 6'用于'循环

Question

我接受了JavaScript前端开发人员职位的采访。我失败了，因为我不知道一些高级问题。请帮我理解至少这个。

我的问题是关于ECMAScript 6的知识，而不是ECMAScript 5中的for循环或闭包。我不明白正在做什么for/of或者谁在这个ECMAScript 6代码中扮演魔法而不会覆盖i。

问题是：

  

要在for循环中显示1到5的数字，每次单击一个按钮时，我们必须将控制台包装在一个闭包中，以获得正确的输出，因此i变量不会是如果我们使用这个闭包，就会被覆盖。

     

在ECMAScript 6中，在for循环中我们只有回调函数，并且i不会被覆盖。为什么呢？

// ECMAScript 5
for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click',
    function(x) {
      return function() {
        console.log(x);
      };
    }(i)
  );
  document.body.appendChild(btn);
}

// ECMAScript 6
const ps = Array.from(document.querySelectorAll('p'));

for (const [i, paragraph] of ps.entries()) {
  paragraph.addEventListener('click', function() {
    return console.log(`${i+1}: ${this.textContent}`);
  });
 }

Answer 1

这只是范围问题。它与for...of循环无关......

看看这些情景：

var是全球性的

// "i" is global
for (var i = 0; i < 5; i++) {}

console.log(i);

var仍然是全局的

// "i" is global
var i;
for (i = 0; i < 5; i++) {}

console.log(i);

let是本地的

// "i" is local
for (let i = 0; i < 5; i++) {}

console.log(i); // ReferenceError

let是全球性的

// "i" is global
let i;
for (i = 0; i < 5; i++) {}

console.log(i);