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]);
}

Answer 1

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

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 Docs for reference

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

for ... of loop：此循环始终遍历数组的值。遍历数组时，变量i将保存元素的值。如果只需要数组中value个元素，则可以使用此方法。 MDN Docs for reference

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

forEach循环：此循环在遍历arr时对每个元素执行回调函数。回调的参数是currentValue的currentValue，index，array执行循环。 MDN Docs for reference

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

您的问题：根据流程，代码运行正常。由于数组元素与索引相等，因此您很难理解它。

in for ... in循环：index=0给出digits[0]=0， index=1提供digits[1]=1，依此类推。

in for ... of循环：index=0（其中变量index包含值digits[0]），在console语句编译器解释index 0处的值在array d中访问1}}。因此，它返回digits[0]处的值，依此类推所有元素。

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);
}

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

2 个答案: