JavaScript 4/30: 数组的 map, filter 和 reduce 用法

JavaScript30 为Wes Bos推出的一项为期30天的挑战，旨在帮助人们用纯JavaScript来实现效果，初学者若想在JS方面快速精进，不妨一试。如今你看到的是该系列总结的第一篇，不知什么时候能作完30题，就不在此信誓旦旦立flag了。本题为第四题。

实现效果

本章节是为介绍JS Array的几个经常使用方法，包含filter()，map()，sort()，reduce()，并在 Console 面板中查看结果。其中文档已给出两组数组：

• 第一组：inventors数组，包含名、姓、出生日期以及死亡日期

const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
       ......
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];
复制代码

• 第二组：people数组，包含一组人名，名姓之间用逗号分隔。

const people = ['Beck, Glenn', ...... , 'Blake, William'];
复制代码

题目以下：

1. 筛选出生于16世纪的发明家；
2. 以数组形式，列出其名与姓；
3. 根据其出生日期，并从大到小排序；
4. 计算全部的发明家加起来一共活了几岁；
5. 按照其年龄大小排序；
6. 利用给出的网站（https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris），列出包含'de'字节的巴黎大道；
7. 按照姓氏排序；
8. 统计出数组中每一个种类的数量。

知识点

filter()

过滤操做，筛选符合条件的全部元素，若为true则返回组成新数组，以第一题为例：

function bornyear(inventor) {
      return inventor.year >= 1500 && inventor.year < 1600;
    }
    var fifteen = inventors.filter(bornyear);
    console.table(fifteen);
    // 可简化为
    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
复制代码

map()

映射操做，对原数组每一个元素进行处理，并回传新的数组。以第二题为例：

const fullnames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
    console.table(fullnames);
复制代码

sort()

排序操做，默认排序顺序是根据字符串Unicode码点，如10在2以前,而数字又在大写字母以前, 大写字母在小写字母以前。也可以使用比较函数，数组会按照调用该函数的返回值排序，格式以下：

function compare(a, b) {
      if (a < b) {
        // 按某种排序标准进行比较, a 小于 b
        return -1;
      }
      if (a > b) {
        return 1;
      }
      // a must be equal to b
      return 0;
    }
复制代码

要比较数字而非字符串，比较函数能够简单的以 a 减 b，以下的函数将会将数组升序排列：

function compareNumbers(a, b) {
      return a - b;
    }
复制代码

针对第三题，咱们就能够简单用加减比较：

const birthdate = inventors.sort((inventora, inventorb) => (inventorb.year - inventora.year));
    console.table(birthdate)
复制代码

而第七题，则须要按返回值比较：

const sortName = inventors.sort((a, b) => {
      return (a.last > b.last) ? 1 : -1;
    })
    console.table(sortName);
复制代码

reduce()

归并操做，总共两个参数，第一个是函数，能够理解为累加器，遍历数组累加回传的返回值，第二个是初始数值。若是没有提供初始值，则将使用数组中的第一个元素。以第四题为例：

const totalyears = inventors.reduce((total, inventor) => { return total + (inventor.passed - inventor.year); }, 0);
    console.log(totalyears);
复制代码

reduce()方法讲一样用于第八题：

const sumup = data.reduce(function (obj, item) {
      if (!obj[item]) {
        obj[item] = 0;
      }
      obj[item]++;
      return obj;
    }, {});

    console.log(sumup);
复制代码

值得注意的是，回调函数的第一个参数也能够为对象，存储每一类物品的数量。关于对象，如需深刻理解，可参考阮一峰的博客。

map()与filter()结合

参考第六题，题目要求在该网站筛选出含有'de'字节的巴黎大道；首选取得对应节点的元素，并转化为数组，再利用.includes()方法就能够获得。

const category = document.querySelector('.mw-category');
    const links = Array.from(category.querySelectorAll('a'));
    const de = links.map(link => link.textContent).filter(streetName => streetName.includes('de'));
    console.table(de)
复制代码

复制代码