黑马程序员技术交流社区

标题: 【上海校区】数组的 map, filter ，sort和 reduce 用法 [打印本页]

---

作者: 不二晨    时间: 2018-7-31 09:43
标题: 【上海校区】数组的 map, filter ，sort和 reduce 用法
此处也是通过网上的一个题目例子来对数组的这几种用法进行分析整理的，可以在浏览器的控制台中打印结果进行对比。此处给出两组数组

• 第一组(包含名、姓、出生日期以及死亡日期)
  

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);复制代码

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

作者：林晖
链接：https://juejin.im/post/5b5cffd4e51d4519634fe888

---

作者: wuqiong    时间: 2018-7-31 10:27

---

作者: 不二晨    时间: 2018-7-31 11:53
奈斯，很赞

---

作者: 梦缠绕的时候    时间: 2018-7-31 11:55

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2