Detailed Explanation of Common for Loop of JavaScript Statement

There are many circular statements in JavaScript, such as for, for in, for of and forEach. Today, we compare the situations and differences supported by four data structure circular statements: Array, Object, Set (ES6) and Map (ES6).

New test data of 4 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

Ordinary for loops can be used in Array. When traversing an array, it is traversing the index of the array subscript and taking the value through the subscript.

for (let i = 0; i < arr.length; i++) { // i Is a subscript (index) 
  console.log(i)
  console.log(arr[i])
}

2 for in

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

Array

let arr = [1, 2, 3, 4, 5, 6];
Array.prototype.a = "1"

for (let i in arr) {  // i Is a subscript (index) 
  console.log(i)
  console.log(arr[i])
}

It can be seen that the prototype is also looped out, which is not what we want. We can filter out the attributes on the prototype through hasOwnProperty.

let arr = [1, 2, 3, 4, 5, 6];
Array.prototype.a = "1"

for (let i in arr) {  // i Is a subscript (index) 
  if (arr.hasOwnProperty(i)) {
    console.log(i)
    console.log(arr[i])
  }
}

Object

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

for (let key in obj) {  // key Is the key 
  console.log(key)
  console.log(obj[key])
}

For Object, the same problem will exist, and the attributes on the prototype will be circulated. Similarly, the attributes on the prototype can be filtered out through hasOwnPr operty.

for (let key in obj) {  // key Is the key 
  if (obj.hasOwnProperty(key)) {
    console.log(key)
    console.log(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 well-defined methods on the implicit prototype (__proto__).

for (let key of arr.keys()) {  // key Is a subscript 
  console.log(key)
}
for (let value of arr) {     // value Yes value 
  console.log(value)
}
for (let value of arr.values()) { // value Yes value 
  console.log(value)
}
for (let [key, value] of arr.entries()) { // key Is a subscript  value Yes value 
  console.log(key,value)
}

Object

for (let [key, value] of Object.entries(obj)) { // key Is a subscript  value Yes value 
  console.log(key, value)
}

Set

Since Set is not duplicated, keys and values are 1, which means that the following four outputs are 1

for (let key of set.keys()) {  
  console.log(key)
}
for (let value of set) {     
  console.log(value)
}
for (let value of set.values()) { 
  console.log(value)
}
for (let [key, value] of set.entries()) { 
  console.log(key, value)
}

Map

for (let key of map.keys()) { 
  console.log(key)
}
for (let value of map) {     
  console.log(value)
}
for (let value of map.values()) { 
  console.log(value)
}
for (let [key, value] of map.entries()) { 
  console.log(key, value)
}

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

for (let i = 0; i < arr.length; i++) { // i Is a subscript (index) 
  console.log(i)
  console.log(arr[i])
}

0

4 forEach

The forEach loop can be used in Array, Set, Map. However, methods cannot jump out of the loop using break, continue statements, or return from the function body using return.

Array

for (let i = 0; i < arr.length; i++) { // i Is a subscript (index) 
  console.log(i)
  console.log(arr[i])
}

1

Se t

for (let i = 0; i < arr.length; i++) { // i Is a subscript (index) 
  console.log(i)
  console.log(arr[i])
}

2

M ap

map.forEach((value, key) => {
  console.log(value, key)
})

break, continue and return

Using continue prompts

for (let i = 0; i < arr.length; i++) { // i Is a subscript (index) 
  console.log(i)
  console.log(arr[i])
}

4

Using break prompts

for (let i = 0; i < arr.length; i++) { // i Is a subscript (index) 
  console.log(i)
  console.log(arr[i])
}

5

With return, it does not return, but continues the loop

5 Summary

Ordinary for loops can be used in Array. When traversing the array, it is traversing the index of the array subscript and taking the value through the subscript; for in can be used in both Array and Object. However, it should be noted that the attributes on the prototype will also be recycled; for of can be used in Array, Object, Set, Map. You can also use break, continue, and return; The forEach loop can be used in Array, Set, and Map. However, methods cannot jump out of the loop using break, continue statements, or return from the function body using return.