Js array traversal is often used in the array operation, some time ago to learn the Vue video, above incidentally explained the js array traversal method, at that time did not leave notes, to recall today, sure enough still forget some, so choose to start recording here. Without further ado, let’s begin.

1. The for loop

This method should be js learners first contact with js traversal method, anyway, I was the first contact, maybe my level is low, I often use this method.

// Suppose there is an array arRletArr = [1, 2, 3, 4, 5]; //forcyclefor(let i = 0; i < arr.length; i++){
    //doSomeing... console.log(arr[i]); } //console.log 1 2 3 4 5Copy the code

2. The forEach loop

This method is second only to the for loop above (personal opinion), but is not as efficient as the for loop. The forEach loop takes two arguments. The first argument is function, and the second argument is that, which changes this. The forEach argument also takes two arguments. The first argument is each item of the loop and the second argument is each item’s index. Note that both that and index are not used, and forEach loops do not support returns

// Suppose there is an array arRletArr = [1, 2, 3, 4, 5]; //forEach loop arr. ForEach (function(item,index){
    //doSomeing... console.log(arr[i]); },that); //console.log 1 2 3 4 5Copy the code

3. The for in circulation

This is indeed a loop, but it is rarely used to iterate over an array, because the obvious drawback is that the array’s private properties are also iterated over. The default is to iterate over the array key, so it’s going to be a string

// Suppose there is an array arRletArr = [1, 2, 3, 4, 5]; // Add a private property to the array arr.a ="key"

//for incyclefor(let key in arr){
    //doSomeing... console.log(typeof(key)); } //console.log // Notice that six are printed here,for inThe loop will iterate over the private properties of the array string String String String string string string string stringCopy the code

4. For of loop (ES6)

The for of loop is an ES6 approach that compensates for forEach and for in loops. It has a return and does not iterate over the array’s private properties. Note: The for of loop does not iterate over objects

// Suppose there is an array arRletArr = [1, 2, 3, 4, 5]; // Add a private property to the array arr.a ="key"

//forOf circulationfor(let val of arr){
    //doSomeing... console.log(val); } //console.log // Notice that there are five printed here,forThe of loop does not iterate over the array's private properties 1, 2, 3, 4, 5Copy the code

5. The filter filter

Personally, a filter is also a common method. It’s going to iterate over an array and return a new array, so it doesn’t affect the original array. After iterating through each item in the array, the callback returns true and adds the item to the new array. The callback function takes two arguments (item,index), where item is each item and index is the subscript. Index can be left out

// Suppose there is an array arRletArr = [1, 2, 3, 4, 5]; // Declare a new empty arrayletnewArr = []; // Add a private property to the array arr.a ="key"NewArr = arr.filter(item=>item>3); NewArr = arr.filter(); // newArr = arr.filter();function(item){
    returnitem > 3; }) console. The log (newArr). / / the console log (4, 5)Copy the code

6. The map mapping

A map iterates through each item of an array, but does not alter the original array, just as a filter returns a new array. What does the callback return, and what is the corresponding entry in the new array

// Suppose there is an array arRletArr = [1, 2, 3, 4, 5]; // Declare a new empty arrayletnewArr = []; // Add a private property to the array arr.a ="key"NewArr = arr.map(item=> '<div>${item}</div>`); // newArr = arr.map(function(item){
    return "<div>" + item + "</div>";
})
console.log(newArr)

//console.log
[
    "<div>1</div>"."<div>2</div>"."<div>3</div>"."<div>4</div>"."<div>5</div>"
]Copy the code

7. The include and find

Include and find are both es6 methods. Include takes an argument that iterates over each item in the array and returns true if it exists. The argument to find is a callback function, and the argument to this function is each item and its subscript, and find returns the item that matches, and once it matches, it doesn’t go any further, and find returns a new array

// Suppose there is an array arRlet,2,3,4,5,55 arr = [1]; //include console.log(arr.include(5)); //include consoletrue

//find
let res = arr.find(function(item,index){// Return if this item contains 5true
    return item.toString().indexOf(5) > -1;
})
console.log(res);

//find console
5Copy the code

8. Some and every

Some and every are two methods that have opposite effects. Some iterates through the array to find true, that is, return true, otherwise return false; Every returns false if false is found, and true otherwise

// Suppose there is an array arRlet,2,3,4,5,55 arr = [1]; //somelet someResult = arr.some(item=>item > 4);
console.log(someResult);

//some console
true

//every
let evevyResult = arr.every(item=>item > 0);
console.log(everyResult);

//every console
trueCopy the code

9.reduce

To be honest, I do not understand this method so far that I cannot explain it here. I hope you can refer to it yourself

2018.5.30 update ~

The community is also a good place to learn from each other. I thought that no one would pay attention to my humble opinion, so I did not manage this article. After understanding reduce, I updated my notes, only to find that some great people came to guide me. Thank you for your correction and advice ~

Body:

Reduce is the ES5 method, iterating from the first item of the array to the last. Reduce can take two arguments. The first is a callback function (required) that can take four arguments: prev, cur, index, and ARR. Where, prev is the value of the previous iteration, cur is an item of the current iteration, index is the subscript of the current item, and arr is the original array of the iteration. The second argument to reduce is the base value passed in and is not needed. If not, the iteration starts with the first item in the array

// Suppose there is an array arRletArr = [1, 2, 3, 4, 5]; //reduce // No second argument is passedletresult = arr.reduce((prev,cur,index,arr)=>prev+cur); console.log(result); //console 15 // Pass in the second argumentlet result = arr.reduce((prev,cur,index,arr)=>{returnprev+cur; }, 100); console.log(result); //console 115Copy the code