JavaScript30-04 數組基本操作指南

CastlePeaK 發布于2019-08-22 18:11 / 3198人閱讀

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

作者：?未枝丫  
簡介：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)

過程指南

篩選 16 世紀出生的發明家

展示他們的姓和名

把他們按照年齡從大到小進行排序

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

按照他們活了多久來進行排序

篩選出一個網頁里含有某個詞語的標題

按照姓氏來對發明家進行排序

統計給出數組中各個物品的數量

相關知識

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

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

云服務器 GPU云服務器基本操作教程 JavaScript基本對象 javascript基本類型 javascript基本語法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95588.html

前端基礎入門四（JavaScript基礎）

摘要：學習目標掌握編程的基本思維掌握編程的基本語法我們先來學習基礎，后續會講解高級。語句基本語法當循環條件為時，執行循環體，當循環條件為時，結束循環。基礎語法循環體循環條件代碼示例初始化變量循環體自增循環條件語句和一般用來解決無法確認次數的循環。學習目標: 掌握編程的基本思維掌握編程的基本語法我們先來學習JavaScript基礎，后續會講解JavaScript高級。重點內容變...

王軍 2019-08-30 15:55 評論0 收藏0
前端基礎入門四（JavaScript基礎）

摘要：學習目標掌握編程的基本思維掌握編程的基本語法我們先來學習基礎，后續會講解高級。語句基本語法當循環條件為時，執行循環體，當循環條件為時，結束循環。基礎語法循環體循環條件代碼示例初始化變量循環體自增循環條件語句和一般用來解決無法確認次數的循環。學習目標: 掌握編程的基本思維掌握編程的基本語法我們先來學習JavaScript基礎，后續會講解JavaScript高級。重點內容變...

SnaiLiu 2019-08-23 14:50 評論0 收藏0
前端基礎入門四（JavaScript基礎）

摘要：學習目標掌握編程的基本思維掌握編程的基本語法我們先來學習基礎，后續會講解高級。語句基本語法當循環條件為時，執行循環體，當循環條件為時，結束循環。基礎語法循環體循環條件代碼示例初始化變量循環體自增循環條件語句和一般用來解決無法確認次數的循環。學習目標: 掌握編程的基本思維掌握編程的基本語法我們先來學習JavaScript基礎，后續會講解JavaScript高級。重點內容變...

dantezhao 2019-08-02 14:07 評論0 收藏0
前端基礎入門四（JavaScript基礎）

摘要：學習目標掌握編程的基本思維掌握編程的基本語法我們先來學習基礎，后續會講解高級。語句基本語法當循環條件為時，執行循環體，當循環條件為時，結束循環。基礎語法循環體循環條件代碼示例初始化變量循環體自增循環條件語句和一般用來解決無法確認次數的循環。學習目標: 掌握編程的基本思維掌握編程的基本語法我們先來學習JavaScript基礎，后續會講解JavaScript高級。重點內容變...

voidking 2019-07-01 11:14 評論0 收藏0