Detailed explanation of common for loop in JavaScript statements

There are many loop statements in JavaScript, including for, for in, for of and forEach loops. Today, we will compare the support and differences of loop statements for 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

Ordinary for loops can be used in Array. When traversing an array, you traverse the array subscript index and get the value through the subscript.

for (let i = 0; i < arr.length; i++) { // i is the 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 properties 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 the subscript (index)
  console.log(i)
  console.log(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];
Array.prototype.a = "1"

for (let i in arr) { // i is the 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])
}

The same problem exists for Object. The prototype properties will also be looped out, and the properties on the prototype can also be filtered out through hasOwnProperty.

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 essentially an object, so we can find defined methods on the implicit prototype (__proto__).

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

Object

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

Set

Since Set has no duplication, the keys and values ​​are consistent, which means that the following four outputs are consistent

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 and continue statements to jump out of the loop, or use return to return from the function body.

for (let key of arr.keys()) { // key is a subscript if (key == 3) {
    return
  }
  console.log(key)
}
for (let key of arr.keys()) { // key is a subscript if (key == 3) {
    break
  }
  console.log(key)
}
for (let key of arr.keys()) { // key is a subscript if (key == 3) {
    continue
  }
  console.log(key)
}

4 forEach

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

Array

arr.forEach((value, index) => {
  console.log(value, index)
})

Set

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

Map

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

break, continue and return

Use continue to prompt

Illegal continue statement: no surrounding iteration statement

Using break will prompt

Illegal break statement

Using return does not return, but continues the loop

5 Conclusion

Ordinary for loops can be used in Array. When traversing an array, you traverse the array subscript index and get the value through the 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; forEach loop can be used in Array, Set, and Map. However, the method cannot use break or continue statements to jump out of the loop, or use return to return from the function body.

This is the end of this article about the detailed explanation of the commonly used for loop in JavaScript statements. For more related js for loop content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!