Traversal in js

1. For loop, the length of the array is required

we define an array

var arr = ['a','b',3,4];

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

for in (commonly used to traverse objects)

//for in can also traverse the array
 for ( var i in arr){
　　console.log(arr[i]);
}

Using for in can also traverse the array, but there are the following problems:

　　1. The index index is a string number, and geometric operations cannot be performed directly

　　2. The traversal order may not be in the internal order of the actual array

　　3. Using for in will traverse all enumerable properties of the array, including prototypes

var arr = [{a:1,},{a:2},{a:3}]
    arr.name=112
    for(var i in arr){
        console.log(typeof i)
        console.log(arr[i]);
    }

The output is:

So for in is more suitable for iterating over objects.

for of will not loop out the name in the above example

var arr = [{a:1,},{a:2},{a:3}]
    arr.name=112
    for(var i of arr){
        console.log(i)
    }

The output is:

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

2. The forEach loop does not have to know the length of the array and has no return value. (es5)

1 arr.forEach( function (item,index,arr){ 
　　　　//item is the current traversed content, index is the index, and arr is the array itself
 2      console.log(index,item,arr);
 3 })

There is a () method in jquery $.each, the first two parameters are just opposite

Note: If you use foreach to traverse the array, you cannot use break to interrupt the loop, and use return to return to the outer function.

3. The map function traverses each element of the array and calls back the operation. It needs to return a value. The return value forms a new array, and the original array remains unchanged (es6)

var arr = [1,2,3,4];
var myMap = arr.map(function(item,index,arr){
    return item*item;
})
console.log(myMap) //Squaring each value and outputting a new array [1, 4, 9, 16]

4. filter function, filter the elements that pass the condition to form a new array, the original array remains unchanged (es6)

var arr = [1,2,'3','a'];
var numArr = arr.filter(function(i){
    return typeof i ==='number';
}) 
console.log(numArr) //output new array [1,2]

The map and filter parameters are the same

var newArray = arr.map(function callback(currentValue, index, array){
//processing of each element
})
parameter
callback: the function used to generate a new array.
The parameters of callback:
currentValue: Of course the element
being processed index: the index of the element being processed
array: the array of the calling map method (that is, the front of .map() is arr)

5. The some function, traverses whether there are eligible elements in the array, returns a Boolean value, and returns true as long as one is true (es5)

var arr = [1,2,'3','a'];
var mySome = arr.some(function(i){
    return typeof i ==='number';
})
console.log(mySome) //true

6. The every function, traverses whether each element in the array meets the conditions, returns a Boolean value, and returns true if all are true (es5)

var arr = [1,2,'3','a'];
var myEvery = arr.every(function(i){
    return typeof i ==='number';
})
console.log(myEvery) //false

7. reduce/reduceRight function, traverse and operate on data (es5)

var myarr = [1,3,5,7,9]
 var initialValue = 10 //Optional. Initial value passed to function 
var plus = myarr.reduce( function (total, num,index,arr){
        console.log('total:',total) //Required. The initial value, or the return value after the calculation ends. 
        console.log('num:',num) //Required. The current element 
        console.log('index:',index) //Optional. The index of the current element 
        console.log('arr:',arr)   //Optional. The array object to which the current element belongs. 
        return total + num;
    },10)
console.log('plus:',plus) //Calculate 10+1+3+5+7+9

Output result:

The reduceRight method has the same function as reduce, but traverses from the right.

(Personal summary, please correct me if I am wrong)

Guess you like