JavaScript30-04 数组基本操做指南

做者：© 未枝丫
简介： JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。如今你看到的是这系列指南的第 4 篇。完整指南在 GitHub，喜欢请 Star 哦♪(^∇^*)

实现效果

这一部分主要是熟悉 Array 的几个基本方法，其中有两个（filter、map）是 ES5 定义的迭代方法，这些迭代方法都有一个特色，就是对数组的每一项都运行给定函数，根据使用的迭代方法的不一样，有不一样的返回结果。

文档给出了一个初始操做的 inventor 数组，基于这个数组能够练习一下 Array 的各个方法，请打开 HTML 后在 Console 面板中查看输出结果。

炫酷的调试技巧

在 Console 中咱们经常使用到的多是 console.log() ，但它还有一个很炫的输出，按照表格来输出，效果以下：

console.table(thing)

过程指南

1. 筛选 16 世纪出生的发明家
2. 展现他们的姓和名
3. 把他们按照年龄从大到小进行排序
4. 计算全部的发明家加起来一共活了多少岁
5. 按照他们活了多久来进行排序
6. 筛选出一个网页里含有某个词语的标题
7. 按照姓氏来对发明家进行排序
8. 统计给出数组中各个物品的数量

相关知识

下面从简单的方法开始，后面有不少有意思的玩法。

filter

过滤操做，有点像 SQL 里面的 select 语句。筛出运行结果是 true 的组成数组返回。

const __fifteen = inventors.filter(function(inventor) {
  if (inventor.year >= 1500 && inventor.year < 1600 ) {
      return true;
  } else {
      return false;
  }
});
console.table(__fifteen);

前面几篇已经提到过箭头函数，这里能够简化一下，用箭头函数来写，并且因为 if 语句的存在并非必要的，能够写成下面这样：

const fifteen = inventors.filter(inventor =>(inventor.year >= 1500 && inventor.year < 1600));
console.table(fifteen);

map

map 形象的理解就是，把数组中的每一个元素进行处理后，返回一个新的数组。

例子以下：

// 展现数组对象  inventors 里发明家的姓名  
const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last);

sort

默认状况下，Array.prototype.sort() 会将数组以字符串的形式进行升序排列（10 会排在 2 以前），但 sort 也能够接受一个函数做为参数。因此须要对数字大小排序时须要本身设定一个比较函数，例子以下：

const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1);
console.table(__ordered);

filter 和 map 的结合使用

这两个结合起来能够作一些有意思的事情，因为示范代码中用的页面是 Wikipedia，我从新找了个国内的页面，演示以下：

筛选出这一个页面中包含 CSS 的书名。代码以下：

// https://book.douban.com/tag/web
  const cate = document.querySelectorAll('.subject-list h2 a');
  const book = links
            .map(link => link.title)
            .filter(title => title.includes('CSS'));

除此以外，你还能够去本身我的订单的页面看一下今年买过的书，须要作的就是研究一下标签的 class 值或者是其余可以筛出来的标识信息，而后构造你本身的筛选语句。

须要提一点，由 querySelectorAll() 获取到的是一个 NodeList ，它并不是是 Array 类型的数据，因此并不具备 map 和 filter 这样的方法，因此若是要进行筛选操做则须要把它转化成 Array 类型，使用下面示例之中的 Array.from() 来转化。

var links = Array.from(document.querySelectorAll('#ordersContainer div.order div.a-row > a.a-link-normal'))

var object = order.map( order => {
var a = {};
var time = order.querySelector('.order-info span.value').textContent.trim();
var title = order.querySelector('div.a-row > a.a-link-normal').textContent.trim();
a["time"] = time;
return a;
})

reduce

这是一个归并数组的方法，它接受一个函数做为参数（这个函数能够理解成累加器），它会遍历数组的全部项，而后构建一个最终的返回值，这个值就是这个累加器的第一个参数。例子以下：

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

而此处咱们须要统计一个给定数组中各个项的值，刚好能够用到这个方法，在累加器之中，将统计信息存入一个新的对象，最后返回统计值。

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
  const reduce = data.reduce( (obj, item) => {
      if( !obj[item]  ) {
          obj[item] = 0;
      }
          obj[item]++;
          return obj;
  }, {});
  console.log(reduce);