Five ways to traverse JavaScript arrays

When writing code in JavaScript, you can use multiple methods to traverse an array, including for loops, forEach loops, map loops, forIn loops, and forOf loops.

1. for loop: basic and simple

This is the most basic and commonly used method of traversing an array; various development languages ​​generally support this method.

let arr = ['a','b','c','d','e'];
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(i); // 0 1 2 3 4
  console.log(arr[i]); //abcde
}

2. forEach() method: using callback function

forEach() This is a method of the array object; it accepts a callback function as a parameter.
There are three parameters in the callback function:

• 1st: Array element (required)
• 2nd: array element index value (optional)
• 3rd: the array itself (optional)

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
  console.log(item); // abcde console.log(index); // 0 1 2 3 4
  console.log(arr); // ['a','b','c','d','e']
})

3. map() method: using callback function

It is used in the same way as the forEach() method.

var arr = [
  {name:'a',age:'18'},
  {name:'b',age:'19'},
  {name:'c',age:'20'}
];
arr.map(function(item,index) {
  if(item.name == 'b') {
    console.log(index) // 1
  }
})

4. for..in loop: traversing objects and arrays

The for…in loop can be used to loop over objects and arrays.
Recommended for looping objects, can also be used to traverse json.

let obj = {
  name: 'Wang Dachui',
  age: '18',
  weight: '70kg'
}
for(var key in obj) {
  console.log(key); // name age weight
  console.log(obj[key]); // Wang Dachui 18 70kg
}
----------------------------
let arr = ['a','b','c','d','e'];
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 returns the array index console.log(arr[key]) // abcde
}

5. for…of loop: traversing objects and arrays

It is recommended for looping over arrays.

for...of provides three new methods:

• key() is a traversal of the key name;
• value() is a traversal of key values;
• entries() is a traversal of key-value pairs;

let arr = ['iFLYTEK', 'Politics and Law BG', 'Front-end Development'];
for (let item of arr) { 
 console.log(item); // iFLYTEK Politics and Law BG front-end development}
// Output array index for (let item of arr.keys()) { 
 console.log(item); // 0 1 2
}
// Output content and index for (let [item, val] of arr.entries()) { 
 console.log(item + ':' + val); // 0: iFLYTEK 1: Politics and Law BG 2: Front-end Development}

6. Supplement

6.1. Break and Continue Issues

In forEach、map、filter、reduce、every、some functions, break and continue keywords will not take effect because they are in function, but function solves the problem of closure trap.
To use break or continue, you can use for、for...in、for...of、while .

6.2 Arrays and Objects

To iterate over array elements, use: for()，forEach()，map()，for...of .
To loop over object properties use: for...in .

The above are the details of the five methods of JavaScript array traversal. For more information about JavaScript array traversal, please pay attention to other related articles on 123WORDPRESS.COM!