Summary of JS array traversal methods

JS array traversal must be used in the project. In order to write elegant code, use the method in the right place. Here we will compare several methods and display them in es6. , you need to build a conversion es5 environment. This is not the focus of this article. You can write about this in the next article.

1. The for loop

is the most frequently used and is used by the front-end, indicating that I will only use the for loop at the beginning. . .

let arr = [&#39;123&#39;, &#39;456&#39;, &#39;789&#39;];for (let i = 0; i < arr.length; i ++) {
    console.log(arr[i]);
}

The most commonly used, but there is room for optimization:

for (let i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
}

Use temporary variables to store the length value to avoid repeatedly obtaining the array length.

2. for...of loop

The new loop method in es6 is simpler and more efficient than the for loop in es5. It also provides three new methods:

1. key() is a traversal of key names;

2. value() is a traversal of key values;

3. ##entries () is a traversal of key-value pairs;

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

3. foreach loop

The foreach method of the array is used more frequently, but its performance is weaker than the for loop. It has the advantage that empty array elements can be automatically omitted, which is equivalent to automatically emptying.

let arr = ['科大讯飞', ,  '政法BG', , '前端开发'];
arr.forEach((val,index)=>console.log(index,val));

4. Filter loop

has a loop function, which is mainly used to filter arrays. It receives a method and it will return a collection of elements that conform to the function.

let arr = [{
    label: '科大讯飞',    
    value: 1
}, {
    label: '政法BG',    value: 2
}, {
    label: '前端开发',    value: 3
}];

const arr1 = arr.filter(list => list.value === 1);
console.log(arr1);

5. Some loop

has the same function as filter. The difference is that it returns a boolean value, which is used to check whether an object exists in the array.

if (arr.some(list => list.value === 1)) {
    console.log('执行了！')
}

So it is often used in if.

6. Map loop

The role of substitution, it will return a set of values ​​returned after calling the callback function for each element in the original array.

let arr = [1, 2, 3, 4];
onst arr1 = arr.map(list => list * 2);
console.log(arr1);

The above are the commonly used array traversal methods. In the future, you can use one method according to the actual situation, instead of using for loops everywhere.

Related recommendations:

Common methods for traversing arrays

3 ways to traverse list collections

Detailed explanation of HashMap in Java8 (storage structure, function implementation, expansion optimization, thread safety , traversal method)

Revisit the data structure: common methods of binary trees and three traversal methods Java implementation

The above is the detailed content of Summary of JS array traversal methods. For more information, please follow other related articles on the PHP Chinese website!