循环 - forEach，for，for...of，for...in

Question

我无法理解所有这些循环之间的区别，有没有人可以分享一个链接或一些文章，帮助我更详细地了解这些循环的效率、速度、可用性等方面。

在下面的代码中，如何最好地理解这些差异？

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < digits.length; i++) {
  console.log(digits[i]);
}

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index of digits) {
  console.log(digits[index]);
}

- Abhilash Bhargava

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for - Hyyan Abo Fakher

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in - Hyyan Abo Fakher

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of - Hyyan Abo Fakher

如果使用 const digits = [2,3,4]; 进行测试，你会发现 for..in 和 for..of 在关键的地方是完全不同的。 - Niet the Dark Absol

在你的例子中，很难区分 in 和 of 的区别，因为你的数字数组具有与索引相同的值。请参考我的答案。 - Flavien Volken

Answer 1

for循环：这是迭代数组的常见方法，我们使用i作为索引来访问数组letters中的元素。参考MDN文档

var letters = ["a","b","c"];
for (let i = 0; i < letters.length; i++)
{
    console.log("Index : "+i, "Value : "+letters[i]);
}

for...in循环：这个循环总是遍历索引。在遍历数组时，变量i将保持每个元素的index的值。在迭代期间需要元素的index时可以使用它。 MDN文档供参考

var letters = ["a","b","c"];
for (var i in letters)
{
    console.log("Index : "+i, "Value : "+letters[i]);
}

for...of循环:该循环始终遍历数组的值。在遍历数组时，变量i将保存元素的值。如果只需要数组中元素的value，则可以使用它。MDN文档供参考

var letters = ["a","b","c"];
for (var i of letters)
{
    console.log(i);
}

forEach循环：该循环遍历数组，并对每个元素执行回调函数。回调函数的参数包括currentValue，当前元素的index和进行循环的array。请参阅MDN文档

var letters = ["a","b","c"];
letters.forEach(function(value, index, arr){
    console.log("Value : "+value, "Index : "+index, "Complete array : "+arr)
});

在您的情况下存在问题：该代码按流程运行良好。由于数组元素等于其索引，因此您很难理解它。

在for...in循环中：index=0给出digits[0]=0，index=1给出digits[1]=1，以此类推。

在for...of循环中：index=0（其中变量index持有digits[0]的值），在console语句编译器中解释为在数组d中访问index 0处的值。因此，它返回digits[0]处的值，并对所有元素进行相同的操作。

- Vignesh Raja

Answer 2

常见的方法：

for (let i = 0; i < digits.length; i++) {
  console.log(digits[i]);
}

仅依赖于循环中的i条件。如果不满足条件i < digits.length，则循环将停止。

另外两个版本（使用of和in）都是迭代器，即它们将访问数组的所有值。无需指定要遍历多少项。

但是它们有所不同：

• of关键字将遍历数组的值

• in关键字将遍历索引

通常应按以下方式使用它们（示例已修改以显示差异）：

const chars = ['A','B','C'];

for (const index in chars) {
  // index will be 0,1,2
  console.log(chars[index]);
}

最好不要隐式地使用索引。

const chars = ['A','B','C'];
for (const value of chars) {
  // value will be 'A','B','C'
  console.log(value);
}

- Flavien Volken