Of Stack

Five Methods of JavaScript Array Traversal

  • 2021-11-01 02:16:11
  • OfStack
Directory 1. for Loop: Basic, Simple
2. forEach () method: Use callback function
3. map () method: Use callback function
4. for... in Loop: Traversing Objects and Arrays
5. for … of Loop: Traversing Objects and Arrays
6. Additional
6.1. break and Continue issues
6.2, Arrays and Objects

In the process of writing code using JavaScript, you can use multiple methods to traverse the array; The method includes an for cycle, an forEach cycle, an map cycle, an forIn cycle, an forOf cycle and the like.

1. for Loop: Basic, Simple

This is the most basic and commonly used method of traversing arrays; This approach is generally supported in various development languages. 


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]); //a b c d e
}

2. forEach () method: Use callback function

forEach () This is a method of an array object; It accepts 1 callback function as an argument.
There are three arguments in the callback function:

1st: Array Elements (Required) 2nd: Array element index value (optional) 3rd: Array itself (optional) 

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

3. map () method: Use 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

for … in loops can be used to loop objects and arrays.
Recommended for loop objects, and 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 an array index 
  console.log(arr[key]) // a b c d e
}

5. for … of Loop: Traversing Objects and Arrays

Loop arrays and objects, recommended for traversing 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. Additional

6.1. break and Continue issues

In forEach、map、filter、reduce、every、some In a function break And continue Keywords will not work because they are in function, but function solves the problem of closure traps.
To use break, continue can be used for、for...in、for...of、while .

6.2, Arrays and Objects

Used to traverse array elements using: for()，forEach()，map()，for...of .
Used for loop object properties to use: for...in .

The above is the JavaScript array traversal of the 5 methods of the details, more information about JavaScript array traversal please pay attention to other related articles on this site!

Related articles: