这是我参与更文挑战的第6天，活动详情查看： 更文挑战
Array Cardio Day 1
一、效果展示
今天的这一部分内容主要是功能的一个介绍，主要是熟悉使用 Array 的几个基本方法。
这一部分内容也算不得什么挑战了，就当做是一个知识的回顾总结吧。在初始化文档里我们看到，原作者给出来了两个可供操作的 inventors 数组和 people 数组，那么我们基于给出的这两个数组做一个练习，看看 Array 的各个方法使用，我们的输出结果将会通过 Console 输出，可通过 F12 之后在 Console 面板进行查看。
我们依旧对照一下原作者的初始化文档结果和最终结果。
1.index-START.html
2.index-FINISHED.html
从上面的图中可以看出，我们的所有输出结果都通过 Console 面板进行显示。
二、练习实现
在初始化代码里一共给出了 8 个练习 ，分别是：
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
// Array.prototype.map()
// 2. Give us an array of the inventors first and last names
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
// Array.prototype.reduce()
// 4. How many years did all the inventors live all together?
// 5. Sort the inventors by years lived
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
// 7. sort Exercise
// Sort the people alphabetically by last name
// 8. Reduce Exercise
// Sum up the instances of each of these
在我们日常使用 Console，我们一般都用的是 console.log(),但是它还有另外一个非常炫酷的输出，就是按照表格来输出，比如我们输出一下 inventors 数组：
console.table(inventors);
一眼看上去，确实比我们之前的使用要高大上了许多，格调立马就上去了，看我们之前的使用：
那么进入今天的练习挑战！
1. filter
单面意思就是过滤，在这里其实就是一个筛选，筛选出结果是 true 的组成一个数组返回。
// 1. Filter the list of inventors for those who were born in the 1500's
// 过滤那些出生在16世纪的发明家名单
//传统写法
let ans = inventors.filter(function(inventor){
return inventor.year >= 1500 && inventor.year < 1600
})
console.table(ans)
//es6 写法
let ans = inventors.filter(inventor => (
inventor.year >= 1500 && inventor.year < 1600
));
console.table(ans)
筛选出了这样一组结果：
2. map
将数组中的每个元素进行处理后，返回新的数组。
//ive us an array of the inventors first and last names
//为我们提供一个所有发明家的名字和姓氏
let ansMap = inventors.map( inventor => (
inventor.first + ' ' + inventor.last
));
console.table(ansMap)
结果如下：
说到 map ，那么就要提到 forEach,我们用 forEach 来实现一下，
//forEach
let ansForEach = [];
inventors.forEach( inventor =>ansForEach.push(inventor.filter + ' ' + inventor.last));
console.table(ansForEach);
结果如下：
关于 map 和 forEach 异同点这里就不多做赘述了，网上的相关解析太多了，自行查阅。
3. sort
//Sort the inventors by birthdate, oldest to youngest
//把发明家按出生日期排序，从老到小
//这样说起来比较拗口，其实就是从小到大排序
let ansSort = inventors.sort( (a,b) => a.year - b.year)
console.table(ansSort)
结果如下：
4. reduce
归并数组的方法，它接受一个函数作为参数（理解成累加器），它会遍历数组的所有项，然后构建出一个返回值，这个值就是这个累加器的第一个参数。
//How many years did all the inventors live all together?
//计算所有的发明家加起来一共活了多少岁
//传统写法
let total = 0;
inventors.forEach((inventor)=> {
total += inventor.passed - inventor.year
})
console.log(total) //结果是 861
//reduce
let totalReduce = inventors.reduce((totalReduce,inventor) => {
return totalReduce + inventor.passed - inventor.year
},0)
console.log(totalReduce) //结果是861
//解析一下
//1 => total = 0, inventor = { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
//2 => total = 0 + (1955 - 1879), inventor = { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
//3 => total = 0 + (1955 - 1879) + (1727 - 1643),
// ....
5. Sort the inventors by years lived
//Sort the inventors by years lived
//把发明者按年龄分类
let ansLived = inventors.sort((a,b) => {
return (a.passed - a.year) - (b.passed - b.year)
})
console.table(ansLived)
结果展示：
但是我们这样出来的结果并不是很明显能够看出来是否正确，我们还得一个一个去计算，所以我们加一个属性更加直观的显示是否是按照要求排的数据。
inventors.forEach(inventor => {
inventor.years = inventor.passed - inventor.year
})
这样的话，看起来就非常直观了。
6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
//create a list of Boulevards in Paris that contain 'de' anywhere in the name
//创建一份巴黎的林荫大道列表，在名字中包含“de”
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
let arr = []
document.querySelectorAll('.mw-category-group li a').forEach((a) => {
arr.push( a.title)
})
let ans = arr.filter(title =>title.indexOf('de') !== -1)
就直接输入结果吧，因为是在这个页面上操作的
这里需要提一下，由 querySelectorAll() 获取到的是一个 NodeList ，它并非是 Array 类型的数据，所以并不具有 map 和 filter 这样的方法，你可以在惊醒筛选操作的时候将它转化为 Array 类型， 用 Array.from() 去做转化，我这里没有这么用。
