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

Posted 2023-02-22

【中文标题】循环 - forEach、for、for....of、for...in

【英文标题】：Loops- forEach, for, for....of, for...in

【发布时间】：2018-11-14 15:23:25

【问题描述】：

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

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

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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

如果您使用const digits = [2,3,4]; 进行测试，您会发现for..in 与for..of 有严重不同。

在您的示例中，很难区分in 和of，因为您的数字数组与索引具有相同的值。看我的回答

【参考方案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 循环： 这个循环总是遍历数组的值。在遍历数组时，变量i 将保存元素的值。如果只需要数组中元素的value，则可以使用此方法。 MDN Docs for reference

var letters = ["a","b","c"];
for (var i of letters)

    console.log(i);

forEach 循环： 该循环在遍历 arr 时对每个元素执行回调函数。回调的参数是当前值的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)
);

您的问题：代码按照流程正常工作。由于您的数组元素等于其索引，因此您很难理解它。

在 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] 的值，以此类推所有元素。

【参考方案2】：

常用方式：

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

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

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

但是它们不同：

of 关键字将迭代数组的值

in 关键字将在 index 上迭代。

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

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