数组的 map, filter ,sort和 reduce 用法

6,200 阅读3分钟

此处也是通过网上的一个题目例子来对数组的这几种用法进行分析整理的,可以在浏览器的控制台中打印结果进行对比。此处给出两组数组

  • 第一组(包含名、姓、出生日期以及死亡日期)
const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'wawa', last: 'fs', year: 1830, passed: 1905 },
    { first: 'grvd', last: 'xcvxcv', year:1900, passed: 1977 },
    { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
  • 第二组(people数组,包含一组人名,名姓之间用逗号分隔。)
['Albert, Einstein', 'wawa, fs', 'grvd, xcvxcv', 'Hanna, Hammarström']
根据这两组数组,完成以下的题目
  • 筛选出生于16世纪的发明家;
  • 以数组形式,列出其名与姓;
  • 根据其出生日期,并从大到小排序;
  • 计算所有的发明家加起来一共活了几岁;
  • 按照其年龄大小排序;

filter()(过滤操作,筛选符合条件的所有元素,若为true则返回组成新数组,以第一题为例:)

    function bornyear(inventor) {
      return inventor.year >= 1800 && inventor.year < 1900;
    }
    var fifteen = inventors.filter(bornyear);
    console.log(fifteen);
    // 可简化为
    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));

首先通过一个函数bornyear,在函数中进行条件的筛选,筛选出生日期在19世纪的发明家,返回的是true或者false。之后通过调用filter方法,将数组inventors里面的元素进行是否符合函数bornyear的筛选条件进行过滤。最后返回的是符合条件的一个结果数组如下。

[
{first: "Albert", last: "Einstein", year: 1879, passed: 1955},
{first: "wawa", last: "fs", year: 1830, passed: 1905},
{first: "Hanna", last: "Hammarström", year: 1829, passed: 1909}
]

map(映射操作,对原数组每个元素进行处理,并回传新的数组。以第二题为例)

 const fullnames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
 console.log(fullnames);

打印出来的结果为:

["Albert Einstein", "wawa fs", "grvd xcvxcv", "Hanna Hammarström"]
// inventors.map后面通过传入原操作数组,然后再进行字符串拼接的处理。最终返回的数组是一个经过处理之后的新数组

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

function compare(a, b) {
    if (a < b) {
    // 按某种排序标准进行比较, a 小于 b
      return -1;
    }
    if (a > b) {
      return 1;
    }
    // 当a === b 时候
      return 0;
}

要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列:

 function compareNumbers(a, b) {
    return a - b;
 }

针对第三题,我们就可以简单用加减比较

 const birthdate = inventors.sort((inventora, inventorb) => (inventorb.year - inventora.year));
console.log(birthdate)

打印出来的结果为:

[
{first: "grvd", last: "xcvxcv", year: 1900, passed: 1977},
{first: "Albert", last: "Einstein", year: 1879, passed: 1955},
{first: "wawa", last: "fs", year: 1830, passed: 1905},
{first: "Hanna", last: "Hammarström", year: 1829, passed: 1909}
]

reduce()(归并操作,总共两个参数,第一个是函数,可以理解为累加器,遍历数组累加回传的返回值,第二个是初始数值。如果没有提供初始值,则将使用数组中的第一个元素。以第四题为例:)

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

可以将数组进行便利,按照筛选条件找出所要累加的值。返回的是累加的结果