javascript - Loops- forEach, for, for....of, for...in - Stack Overflow

admin管理员组

文章数量:1289834

I am not able to understand the difference between all these loops, can anyone share a link or some article which will help me understand these loops in more details in terms of efficiency, speed, usability etc.

In the below code, how can I best understand these differences?

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

I am not able to understand the difference between all these loops, can anyone share a link or some article which will help me understand these loops in more details in terms of efficiency, speed, usability etc.

In the below code, how can I best understand these differences?

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

• javascript
• loops
• typescript
• syntax

Share Improve this question Follow asked Jun 5, 2018 at 7:58 Abhilash BhargavaAbhilash Bhargava 60411 gold badge77 silver badges1818 bronze badges 8

• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Hyyan Abo Fakher Commented Jun 5, 2018 at 8:00
• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Hyyan Abo Fakher Commented Jun 5, 2018 at 8:00
• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Hyyan Abo Fakher Commented Jun 5, 2018 at 8:00
• 4 If you use const digits = [2,3,4]; to test with, you'll see that for..in is critically different from for..of. – Niet the Dark Absol Commented Jun 5, 2018 at 8:00
• 1 In your example it's hard to get the difference between in and of because your digits array is having the same value as the index. See my answer – Flavien Volken Commented Jun 5, 2018 at 8:14

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 11

for loop : This is the mon method of iterating an array where we use i as index to access the elements in the array 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 loop : This loop always iterates over the index. While traversing through the array, the variable i will hold the value of the index of each element. This can be used when the index of the elements needed during iteration. MDN Docs for reference

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

for...of loop : This loop always iterates through the values of the array. While traversing through the array, the variable i will hold the value of the element. This can be used if only the value of the elements in the array is needed. MDN Docs for reference

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

forEach loop : This loop performs a callback function on each element while traversing through the arr. The parameters to the callback are currentValue, index of the currentValue, array on which the loop is performed. MDN Docs for reference

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

Problem in your case : The code works fine as per the flow. Since you have the array elements equal to its index, it made difficult for you to understand it.

in for...in loop : index=0 gives digits[0]=0, index=1 gives digits[1]=1, and so on.

in for...of loop : index=0 (where variable index holds the value of digits[0]), in the console statement piler interprets that value at index 0 is accessed in the array d. Hence it returns the value at digits[0], and so on for all elements.

The mon way:

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

Only relies on the condition on i for the loop. If the condition i < digits.length is not satisfied, the loop will break

Both other versions (using of and in) are iterators, i.e. they will go and visit all the values of the array. No need to specify how many items to go through.

They however differ:

• of keyword will iterate on the values of the array

• in keyword will iterate on the index.

Typically you should use them as follow (example modified to show the difference):

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

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

Better if you do not need the index implicitly

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

本文标签： javascriptLoops forEachforforofforinStack Overflow