1, ES5 (ECMAScript version 5)
1. Add a function in the array
Judgment function
every() is used to judge whether all elements in an array meet the requirements. The format is as follows:
var Judgment result=array.every(
function(Current element value n,Current subscript i,Current array arr){//Callback function
return Check whether the current element value meets the requirements and return the check result
}
);
every has its own for loop, which automatically traverses each element in the array. Each time it traverses an element, it automatically calls the callback function; Each time the callback function is called, three values are automatically passed in: the current element value n, the current subscript i, and the current array object arr.
If the judgment result of this callback function is true, it at least indicates that the current element meets the requirements, and every will automatically traverse the next element until all elements are traversed. If no unqualified elements are encountered, the loop ends and returns true as a whole, indicating that all elements in the current array meet the requirements.
If the judgment result of this callback function is false, it indicates that the current element does not meet the requirements. every immediately exits the loop and directly returns false, indicating that not all elements in the current array meet the requirements.
For example: determine which array is composed of even numbers;
<script>
var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 6, 4];
var result1 = arr1.every(
function (n, i, arr) {
console.log(`
arr1.every The callback function is called automatically once;
Received argument value:n=${n}i=${i}arr=${arr}；
Callback function execution result return ${n%2==0}
`);
return n % 2 == 0;
}
);
var result2 = arr2.every(
function (n, i, arr) {
console.log(`
arr2.every The callback function is called automatically once;
Received argument value:n=${n}i=${i}arr=${arr}；
Callback function execution result return ${n%2==0}
`);
return n % 2 == 0;
}
);
console.log(result1, result2); //false true
</script>some(), specifically checking whether an array contains qualified elements; The format is as follows:
var Judgment result=array.some(
function(Current element value, Current subscript position, Current array){
return Judge whether the current element value meets the requirements
}
)
Some has its own for loop, which automatically traverses each element in the array. Each time it traverses an element, it automatically calls the callback function; Each time the callback function is called, three values are automatically passed in: the current element value, the current subscript i, and the current array object arr. in the callback function, judge whether the current element value meets the requirements, and return the judgment result to some function.
If the judgment result of this callback function is true, it indicates that at least the current element meets the requirements. some immediately exits the loop and directly returns true, indicating that the current array contains at least one element that meets the requirements.
If the judgment result of this callback function is false, it indicates that the current element does not meet the requirements, and some can only continue to traverse the next element. If no qualified element is found until the end of the traversal, false is returned. Description the current array does not contain qualified elements.
For example: determine which array contains odd numbers;
<script>
var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 6, 4];
var result1 = arr1.some(
function (n, i, arr) {
console.log(`
arr1.some The callback function is called automatically once;
Received argument value:n=${n}i=${i}arr=${arr}；
Callback function execution result return ${n%2==1}
`);
return n % 2 == 1;
}
);
var result2 = arr2.some(
function (n, i, arr) {
console.log(`
arr2.some The callback function is called automatically once;
Received argument value:n=${n}i=${i}arr=${arr}；
Callback function execution result return ${n%2==1}
`);
return n % 2 == 1;
}
);
console.log(result1, result2); //true false
</script>Ergodic function
forEach() replaces the for loop to simplify the special function of traversing the index array. The format is as follows:
array.forEach(function(Current element value, Current subscript i, Current array){
Performs an operation on the current element value
})In the callback function, perform the specified operation on the current element without returning a value.
Example: roll call;
<script>
var arr = ["Tommy", "Bob", "Juliet", "Balala"];
// for loop traversal
for (i = 0; i < arr.length; i++) {
console.log(`${arr[i]} - Here!`);
}
// forEach writing
arr.forEach(function (n) {
console.log(`${n} - Here!`);
})
// forEach abbreviation
arr.forEach(n => console.log(`${n} - Here!`))
</script>map(), which reads the value of each element in the original array. After modification, a new array is generated and returned. The format is as follows:
var New array=Original array.map(
function(Current element value, Current subscript i, Current array){
return New value after modification of current element value
}
)
In the callback function, modify the current element value and return the modified new value to the map function; After receiving the new value, the map function automatically puts it into the corresponding position in the new array; After traversal, the map returns a new array. The original array remains unchanged.
For example: return all elements in the array * 2 to a new array;
<script>
var arr1 = [1, 2, 3, 4, 5, 6, 7];
var arr2 = arr1.map(
function (n, i) {
return n * 2;
}
)
console.log(arr1);//[1, 2, 3, 4, 5, 6, 7]
console.log(arr2);//[2, 4, 6, 8, 10, 12, 14]
</script>Filter(), filter, copy out the qualified individual elements in the array, put them into the new array and return. The format is as follows:
var New array=array.filter(
function(Current element value, Current subscript i, Current array){
return Judge whether the current element value meets the requirements
}
)
In the callback function, judge whether the current element value meets the requirements and return the judgment result. If the judgment result of the current element is true, it indicates that the current element meets the conditions, the filter will append the current element to a new array and save it. If the judgment result of the current element is false, it indicates that the current element does not meet the requirements, and the filter will do nothing, Continue walking through the next element.
Example: filter out even numbers in the array;
<script>
var arr1 = [1, 2, 3, 4, 5, 6];
var arr2 = arr1.filter(
function (n, i) {
console.log(`arr.filter()The callback function is called automatically once. Element value received=${n}. After judgment, the result is ${n%2==0}`);
return n % 2 == 0
}
)
console.log(arr1);//[1, 2, 3, 4, 5, 6]
console.log(arr2);//[2, 4, 6]
</script>Array summary
reduce(), summarize, count all elements in the array, and return the function of statistical results. The format is as follows:
var result=array.reduce(
function(donation box, Current element value n, Current subscript i, Current array arr){
return donation box+Current element value
},
Starting value
)
reduce first creates a variable internally to save the starting value of the summary (donation box variable); The built-in for loop automatically traverses each element in the original array. Each time an element is traversed, the callback function is automatically called. Each time the callback function is called, four values are automatically passed in: the temporary summary value in the donation box variable, the current element value n, the current subscript i, and the current array object arr.
In the callback function, add the temporary summary value to the current element value, calculate the new summary value, and then return it to reduce. After obtaining the new summary value, reduce will put it back into the donation box variable for temporary storage to prepare for the continued accumulation of the next value.
Example: sum the contents of the array;
<script>
var arr = [1, 2, 3, 4, 5, 6, 7];
var result = arr.reduce(
function (box, n) {
console.log(`
arr.reduce Automatically call the callback function once,
The initial value is: ${box}，
The current element value is: ${n}，
Return value: ${box + n}
`);
return box + n;
},
0 //Starting value
)
console.log(result); //28
</script>Supplement: 5 kinds of this
Judge this, don't look at where the definition is, just look at where and how to call it!
(1)obj.fun() this in fun refers to the obj object before (who calls who);
(2)new Fun() this in fun refers to the new object created by new;
(3) fun() or (function() {...}) () or callback function thisz refers to windozw by default;
(4) this in the prototype object refers to a child object (who calls who) before calling the common function in the future;
(5) this in the accessor property refers to the current object where the accessor property is located.
Links to previous JavaScript advanced blog posts: