Day04 - Array Cardio 指南一

時間 2020-06-10

標籤 day04 day array cardio 指南简体版

原文原文鏈接

Day04 - Array Cardio 指南一

做者：©liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。如今你看到的是這系列指南的第 3 篇。完整指南在從零到壹全棧部落。javascript

實現效果

這一部分主要是熟悉 Array 的幾個基本方法，其中有兩個（filter、map）是 ES6 定義的迭代方法，這些迭代方法都有一個特色，就是對數組的每一項都運行給定函數，根據使用的迭代方法的不一樣，有不一樣的返回結果。java

文檔給出了一個初始操做的 inventor 數組，基於這個數組能夠練習一下Array的各個方法，請用Google Chrome瀏覽器打開 HTML 後在Console面板中查看輸出結果。git

炫酷的調試技巧

在 Console 中咱們經常使用到的多是 console.log() ，但它還有一個很炫的輸出，按照表格來輸出，效果以下：github

console.table(thing)

原始數據

本節中咱們將圍繞以下數據進行相關操做以便快速掌握數組的相關方法的使用。web

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 世紀出生的發明家

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

控制檯效果圖：框架

展現他們的姓和名

mapide

map 形象的理解就是，把數組中的每一個元素進行處理後，返回一個新的數組。

例子以下：

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

控制檯效果圖：

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

sort

默認狀況下，Array.prototype.sort() 會將數組以字符串的形式進行升序排列（10 會排在 2 以前），但 sort 也能夠接受一個函數做爲參數。因此須要對數字大小排序時須要本身設定一個比較函數，例子以下：

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

console.table(ordered);

上面的代碼能夠簡寫成：

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

控制檯效果圖：

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

reduce

// Array.prototype.reduce()
// 4. 計算全部的發明家加起來一共活了多少歲
<!--0爲total的初始值-->
const totalYears = inventors.reduce((total, inventor) => {
 return total + (inventor.passed - inventor.year);
}, 0);

console.log(totalYears);

控制檯效果圖：

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

// 5. 按照他們活了多久來進行排序
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);

控制檯效果圖：

`map、filter`結合使用篩選出網頁中含有`CSS`標題的數據名稱

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() 獲取到的是一個 NodeList ，它並不是是 Array 類型的數據，因此並不具備 map 和 filter 這樣的方法，因此若是要進行篩選操做則須要把它轉化成 Array 類型，使用下面示例之中的 Array.from() 來轉化。

Google Chrome瀏覽球操做以下：

打開https://book.douban.com/tag/web網頁。
在控制檯按以下圖操做便可

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

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

控制檯效果圖：

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

reduce

這是一個歸併數組的方法，它接受一個函數做爲參數（這個函數能夠理解成累加器），它會遍歷數組的全部項，而後構建一個最終的返回值，這個值就是這個累加器的第一個參數。第二個參數中的0是previousValue的初始值，例子以下：

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

而此處咱們須要統計一個給定數組中各個項的值，剛好能夠用到這個方法，在累加器之中，將統計信息存入一個新的對象，最後返回統計值。

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