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);