How to traverse arrays in JavaScript

Methods for traversing arrays in JavaScript: 1. Use a for loop statement; 2. Use the forEach() method to call the callback function; 3. Use the map() method to call the callback function; 4. Use "for..in "Loop statement; 5. Use "for...of" loop statement.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

When writing code in JavaScript, you can use multiple methods to traverse the array; including for loop, forEach loop, map loop, forIn loop, forOf loop and other methods.

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 approach.

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 the array object; Accepts a callback function as parameter.
There are three parameters in the callback function:

• 1st: array element (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

its use The method is the same 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: traverse objects and arrays

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

let obj = {
  name: '王大锤',
  age: '18',
  weight: '70kg'
}
for(var key in obj) {
  console.log(key);    // name age weight
  console.log(obj[key]); // 王大锤 18 70kg
}
----------------------------
let arr = ['a','b','c','d','e'];
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // a b c d e
}

5. for...of loop: traverse objects and arrays

Loopable arrays and objects, recommended for traversing arrays .

for...of provides three new methods:

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

let arr = ['科大讯飞', '政法BG', '前端开发'];
for (let item of arr) { 
 console.log(item); // 科大讯飞 政法BG 前端开发
}
// 输出数组索引
for (let item of arr.keys()) { 
 console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) { 
 console.log(item + ':' + val); // 0:科大讯飞 1：政法BG 2：前端开发
}

6. Supplement

6.1, break and Continue problems

In the forEach, map, filter, reduce, every, some functionsbreak andcontinue The keywords will not take effect because they are in function, but function solves the problem of closure traps.

If you want to use break and continue, you can use for, for...in, for...of, while.

6.2, Arrays and Objects

For traversing array elements use: for(), forEach(), map(), for. ..of.

For looping object properties use: for...in.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to traverse arrays in JavaScript. For more information, please follow other related articles on the PHP Chinese website!