Day04 - Array Cardio 指南一

zhangyucha0 發(fā)布于2019-08-20 18:10 / 3305人閱讀

摘要：指南一作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。目的是幫助人們用純來(lái)寫(xiě)東西，不借助框架和庫(kù)，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第篇。完整指南在從零到壹全棧部落。篩出運(yùn)行結(jié)果是的組成數(shù)組返回。

Day04 - Array Cardio 指南一

作者：?liyuechun  
簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來(lái)寫(xiě)東西，不借助框架和庫(kù)，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 3 篇。完整指南在 從零到壹全棧部落。

實(shí)現(xiàn)效果

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

文檔給出了一個(gè)初始操作的 inventor 數(shù)組，基于這個(gè)數(shù)組可以練習(xí)一下Array的各個(gè)方法，請(qǐng)用Google Chrome瀏覽器打開(kāi) HTML 后在Console面板中查看輸出結(jié)果。

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

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

console.table(thing)

原始數(shù)據(jù)

本節(jié)中我們將圍繞如下數(shù)據(jù)進(jìn)行相關(guān)操作以便快速掌握數(shù)組的相關(guān)方法的使用。

    const inventors = [{
        first: "Albert",
        last: "Einstein",
        year: 1879,
        passed: 1955
      },
      {
        first: "Isaac",
        last: "Newton",
        year: 1643,
        passed: 1727
      },
      {
        first: "Galileo",
        last: "Galilei",
        year: 1564,
        passed: 1642
      },
      {
        first: "Marie",
        last: "Curie",
        year: 1867,
        passed: 1934
      },
      {
        first: "Johannes",
        last: "Kepler",
        year: 1571,
        passed: 1630
      },
      {
        first: "Nicolaus",
        last: "Copernicus",
        year: 1473,
        passed: 1543
      },
      {
        first: "Max",
        last: "Planck",
        year: 1858,
        passed: 1947
      },
      {
        first: "Katherine",
        last: "Blodgett",
        year: 1898,
        passed: 1979
      },
      {
        first: "Ada",
        last: "Lovelace",
        year: 1815,
        passed: 1852
      },
      {
        first: "Sarah E.",
        last: "Goode",
        year: 1855,
        passed: 1905
      },
      {
        first: "Lise",
        last: "Meitner",
        year: 1878,
        passed: 1968
      },
      {
        first: "Hanna",
        last: "Hammarstr?m",
        year: 1829,
        passed: 1909
      }
    ];

    const people = ["Beck, Glenn", "Becker, Carl", "Beckett, Samuel", "Beddoes, Mick", "Beecher, Henry",
      "Beethoven, Ludwig", "Begin, Menachem", "Belloc, Hilaire", "Bellow, Saul", "Benchley, Robert",
      "Benenson, Peter", "Ben-Gurion, David", "Benjamin, Walter", "Benn, Tony", "Bennington, Chester",
      "Benson, Leana", "Bent, Silas", "Bentsen, Lloyd", "Berger, Ric", "Bergman, Ingmar", "Berio, Luciano",
      "Berle, Milton", "Berlin, Irving", "Berne, Eric", "Bernhard, Sandra", "Berra, Yogi", "Berry, Halle",
      "Berry, Wendell", "Bethea, Erin", "Bevan, Aneurin", "Bevel, Ken", "Biden, Joseph", "Bierce, Ambrose",
      "Biko, Steve", "Billings, Josh", "Biondo, Frank", "Birrell, Augustine", "Black Elk", "Blair, Robert",
      "Blair, Tony", "Blake, William"
    ];
    
    const data = ["car", "car", "truck", "truck", "bike", "walk", "car", "van", "bike", "walk", "car", "van", "car",
      "truck", "pogostick"
    ];

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

filter

過(guò)濾操作，有點(diǎn)像 SQL 里面的 select 語(yǔ)句。篩出運(yùn)行結(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)提到過(guò)箭頭函數(shù)，這里可以簡(jiǎn)化一下，用箭頭函數(shù)來(lái)寫(xiě)，而且由于 if 語(yǔ)句的存在并不是必要的，可以寫(xiě)成下面這樣：

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

控制臺(tái)效果圖：

展示他們的姓和名

map

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

例子如下：

// Array.prototype.map()
// 2. 展示他們的姓和名
const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
console.log(fullNames);

控制臺(tái)效果圖：

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

sort

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

// Array.prototype.sort()
// 3. 把他們按照年齡從大到小進(jìn)行排序
const ordered = inventors.sort((a, b) => {
 if(a.year > b.year) {
   return 1;
 } else {
   return -1;
 }
});

console.table(ordered);

上面的代碼可以簡(jiǎn)寫(xiě)成：

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

控制臺(tái)效果圖：

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

reduce

// Array.prototype.reduce()
// 4. 計(jì)算所有的發(fā)明家加起來(lái)一共活了多少歲

const totalYears = inventors.reduce((total, inventor) => {
 return total + (inventor.passed - inventor.year);
}, 0);

console.log(totalYears);

控制臺(tái)效果圖：

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

// 5. 按照他們活了多久來(lái)進(jìn)行排序
const oldest = inventors.sort((a, b) => {
 const lastInventor = a.passed - a.year;
 const nextInventor = b.passed - b.year;
 return lastInventor > nextInventor ? -1 : 1;
});
console.table(oldest);

控制臺(tái)效果圖：

map、filter結(jié)合使用篩選出網(wǎng)頁(yè)中含有CSS標(biāo)題的數(shù)據(jù)名稱(chēng)

const category = document.querySelectorAll(".subject-list h2 a");
const links = Array.from(category);
const CSS_BOOK = links
           .map(link => link.textContent)
           .filter(streetName => streetName.includes("CSS"));

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

Google Chrome瀏覽球操作如下：

打開(kāi)https://book.douban.com/tag/web網(wǎng)頁(yè)。

在控制臺(tái)按如下圖操作即可

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

const alpha = people.sort((lastOne, nextOne) => {
 const [aLast, aFirst] = lastOne.split(", ");
 const [bLast, bFirst] = nextOne.split(", ");
 return aLast > bLast ? 1 : -1;
});
console.log(alpha);

控制臺(tái)效果圖：

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

reduce

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

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

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

const data = ["car", "car", "truck", "truck", "bike", "walk", "car", "van", "bike", "walk", "car", "van", "car",
      "truck", "pogostick"
    ];

const transportation = data.reduce( (obj, item) => {
 if (!obj[item]) {
   obj[item] = 0;
 }
 obj[item]++;
 return obj;
}, {});

console.log(transportation);

源碼下載

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽(yù)：IT界的邏輯思維
文化：輸出是最好的學(xué)習(xí)方式
官方公眾號(hào)：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書(shū)學(xué)習(xí)筆記