Detailed explanation of commonly used for loops in JavaScript statements

There are many loop statements in JavaScript, such as for, for in, for of and forEach loops. Today, we compare the support of loop statements of four data structures: Array, Object, Set(ES6), and Map(ES6).

Create four new test data types

let arr = [1, 2, 3, 4, 5, 6];
let obj = { a: 1, b: 2, c: 3 };
let map = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
let set = new Set(['a', 'b', 'c']);

1 for

Normal for loops can be used in Array. When traversing an array, it is to traverse the array subscript index and get the value through subscript.

for (let i = 0; i < ; i++) { // i is the subscript (index)  (i)
  (arr[i])
}

2 for in

for in can be used in both Array and Object. It should be noted that the properties on the prototype will also be looped out.

Array

let arr = [1, 2, 3, 4, 5, 6];
 = "1"

for (let i in arr) {  // i is the subscript (index)  (i)
  (arr[i])
}

You can see that the prototype is also looped out, but it is not what we want. We can filter out the properties on the prototype through hasOwnProperty.

let arr = [1, 2, 3, 4, 5, 6];
 = "1"

for (let i in arr) {  // i is the subscript (index)  if ((i)) {
    (i)
    (arr[i])
  }
}

Object

let obj = { a: 1, b: '2', c: 3 };
 = 4

for (let key in obj) {  // key is key  (key)
  (obj[key])
}

The same problem will exist for Object. The prototype will also be looped out. The properties on the prototype can also be filtered through hasOwnPr operation.

for (let key in obj) {  // key is key  if ((key)) {
    (key)
    (obj[key])
  }
}

3 for of

for of can be used in Array, Object, Set, and Map.

Array

Array is also an object in nature, so we can find a well-defined method on the implicit prototype (__proto__).

for (let key of ()) {  // key is a subscript  (key)
}
for (let value of arr) {     // value is value  (value)
}
for (let value of ()) { // value is value  (value)
}
for (let [key, value] of ()) { // key is subscript value is value  (key,value)
}

Object

for (let [key, value] of (obj)) { // key is subscript value is value  (key, value)
}

Set

Since Set is not repeated, the keys and values ​​are consistent, which means that the following four outputs are consistent

for (let key of ()) {  
  (key)
}
for (let value of set) {     
  (value)
}
for (let value of ()) { 
  (value)
}
for (let [key, value] of ()) { 
  (key, value)
}

Map

for (let key of ()) { 
  (key)
}
for (let value of map) {     
  (value)
}
for (let value of ()) { 
  (value)
}
for (let [key, value] of ()) { 
  (key, value)
}

You can use break, continue statement to break out of the loop, or use return to return to the function body.

for (let key of ()) {  // key is a subscript  if (key == 3) {
    return
  }
  (key)
}
for (let key of ()) {  // key is a subscript  if (key == 3) {
    break
  }
  (key)
}
for (let key of ()) {  // key is a subscript  if (key == 3) {
    continue
  }
  (key)
}

4 forEach

The forEach loop can be used in Array, Set, and Map. However, the method cannot use break, continue statement to jump out of the loop, or use return to return from the function body.

Array

((value, index) => {
  (value, index)
})

Se t

((value, key) => {
  (value, key)
})

M ap

((value, key) => {
  (value, key)
})

break, continue and return

Using continue will prompt

Illegal continue statement: no surrounding iteration statement

Using break will prompt

Illegal break statement

Using return does not return, but continues to loop

5 Summary

A normal for loop can be used in Array. When traversing an array, it is to traverse the array subscript index and get the value through subscript; for in can be used in both Array and Object. But it should be noted that the properties on the prototype will also be looped out; for of can be used in Array, Object, Set, and Map. You can also use break, continue and return; the forEach loop can be used in Array, Set, and Map. However, the method cannot use break, continue statement to jump out of the loop, or use return to return from the function body.

This is the article about the detailed explanation of commonly used for loops in JavaScript statements. For more related js for loop content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!