javascript - 这些 var 声明是样式问题还是功能问题？

Question

ES5 是最广泛使用的 JavaScript 实现，目前没有 block 作用域，因此最好的做法是将惯用的变量声明放在 for 语句中还是在 for 语句之外？

选项1

for(var i = 0, l = arr.length; i < l; i++ ){
    sum += arr[i];
}

选项2

var i; 
var l = arr.length;
for(i = 0; i < l; i++ ){
    sum += arr[i];
}

这只是一种风格偏好还是有最佳实践？

Answer 1

对于 var，这是一个风格问题。

但从 ES2015(又名“ES6”)开始，如果使用 let 和 const，JavaScript 就会获得变量的 block 作用域。所以

for (let i = 0, l = arr.length; i < l; i++ ){
    sum += arr[i];
}

对比

let i; 
let l = arr.length;
for(i = 0; i < l; i++ ){
    sum += arr[i];
}

不纯粹是一个风格问题。有两件事需要考虑:

1. 当然，对于第一个，i 和 l 的作用域是 for 循环(尽管可能不完全是你所理解的) Expect)，而第二个它们位于包含 for 循环的范围内。

2. 对于第一个，每个循环迭代(确实)都有一个new i 和 l，它可以有一个对性能的影响；对于第二个，所有循环迭代(以及包含范围)仅共享一个 i 和 l。

#2 对您在循环中创建的任何函数都有很大的影响，正如您在这个示例中看到的:

for (let i = 0; i < 3; ++i) {
  setTimeout(() => {
    console.log("let inside the loop, i = " + i);
  }, 0);
}

let j;
for (j = 0; j < 3; ++j) {
  setTimeout(() => {
    console.log("let outside the loop, j = " + j);
  }, 0);
}

在兼容 ES2015 的浏览器上，输出:

let inside the loop, i = 0
let inside the loop, i = 1
let inside the loop, i = 2
let outside the loop, j = 3
let outside the loop, j = 3
let outside the loop, j = 3

请注意 i 的值如何从 0 变为 2，但 j 的值始终为 3 (就像 var 一样)。这是因为每次循环迭代都有一个不同 i 变量，但所有循环迭代只共享一个 j 变量。

注意: IE9-IE11 有 let，但不符合 ES2015。如果您在其中运行上述代码，您将看到 3 代表 i 以及 j。