This is the fifth day of my participation in Gwen Challenge
The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the 19th cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds.
Js Array object can call many methods, each method has its special purpose, but in many cases we will only use such advanced methods, more than the implementation process is not known, this section on the Array of common methods map, filter, reduce implementation, to help understand the principle.
19.1 the map
19.1.1 basis
The map() method creates a new array with the result that each element in the array is the return value from a call to the provided function.
- The map method is used as follows:
const new_array = arr.map(function callback(currentValue[, index[, array]]) {
/ /...
}[, thisArg])
Copy the code- A profound
const arr = [1.2.3.4];
const newArr = arr.map(value= > value * 3);
console.log(arr); // [1, 2, 3, 4] the original array remains unchanged
console.log(newArr); // [3, 6, 9, 12]
Copy the code19.1.2 implementation
What a map does is simply process each element and return a new array. Let’s see how to implement our own map function. The implementation steps are as follows:
- Determines whether the first argument in the input is a function
- Gets the contents of the array to process
- Create a new array to load the new content
- Process each value in the array (note changing the this pointer)
- Returns the result
Array.prototype.myMap = function(fn) {
// Determine if the first argument in the input is a function
if (typeoffn ! = ='function') {
throw new TypeError(fn + 'is not a function');
}
// Get the contents of the array to process
const arr = this;
const len = arr.length;
// Create an empty array to load the new content
const temp = new Array(len);
// Process each value in the array
for (let i = 0; i < len; i++) {
// Get the second argument, change this to point
let result = fn.call(arguments[1], arr[i], i, arr);
temp[i] = result;
}
// Returns a new result
return temp;
}
const arr = [1.2.3.4];
const newArr = arr.myMap(value= > value * 3);
console.log(arr); // [1, 2, 3, 4] the original array remains unchanged
console.log(newArr); // [3, 6, 9, 12]
Copy the codeThe above is the map implementation process, and verified to be consistent with the results of the native map method.
19.2 the filter
19.2.1 basis
The filter() method creates a new array containing all the elements of the test implemented through the provided function.
- The use of the filter method is as follows:
const newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
Copy the code- A profound
const arr = [1.2.3.4];
const newArr = arr.filter(value= > value > 2);
console.log(arr); // [1, 2, 3, 4]
console.log(newArr); // [3, 4]
Copy the code19.2.2 implementation
All the filter function does is filter out the elements that match the criteria. The implementation of filter is basically the same as that of map, except that it processes each value in an array slightly differently.
Array.prototype.myFilter = function (fn) {
if (typeoffn ! = ='function') {
throw new TypeError(`${fn} is not a function`);
}
// Get the array
const arr = this;
// Get the length of the array
const len = this.length >>> 0;
// Create a new array to hold the content
const temp = [];
// Process each value in the array
for (let i = 0; i < len; i++) {
// Pay attention to this when processing
const result = fn.call(arguments[1], arr[i], i, arr);
result && temp.push(arr[i]);
}
return temp;
}
const arr = [1.2.3.4];
const newArr = arr.myFilter(value= > value > 2);
console.log(arr); // [1, 2, 3, 4]
console.log(newArr); // [3, 4]
Copy the code19.3 the reduce
19.3.1 basis
The reduce() method performs a reducer function (in ascending order) that you provide on each element in the array, summarizing its results into a single return value.
- The reduce method is used as follows:
const result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
Copy the code- A profound
const arr = [1.2.3.4];
const result = arr.reduce((accumulator, value) = > accumulator + value);
console.log(result); / / 10
Copy the code19.3.2 implementation
Reduce performs the callback function for each element in the array in turn. Let’s see how we can implement our own filter function. The implementation steps are as follows:
- Determines whether the first argument in the input is a function
- Gets the contents of the array to process
- Get the initial value
- Process the elements in subsequent arrays in turn
- Returns the result of the accumulator processing
Array.prototype.myReduce = function(fn) {
if (typeoffn ! = ='function') {
throw new TypeError(`${fn} is not a function`);
}
const arr = this;
const len = arr.length >>> 0;
let value;// The final value returned
let k = 0;// Current index
if (arguments.length >= 2) {
value = arguments[1];
} else {
// If the array is sparse, check whether the array currently has elements. If there is no index, add one
while(k < len && ! ( kin arr)) {
k++;
}
// An error is reported if the array is empty and the initial value does not exist
if (k >= len) {
throw new TypeError('Reduce of empty array with no initial value');
}
value = arr[k++];
}
while (k < len) {
if (k in arr) {
value = fn(value, arr[k], k, arr);
}
k++;
}
return value;
}
const arr = [1.2.3.4];
const result = arr.myReduce((accumulator, value) = > accumulator + value);
console.log(result); / / 10
Copy the code1. If you think this article is good, share and like it so that more people can see it
2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred