Javascript中的.map(), .reduce 和 .filter()

Yukino 325 2021-12-29

.map()

  1. 用法
let officers = [
  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'Admiral Ozzel' },
  { id: 88, name: 'Commander Jerjerrod'}
];

let ids = officers.map(function(officer){
  return officer.id;
});

let ids = officers.map(officer => officer.id);
  1. 介绍
    map其作用如字面意思——“映射”,将原有数组的元素按照给定的函数将其映射成为一个新的值,并返回新值的集合。给定的函数可以是普通的函数,也可以是箭头函数。

.filter()

  1. 用法
let fruits = [
  { name: 'apple', price: 10 },
  { name: 'peach', price: 20 },
  { name: 'orange', price: 5 }
];

let cheapFruits = fruits.filter(function(fruit) {
  return fruit.price <= 10;
})

let cheapFurits = fruits( fruits => furits.price <= 10);
  1. 介绍
    filter,过滤器,其作用是根据给定的判断函数,返回判定为true的元素的集合,同样的这个判断函数也可以是箭头函数。

.reduce()

  1. 用法
let fruits = [
  { name: 'apple', price: 10 },
  { name: 'peach', price: 20 },
  { name: 'orange', price: 5 }
];

let priceSum = fruits.reduce(function(sum, fruit) {
  return sum + fruit.price;
}, 0);

let priceSum = fruits.reduce((sum, fruit) => sum + fruit.price, 0);

let cheapFruits = fruits.reduce(function(result, fruit) {
  if(fruit.price <= 10) {
    result.push(fruit);
  }
  return result;
}, []);

let priceArray = fruits.reduce(function(result, fruit) {
  result.push(fruit.price);
  return result;
}, []);
  1. 介绍
    reduce,归约,其作用是通过给定的函数对已有的数据进行处理或者合并,和map、filter不同的是,reduce的参数有两个,一个是reduce函数,一个是处理结果的初始值,reduce接收的函数也有两个参数,一个是处理结果,另一个就是数组中的元素,函数的返回值会作为下一次调用的参数传入,最后返回最终的结果。同样的,这个函数也可以是箭头函数。

链式调用

map、reduce和filter返回的可以(reduce不一定是)都是数组,所有我们可以在调用一个方法之后接着调用其他的方法,结合处理问题。
例如我们想得到一个班级的高分段(分数大于等于80)的总分。

let transcripts = [
  { name: 'David', score: 81 },
  { name: 'Smith', score: 70 },
  { name: 'Johnson', score: 86 },
  { name: 'Talyor', score: 99 },
  { name: 'Allen', score: 60},
  { name: 'LiHua', score: 100}
];

let scoreSum = transcripts.filter( transcript => transcript.score>=80 ).map(transcript => transcript.score).reduce((sum, score) => sum+score, 0);

如果是要算平均分,那么就需要数组的长度了,可以在map之后把数组先存起来,然后再reduce得到结果,除以数组的长度就可以得到平均值了,又或者可以在reduce的过程中,用一个对象去存储结果,这个对象包含sum和count,最后用这个对象的sum/count即可。

总结

map、reduce和filter都是对数组进行某种处理但不会影响原数组而是返回出列后的数组的方法,map是映射;filter是过滤;reduce是计算归约。
在上面的例子可以看出,reduce的功能十分强大,它的处理结果可以是单个值,也可以是一个对象,也可以是一个数组,甚至是对象数组,reduce能完成map和filter能完成的工作,但写起来更加的复杂,而且并不符合reduce的理念,reduce的主要功能还是计算。
其实map和reduce是一种编程模型,在各种编程语言、软件架构以及大数据处理等有着广泛的应用。在一些后端语言中,如:Java,其中的map是可以并发进行映射的,能够极大的提高处理效率,reduce也能在部分场景做到并发处理;在大数据的场景,2004年谷歌提出的MapReduce架构就是Hadoop的基础,其理念也是出自map、reduce。
所以在理解map、reduce和filter的设计理念之后,针对不同的场景,我们就能选择合适的方法结合去解决问题。


# 前端 # JS