Day04 - Array Cardio 指南一
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
实现效果
这一部分主要是熟悉 Array 的几个基本方法,其中有两个(filter、map)是 ES6 定义的迭代方法,这些迭代方法都有一个特点,就是对数组的每一项都运行给定函数,根据使用的迭代方法的不同,有不同的返回结果。
文档给出了一个初始操作的 inventor
数组,基于这个数组可以练习一下Array
的各个方法,请用Google Chrome
浏览器打开 HTML
后在Console
面板中查看输出结果。
炫酷的调试技巧
在 Console 中我们常用到的可能是 console.log()
,但它还有一个很炫的输出,按照表格来输出,效果如下:
1 | console.table(thing) |
原始数据
本节中我们将围绕如下数据进行相关操作以便快速掌握数组的相关方法的使用。
1 | const inventors = [{ |
筛选 16 世纪出生的发明家
过滤操作,有点像 SQL 里面的 select 语句。筛出运行结果是 true 的组成数组返回。
1 | const __fifteen = inventors.filter(function(inventor) { |
展示他们的姓和名
map 形象的理解就是,把数组中的每个元素进行处理后,返回一个新的数组。
例子如下:
1 | // Array.prototype.map() |
把他们按照年龄从大到小进行排序
默认情况下,Array.prototype.sort()
会将数组以字符串的形式进行升序排列(10 会排在 2 之前),但 sort 也可以接受一个函数作为参数。所以需要对数字大小排序时需要自己设定一个比较函数,例子如下:
1 | // Array.prototype.sort() |
上面的代码可以简写成:
1 | const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); |
控制台效果图:
计算所有的发明家加起来一共活了多少岁
1 | // Array.prototype.reduce() |
按照他们活了多久来进行排序
1 | // 5. 按照他们活了多久来进行排序 |
map、filter
结合使用筛选出网页中含有CSS
标题的数据名称
1 | const category = document.querySelectorAll('.subject-list h2 a'); |
由 querySelectorAll()
获取到的是一个 NodeList
,它并非是 Array 类型的数据,所以并不具有 map 和 filter 这样的方法,所以如果要进行筛选操作则需要把它转化成 Array 类型,使用下面示例之中的 Array.from()
来转化。
Google Chrome浏览球操作如下:
- 打开
https://book.douban.com/tag/web
网页。 - 在控制台按如下图操作即可
按照姓氏来对发明家进行排序
1 | const alpha = people.sort((lastOne, nextOne) => { |
统计给出数组中各个物品的数量
这是一个归并数组的方法,它接受一个函数作为参数(这个函数可以理解成累加器),它会遍历数组的所有项,然后构建一个最终的返回值,这个值就是这个累加器的第一个参数。第二个参数中的0
是previousValue
的初始值,例子如下:
1 | [0,1,2,3,4].reduce((previousValue, currentValue, index, array) => { |
而此处我们需要统计一个给定数组中各个项的值,恰好可以用到这个方法,在累加器之中,将统计信息存入一个新的对象,最后返回统计值。
1 | const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', |