Javascript learning map,filter,foreach differences and usage

Today, there are also very hard to earn cat food money

.map(),.filter(),.reduce() and.find() are similar to.foreach (). This article mainly records the differences and application scenarios of map(), filter() and forEach()

map()

Array. map(function(currentValue,index,arr), thisValue)

var new_arr=arr.map(function callback(item[,index[,arr]]){
    // Return values form a new array
}[, thisArg])
Copy the code

• The map method calls the callback function once, in order, for each element in the array. The return values (including undefined) from each callback are combined to form a new array.

Note: Map () does not detect empty arrays.

Note: Map () does not change the original array.

Example: Return an array whose elements are the square root of the original array

Example: Return an array whose elements are doubles of the original array

filter()

Array. filter(function(currentValue,index,arr), thisValue)

• Filter operation, filter all elements that meet the condition, if true, return to form a new array;
• It creates a new array, and the elements in the new array are checked by all the elements in the specified array that meet the criteria;
• The argument to filter is a callback function whose result must return a Boolean value.

Note: Filter does not alter the original array

Note: Filter () does not detect an empty array.

Example: Filter an array, filtering for elements greater than 3

Example: Return an even number in an array

let arr = [48.16.45.31.7];
let newArr = arr.filter(function (value, index, array) {
    return value % 2= = =0;
});
console.log(newArr)
48, / / [16]
Copy the code

forEach()

Array. forEach(function(currentValue, index, arr), thisValue)

ForEach does not return a new array, but rather changes the array from the original one, which can be used to modify the array

Note that forEach() does not perform callbacks on empty arrays.

Return value :undefined, always returns undefined, and cannot be chained

ForEach () is just a different implementation of the for loop, but it has its own advantages over the for loop, and I understand it as an upgraded version of the for loop

Performance: for loop > forEach > map

Readability: forEach/map > for loop

var array = [1.2.3];
for (var i = 0; i < array.length; i++){        forLoop through the arrayconsole.log(i);
}
Copy the code

var array = [1.2.3];
array.forEach(function(i){forEach() traverses the arrayconsole.log(i);
});
Copy the code

• ForEach () requires less configuration, and for loops need to set iterator values (var I = 0), end conditions (I < array.length), and iteration rules (I ++). With forEach() you simply pass in a method that will be executed forEach element.

• When forEach() is used, a function with its own scope is passed in. In the for loop, the scope that causes the contamination loop.

Conclusion:

The filter function is used to filter all elements that meet the criteria. If true, it returns a new array

Map function: a function that processes each element in the original array and returns a new array.

ForEach: performs a callback forEach valid item in the array, in ascending order. Deleted or uninitialized items are skipped

ForEach and Map can do similar things

ForEach, Map, and filter can modify the original array

ForEach has no return value, map has a return value, filter has a return value