Table of contents
foreword
Many useful array methods have been added in ES5. Let's talk about the basic usage of these methods.
Among the newly added methods, the first parameter of most methods is a function, and the function is called once for each element (or some elements) of the array. In most cases, calling the provided function will provide 3 parameters, which respectively represent the array element ie value, the array index, and the array itself. If you are not clear, there will be examples below.
1. forEach()
As the name implies, it is to traverse the array. The first parameter of this method is a function . This function will have 3 parameters, which represent the array element namely value , the array index , and the array itself . Example:
var arr=[1,2,3,4,5];
// Subsequent routines are based on this array
arr.forEach(function(val,index,arr){
console.log("Array element value: "+val+" array index: "+index+" array itself: "+arr);
});
2. map()
The map method passes each element of the called array to the specified function and returns a new array , which is the array processed by the function.
var arr2=arr.map(function(val,index,arr){
//console.log("Array element value: "+val+" array index: "+index+" array itself: "+arr);
return val*2;
})
console.log(arr2);//will not change the original array
console.log(arr);
We can see that a new array will be returned after the map function , which is the result of the anonymous function processing. Of course, the function passed to the map should have a return value. Also the original array will not be changed.
3. filter()
It can be seen from the name that this is a filter . After executing the filter method, it will return an array that meets the conditions, that is to say, it will return a new array just like the map function . The criterion for judging whether the conditions are met is to look at the return value of the function passed to the filter. If the return value is true, then add this element to the new array, otherwise not. example:
var arr3=arr.filter(function(val,index,arr){
//console.log(val+"=="+index+"=="+arr);
return val>3;
})
console.log(arr3);
console.log(arr);
4. every() and some()
Every and some both make logical judgments on each element in the array, and finally return a Boolean value . Go directly to the example:
var flag=arr.every(function(val,index,arr){
return val>=3;
});
console.log(flag);
The final printed result is false, and the every function must satisfy each element before returning true .
var flag2=arr.some(function(val,index,arr){
return val>4;
})
console.log(flag2);
The final printed result is true, the some method will return true as long as there is an array element that satisfies the condition , and it will return false only when all the elements do not meet the condition.
In the every method, when an element does not meet the conditions and returns false, the traversal will be terminated and false will be returned directly; while the some method is just the opposite, as long as one element returns true, the traversal will be terminated and true will be returned directly.
5. reduce()和reduceRight()
These two methods combine array elements to generate a single value, and then return this value. Just look at the routine!
var value=arr.reduce(function(sum,val,index,arr){
console.log("Sum:"+sum+"array element value:"+val+"array index:"+index+"array itself:"+arr);
return sum+val;
},0)
console.log(value);
The final result is 15. It is the sum of each element of this array.
We can see that reduce can accept two parameters, the first is the simplified function , and the second is an initial value passed to the function . The simplification function can also have 4 parameters, which respectively represent the accumulated results of the simplification operation so far , the array element value , the array index and the array itself . When called for the first time, the first parameter, the value of sum, is the second parameter of the reduce method, the initial value. Of course, we can also omit the second parameter of the reduce method (that is, the initial value), and the final result will be the same, but the process is slightly different, that is, the first element of the array is directly used as the initial value. Then one less line is printed than the above.
It is worth noting that on an empty array, if the reduce method is called with the initial value omitted, a type error exception will be thrown.
var scar=[];
var value=arr.reduce(function(sum,val,index,arr){
//console.log("Sum:"+sum+"Array element value: "+val+" Array index: "+index+" Array itself: "+arr);
return sum+val;
})
console.log(value);
Of course, if it is an empty array with an initial value, or if the array has only one element and no initial value, then that value will simply be returned without throwing an exception. See routine:
var arr=[3];
var value=arr.reduce(function(sum,val,index,arr){
//console.log("Sum:"+sum+"Array element value: "+val+" Array index: "+index+" Array itself: "+arr);
return sum+val;
})
console.log(value);
Then the result will be 3
var scar=[];
var value=arr.reduce(function(sum,val,index,arr){
//console.log("Sum:"+sum+"Array element value: "+val+" Array index: "+index+" Array itself: "+arr);
return sum+val;
},7)
console.log(value);
Then the result will be 7, and no exception will be thrown.
The reduceRight method is similar to the reduce method, except that it processes the array according to the array index from high to low , not from low to high, so it will not be described here;
6. indexOf()和lastIndexOf()
As the name suggests. Knowing this is to judge whether the array contains a certain value, but indexOf is to find from low to high , and lastIndexOf is to find from high to low . Returns the index of the first element found if contained, or -1 if not found. Or see the routine:
var arr=[1,2,3,2,4,5]
var index=arr.indexOf(2);
var index2=arr.indexOf(8);
var lastIndex=arr.lastIndexOf(2);
console.log(index); //1 will only return the index of the first eligible element
console.log(index2); //-1
console.log(lastIndex); //3 Search from the back to the front, and then return the index of the first element that meets the conditions
The results and the reasons behind the routine have been clearly written in the comments.