JS 函数map、filter、reduce

我开始以一种截然不同的方式体会痛苦的时刻，我不会感觉沮丧或投不过去，而是把痛苦视为大自然的提醒，告诉我有一些重要的东西需要我去学习。

What?

map()、filter()、reduce(),是处理数组的强大工具，主要使用它们来遍历、过滤、计算数组。

Why?

不用关心内部实现细节，你将更高效的得到你要的结果，且程序更简洁易懂，虽说是如此，但前提你得先掌握。

How?(操作)

map() 从数组中提取数据

需求：watchList数组中包含了一系列电影信息的对象，需要你从中提取出Title和imdbRating,并返回给rating变量中。

// 全局变量
var watchList = [
  {
    "Title": "Inception",
    "Year": "2010",
    "Runtime": "148 min",
    "Released": "16 Jul 2010",
    "Director": "Christopher Nolan",
    "imdbRating": "8.8"
  },
  {
    "Title": "Interstellar",
    "Year": "2014",
    "Released": "07 Nov 2014",
    "Runtime": "169 min",
    "Director": "Christopher Nolan",
    "imdbRating": "8.8"
  },
  {
    "Title": "The Dark Knight",
    "Year": "2008",
    "Released": "18 Jul 2008",
    "Runtime": "152 min",
    "Director": "Christopher Nolan",
    "imdbRating": "9.0"
  },
  {
    "Title": "Batman Begins",
    "Year": "2005",
    "Released": "15 Jun 2005",
    "Runtime": "140 min",
    "Director": "Christopher Nolan",
    "imdbRating": "8.3"
  },
  {
    "Title": "Avatar",
    "Year": "2009",
    "Released": "18 Dec 2009",
    "Runtime": "162 min",
    "Director": "James Cameron",
    "imdbRating": "7.9"
  }
]
                 
let rating = watchList.map(item =>{
  return {title:item.Title,rating:item.imdbRating};
});

console.log(rating);  
//打印：[{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}].

看到它的优点了吗？相信你会喜欢上它的，你不妨可以思考下如果使用for循环来实现会有多麻烦。

filter() 从数组中过滤数据

需求：结合filter和map返回一个只包含title和rating属性对象的新数组，并且imdbRating值大于或等于 8.0。

//还是使用上面watchList的数据
var filteredList = watchList.map(item =>{
  return {title:item.Title,rating:item.imdbRating};
}).filter(item => {
  return Number(item.rating) >= 8.0;
});
 
console.log(filteredList); 
//打印：[{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"}].

filter()轻而易举的过滤出了我们想要的数据！

reduce() 从数组中计算数据

需求：使用reduce方法，从watchList中找出Christopher Nolan导演的电影，并计算它们评分(imdbRating)的平均值。

//代码实现
var averageRating = watchList.filter(item =>{
  return item.Director  == "Christopher Nolan";
}).map(item => {
  return Number(item.imdbRating);
}).reduce((total, currentValue) => {
  return total + currentValue;
}) / watchList.filter(item => {
  return item.Director  == "Christopher Nolan";
}).length;

console.log(averageRating); 
//打印：8.675

你看到它们的其中强大之处了吗？简单几句代码就实现了复杂需求，三者结合更是威力无穷，赶紧在你的项目里使用它们吧。