Js高阶函数reduce、map、filter

  • reduce

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
注意: reduce() 对于空数组是不会执行回调函数的。

基本语言
array.reduce(function(prev,cur,index,array){
...
}, init);

prev 表示上一次调用回调时的返回值,或者初始值 init;
cur表示当前正在处理的数组元素;
index 表示当前处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
array表示原数组;
init表示初始值。

实例

定义一个数组:

var arr = [3,9,4,3,6,0,9];
  • 数组项总和
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);
  • 数组项最大值
var max = arr.reduce(function (prev, cur) {
   return Math.max(prev,cur);
});
  • 数组去重
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
    //& 不管前面的条件是否正确,后面都执行
    //&& 前面条件正确时,才执行后面,不正确时,就不执行,就效率而言,这个更好。
  • map

map()方法返回一个新数组,常用于根据原数组来生成新的数组,此方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测,不会改变原始数组。

基本语言
array.map(function(cur,index,array){
 ...
})

cur必须。当前元素的值
index可选。当期元素的索引值
array可选。当期元素属于的数组对象

实例
  • 数值项求平方
// 例子数值项求平方
let data = [1,2,3,4,5];
let newData = data.map(function (item){
    return item * item;

});
console.log(newData);
//箭头函数的写法
let newData2 = data.map(item => item *item);
console.log(newData2);
  • 方便获得数组对象中的特定属性值
// 在实际中,我们可以利用map方法方便获得数组对象中的特定属性值
let arr = [
    {"name": "张小花", "email": "zhang@qq.com"},
    {"name": "body", "email": "body@qq.com"},
    {"name": "李小璐", "email": "li@qq.com"}
];
let newEmail = arr.map(function (item) {
    return item.name;
});
console.log(newEmail.join(','));
//第2种获取数组对象中的值
let emails = [];
arr.map(function (item){
    emails.push(item.email);
});
console.log(emails);
// ["zhang@qq.com", "body@qq.com", "li@qq.com"]
  • filter

filter() 方法创建一个新的数组,新数组中的元素是通过过滤出符合条件的元素。
注意: filter() 不会对空数组进行检测, 不会改变原始数组。

基本语言
array.filter(function(cur,index,array){
...
}, thisValue);

currentValue 必须。当前元素的值
index可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"

实例
  • 数组元素大于指定数值
let arr=[1,2,3,4,5,6];
let newArr=arr.filter(item=>{
    return item>3;
}
console.log(newArr);// newArr=[4,5,6]
  • 数组去重
var  newArray;
var arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});
console.log(newArray.toString());//[apple,strawberry,banana,pear,orange]

注:去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容