JavaScript30-04 數(shù)組基本操作指南

CastlePeaK 發(fā)布于2019-08-22 18:11 / 3194人閱讀

摘要：作者未枝丫簡介是推出的一個天挑戰(zhàn)。現(xiàn)在你看到的是這系列指南的第篇。文檔給出了一個初始操作的數(shù)組，基于這個數(shù)組可以練習(xí)一下的各個方法，請打開后在面板中查看輸出結(jié)果。過濾操作，有點像里面的語句。篩出運行結(jié)果是的組成數(shù)組返回。

作者：?未枝丫  
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 4 篇。完整指南在 GitHub，喜歡請 Star 哦?(^?^*)

實現(xiàn)效果

這一部分主要是熟悉 Array 的幾個基本方法，其中有兩個（filter、map）是 ES5 定義的迭代方法，這些迭代方法都有一個特點，就是對數(shù)組的每一項都運行給定函數(shù)，根據(jù)使用的迭代方法的不同，有不同的返回結(jié)果。

文檔給出了一個初始操作的 inventor 數(shù)組，基于這個數(shù)組可以練習(xí)一下 Array 的各個方法，請打開 HTML 后在 Console 面板中查看輸出結(jié)果。

炫酷的調(diào)試技巧

在 Console 中我們常用到的可能是 console.log() ，但它還有一個很炫的輸出，按照表格來輸出，效果如下：

console.table(thing)

過程指南

篩選 16 世紀(jì)出生的發(fā)明家

展示他們的姓和名

把他們按照年齡從大到小進(jìn)行排序

計算所有的發(fā)明家加起來一共活了多少歲

按照他們活了多久來進(jìn)行排序

篩選出一個網(wǎng)頁里含有某個詞語的標(biāo)題

按照姓氏來對發(fā)明家進(jìn)行排序

統(tǒng)計給出數(shù)組中各個物品的數(shù)量

相關(guān)知識

下面從簡單的方法開始，后面有很多有意思的玩法。

filter

過濾操作，有點像 SQL 里面的 select 語句。篩出運行結(jié)果是 true 的組成數(shù)組返回。

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

前面幾篇已經(jīng)提到過箭頭函數(shù)，這里可以簡化一下，用箭頭函數(shù)來寫，而且由于 if 語句的存在并不是必要的，可以寫成下面這樣：

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

map

map 形象的理解就是，把數(shù)組中的每個元素進(jìn)行處理后，返回一個新的數(shù)組。

例子如下：

// 展示數(shù)組對象  inventors 里發(fā)明家的姓名  
const fullNames = inventors.map(inventor => inventor.first + " " + inventor.last);

sort

默認(rèn)情況下，Array.prototype.sort() 會將數(shù)組以字符串的形式進(jìn)行升序排列（10 會排在 2 之前），但 sort 也可以接受一個函數(shù)作為參數(shù)。所以需要對數(shù)字大小排序時需要自己設(shè)定一個比較函數(shù)，例子如下：

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

filter 和 map 的結(jié)合使用

這兩個結(jié)合起來可以做一些有意思的事情，由于示范代碼中用的頁面是 Wikipedia，我重新找了個國內(nèi)的頁面，演示如下：

篩選出這一個頁面中包含 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"));

除此之外，你還可以去自己個人訂單的頁面看一下今年買過的書，需要做的就是研究一下標(biāo)簽的 class 值或者是其他能夠篩出來的標(biāo)識信息，然后構(gòu)造你自己的篩選語句。

需要提一點，由 querySelectorAll() 獲取到的是一個 NodeList ，它并非是 Array 類型的數(shù)據(jù)，所以并不具有 map 和 filter 這樣的方法，所以如果要進(jìn)行篩選操作則需要把它轉(zhuǎn)化成 Array 類型，使用下面示例之中的 Array.from() 來轉(zhuǎn)化。

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

這是一個歸并數(shù)組的方法，它接受一個函數(shù)作為參數(shù)（這個函數(shù)可以理解成累加器），它會遍歷數(shù)組的所有項，然后構(gòu)建一個最終的返回值，這個值就是這個累加器的第一個參數(shù)。例子如下：

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

而此處我們需要統(tǒng)計一個給定數(shù)組中各個項的值，恰好可以用到這個方法，在累加器之中，將統(tǒng)計信息存入一個新的對象，最后返回統(tǒng)計值。

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