Detailed explanation of how to traverse arrays in JavaScript

This article tells how JavaScripttraverses an array. If you don’t know about JavaScript traversing arrays or are interested in JavaScript traversing arrays, then let’s take a look. This article, let’s stop talking nonsense and get to the point

This article summarizes the method of traversing an array in js:

Question: Traverse the array arr and convert all elements to uppercase

var arr = ['a','b','c','d'];

Method 1: for loop This method is more commonly used

"use strict";var arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;];var arrUp = [];for(var i = 0; i < arr.length; i++){
    arrUp.push(arr[i].toUpperCase());
}
console.log(arrUp);             //['A','B','C','D']

method 2: for in loop This method is usually used to traverse objects (array is a special object)

"use strict";var arr = ['a','b','c','d'];var arrUp = [];for(var i in arr){
    arrUp.push(arr[i].toUpperCase());
}
console.log(arrUp);             //['A','B','C','D']

Method 3: forEach method Array iteration method (explained below)
Return value: No return value

"use strict";var arr = ['a','b','c','d'];var arrUp = [];
arr.forEach(function(key, index, array){
    arrUp.push(key.toUpperCase());
});
console.log(arrUp);             //['A','B','C','D']

Method 4: map method Array iteration method (explained below)
Return value: Return an array composed of the results of each function call

"use strict";var arr = ['a','b','c','d'];var arrUp = arr.map(function(key, index, array){
    return key.toUpperCase();
});
console.log(arrUp);             //['A','B','C','D']

For the above simple problem, there are four possible methods Relatively good, but the problem is complicated

var arr = [1, 4, 10, 5, 8];

Question: For this array, please count the number of array elements greater than 6
Just to give a simple example, the above Four methods are also possible, but it may be more troublesome to judge. Here are methods for traversing arrays. I believe they may be better in different scenarios.

Array iteration method

The following methods only have different return values, and the rest are exactly the same: Receive 2 parameters, a function (required) ) and the scope object that runs the function (optional, generally not used, I don’t know what the magic is at the moment, so I won’t explain too much)

//要接受的函数，本文叫判断函数function(key, index, array){
    //key： 数组项值
    //index： 该项的数组下标
    //arr：待操作的数组}

Method 5: every method
Return value: If the judgment function returns true for each item, then return true
Use: According to conditions Detect each item in the array, just want to get the Boolean value

"use strict";var arr = [1, 4, 10, 5, 8];var arrTest = arr.every(function(key, index, array){
    return (key > 2);
});
console.log(arrTest);   //false

Method 6: filter method
Return value: Return an array, The array elements are composed of items for which the judgment function will return true
Use: Conditional filtering

"use strict";var arr = [1, 4, 10, 5, 8];var arrTest = arr.filter(function(key, index, array){
    return (key > 6);
});
console.log(arrTest);   //[10, 8]

Method 7: some method
Return value: If the judgment function returns true for any item, then true is returned
Use: Conditional filtering

"use strict";var arr = [1, 4, 10, 5, 8];var arrTest = arr.some(function(key, index, array){
    return (key > 6);
});
console.log(arrTest);   //true

above That’s all the content of this article. If you don’t know much about it, you can easily master it by implementing more of both sides!

Related recommendations:

Summary of JavaScript methods for traversing arrays

Usage of for-in loop and for loop to traverse array

Method of while loop to traverse array

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