There are many new things added in ES5, and understanding them will be of great help to write JavaScript. For example, in the array, we may not need to go for loops with a straightforward and eye-catching way.
A new method of writing arrays has been added in ES5, as follows:
forEach (js v1.6)
map (js v1.6)
filter (js v1.6)
some (js v1.6)
Every (js v1.6)
indexOf (js v1.6)
lastIndexOf (js v1.6)
reduce (js v1.8)
reduceRight (js v1.8)
1. Commonly used array Array object properties in js:
As shown in the figure, the part marked with a red circle is a new attribute added to ES5.
2. Browser support status:
•IE:9+;
•Chrome;
•Firefox2+;
•Safari 3+;
• Opera 9.5+;
3. Position method
ECMAScript5 defines 2 position methods for arrays. indexOf(), lastIndexOf();
Both methods receive two parameters: the item to be found and (optional) index indicating the location of the search starting point.
Among them, indexOf() starts to look backward from the beginning of the array (position 0), while lastIndexOf() starts to look forward from the end of the array.
Both methods need to return the position of the item to be found in the array, or return -1 if it is not found;
Example:
var numbers = [1,2,3,4,5,4,3,2,1];alert(numbers.indexOf(4)); //4alert(number.lastIndexOf(4)); //5alert(number.indexOf(4,4)); //5alert(number.lastIndexOf(4,4)); //3
4. Iteration method
ECMAScript5 defines 5 iterative methods for arrays.
4.1.every()
Definition and Usage: The every() method is used to detect whether all elements of the array meet the specified conditions (provided by a function).
The every() method uses the specified function to detect all elements in the array:
•If an element is detected in the array that is not satisfied, the entire expression returns false and the remaining elements will not be detected again.
•Return true if all elements satisfy the condition.
Note: every() will not detect empty arrays.
Note: every() does not change the original array.
Description: Detect whether all elements of the array ages are greater than 18:
var ages = [32, 33, 16, 40];function checkAdult(age) {return age >= 18;}function myFunction() {document.getElementById("demo").innerHTML = ages.every(checkAdult);}The result is:
false;
4.2. Some()
Definition and usage: The some() method is used to detect whether elements in an array meet the specified conditions (provided by the function).
Run the given function on each item in the array, and if the function returns true for either item, it returns true;
The code is as follows:
var numbers = [1,2,3,4,5,4,3,2,1];var someResult = numbers.some(function(item,index,array){//item refers to array value; index refers to array subscript; array refers to array itself; return (item>2);});alert(someResult);The result is:
true;
4.3. filter()
Definition and Usage: The filter() method creates a new array, and the elements in the new array are checked for all elements in the specified array that meet the criteria.
Run a given function on each item in the array, returning an array of items that will return true.
Description: To return an array with values greater than 2, the code is as follows:
var numbers = [1,2,3,4,5,4,3,2,1];var filterResult = numbers.filter(function(item,index,array){//item refers to array value; index refers to array subscript; array refers to array itself; return (item>2);});alert(filterResult);The result is:
[3,4,5,4,3]
4.4. map()
Definition and usage: The map() method returns a new array, and the elements in the array are the values processed by the original array element after calling the function.
Run the given function on each item in the array, returning an array composed of the results of each function call.
Description: Multiply each term in the array by 2, and return the array composed of these products. The code is as follows:
var numbers = [1,2,3,4,5,4,3,2,1];var mapResult = numbers.map(function(item,index,array){//item refers to array value; index refers to array subscript; array refers to array itself; return item*2;});alert(mapResult);The result is:
[2,4,6,8,10,8,6,4,2]
4.5. forEach()
Definition and usage: Run the given function on each item in the array. This method has no return value.
Essentially the same as using a for loop to iterate through an array. The code is as follows:
var numbers = [1,2,3,4];numbers.forEach(function(item,index,array){console.log(item);});The result is:
1
2
3
4
5. Reduce method
ECMAScript5 adds two new methods to reduce arrays: reduce() and reduceRight();
These two methods will iterate over all items in the array and then build a final returned value. Among them, the reduce() method starts from the first item of the array and goes through it one by one to the end.
reduceRight() starts from the last item of the array and traverses forward to the first item. Both methods receive two parameters: a function called on each item and (optional) as the initial value for the narrowing base.
The function passed to reduce() and reduceRight() receives 4 parameters: the previous value, the current value, the index of the item, and the array object.
Description: Use the reduce() method to perform the operation of finding the sum of all values in an array. The code is as follows:
var values = [1,2,3,4,5];var sum =values.reduce(function(prev,cur,index,array){return prev+cur;});alert(sum);The result is:
15
The above is the relevant knowledge of the newly added Array method in the JavaScript ES5 standard introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!