Reposted from : Five methods of JavaScript array traversal
This article mainly introduces five methods of JavaScript array traversal to help you better understand and learn to use JavaScript. Interested friends can learn more
In the process of writing code in JavaScript, you can use several methods to iterate over the array; including methods such as for loop, forEach loop, map loop, forIn loop, and forOf loop.
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]); //a b c d e
}Two, forEach () method: use the callback function
forEach() This is a method of the Array object; it accepts a callback function as an argument.
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); // 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
}
})Four, for..in loop: traverse objects and arrays
The for...in loop can be used to loop over 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
}Five, for...of loop: traverse objects and arrays
Loopable arrays and objects, recommended for traversing arrays.
for...of provides three new methods:
- key() is a traversal of key names;
- value() is a traversal of key values;
- 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 functions, the break and continue keywords will not take effect, because they are in the function, but the function solves the problem of the closure trap.
To use break and continue, you can use for, for...in, for...of, while.
6.2, arrays and objects
用于遍历数组元素使用：for()，forEach()，map()，for...of 。
用于循环对象属性使用：for...in。