关于javascript：Loops- forEach，for … for … of，for … in


Loops- forEach, for, for…of, for…in

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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]);
}
相关讨论

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

1
2
3
4
5
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文档

4

for…of循环：此循环总是迭代数组的值。当遍历数组时，变量i将保存元素的值。如果只需要数组中元素的value，则可以使用此选项。供参考的MDN文档

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

foreach循环：当遍历arr时，这个循环对每个元素执行回调函数。回调的参数是当前值的currentValue、index、执行循环的array。供参考的MDN文档

1
2
3
4
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语句编译器中解释index 0的值在array d中被访问。因此，它返回digits[0]处的值，以此类推。

共同的方式：

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

循环只依赖于i上的条件。如果条件i < digits.length不满足，循环将中断。

其他两个版本(使用of和in都是迭代器，即它们将访问数组的所有值。无需指定要通过的项目数。

但是它们不同：

  • of关键字将迭代数组的值

  • in关键字将在索引上迭代。

通常，您应该按照以下方式使用它们(通过修改示例来显示差异)：

1
2
3
4
5
6
const chars = ['A','B','C'];

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

如果您不隐式地需要索引，那就更好了

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