資訊專(zhuān)欄INFORMATION COLUMN
摘要：作者未枝丫簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)?，F(xiàn)在你看到的是這系列指南的第篇。文檔給出了一個(gè)初始操作的數(shù)組，基于這個(gè)數(shù)組可以練習(xí)一下的各個(gè)方法，請(qǐng)打開(kāi)后在面板中查看輸出結(jié)果。過(guò)濾操作，有點(diǎn)像里面的語(yǔ)句。篩出運(yùn)行結(jié)果是的組成數(shù)組返回。
作者：?未枝丫實(shí)現(xiàn)效果
簡(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ù)，也不使用編譯器和引用?，F(xiàn)在你看到的是這系列指南的第 4 篇。完整指南在 GitHub，喜歡請(qǐng) Star 哦?(^?^*)
這一部分主要是熟悉 Array 的幾個(gè)基本方法，其中有兩個(gè)（filter、map）是 ES5 定義的迭代方法，這些迭代方法都有一個(gè)特點(diǎn)，就是對(duì)數(shù)組的每一項(xiàng)都運(yùn)行給定函數(shù)，根據(jù)使用的迭代方法的不同，有不同的返回結(jié)果。
文檔給出了一個(gè)初始操作的 inventor 數(shù)組，基于這個(gè)數(shù)組可以練習(xí)一下 Array 的各個(gè)方法，請(qǐng)打開(kāi) HTML 后在 Console 面板中查看輸出結(jié)果。
炫酷的調(diào)試技巧在 Console 中我們常用到的可能是 console.log() ，但它還有一個(gè)很炫的輸出，按照表格來(lái)輸出，效果如下：
console.table(thing)過(guò)程指南
篩選 16 世紀(jì)出生的發(fā)明家
展示他們的姓和名
把他們按照年齡從大到小進(jìn)行排序
計(jì)算所有的發(fā)明家加起來(lái)一共活了多少歲
按照他們活了多久來(lái)進(jìn)行排序
篩選出一個(gè)網(wǎng)頁(yè)里含有某個(gè)詞語(yǔ)的標(biāo)題
按照姓氏來(lái)對(duì)發(fā)明家進(jìn)行排序
統(tǒng)計(jì)給出數(shù)組中各個(gè)物品的數(shù)量
相關(guān)知識(shí)下面從簡(jiǎn)單的方法開(kāi)始，后面有很多有意思的玩法。
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);map
map 形象的理解就是，把數(shù)組中的每個(gè)元素進(jìn)行處理后，返回一個(gè)新的數(shù)組。
例子如下：
// 展示數(shù)組對(duì)象 inventors 里發(fā)明家的姓名 const fullNames = inventors.map(inventor => inventor.first + " " + inventor.last);sort
默認(rèn)情況下，Array.prototype.sort() 會(huì)將數(shù)組以字符串的形式進(jìn)行升序排列（10 會(huì)排在 2 之前），但 sort 也可以接受一個(gè)函數(shù)作為參數(shù)。所以需要對(duì)數(shù)字大小排序時(shí)需要自己設(shè)定一個(gè)比較函數(shù)，例子如下：
const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1); console.table(__ordered);filter 和 map 的結(jié)合使用
這兩個(gè)結(jié)合起來(lái)可以做一些有意思的事情，由于示范代碼中用的頁(yè)面是 Wikipedia，我重新找了個(gè)國(guó)內(nèi)的頁(yè)面，演示如下：
篩選出這一個(gè)頁(yè)面中包含 CSS 的書(shū)名。代碼如下：
// 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"));
除此之外，你還可以去自己個(gè)人訂單的頁(yè)面看一下今年買(mǎi)過(guò)的書(shū)，需要做的就是研究一下標(biāo)簽的 class 值或者是其他能夠篩出來(lái)的標(biāo)識(shí)信息，然后構(gòu)造你自己的篩選語(yǔ)句。
需要提一點(diǎn)，由 querySelectorAll() 獲取到的是一個(gè) NodeList ，它并非是 Array 類(lèi)型的數(shù)據(jù)，所以并不具有 map 和 filter 這樣的方法，所以如果要進(jìn)行篩選操作則需要把它轉(zhuǎn)化成 Array 類(lèi)型，使用下面示例之中的 Array.from() 來(lái)轉(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
這是一個(gè)歸并數(shù)組的方法，它接受一個(gè)函數(shù)作為參數(shù)（這個(gè)函數(shù)可以理解成累加器），它會(huì)遍歷數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終的返回值，這個(gè)值就是這個(gè)累加器的第一個(gè)參數(shù)。例子如下：
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
而此處我們需要統(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" ];
const reduce = data.reduce( (obj, item) => {
if( !obj[item] ) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
console.log(reduce);
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95588.html
摘要：學(xué)習(xí)目標(biāo)掌握編程的基本思維掌握編程的基本語(yǔ)法我們先來(lái)學(xué)習(xí)基礎(chǔ)，后續(xù)會(huì)講解高級(jí)。語(yǔ)句基本語(yǔ)法當(dāng)循環(huán)條件為時(shí)，執(zhí)行循環(huán)體，當(dāng)循環(huán)條件為時(shí)，結(jié)束循環(huán)?；A(chǔ)語(yǔ)法循環(huán)體循環(huán)條件代碼示例初始化變量循環(huán)體自增循環(huán)條件語(yǔ)句和一般用來(lái)解決無(wú)法確認(rèn)次數(shù)的循環(huán)。 學(xué)習(xí)目標(biāo): 掌握編程的基本思維 掌握編程的基本語(yǔ)法 我們先來(lái)學(xué)習(xí)JavaScript基礎(chǔ)，后續(xù)會(huì)講解JavaScript高級(jí)。 重點(diǎn)內(nèi)容 變...
摘要：學(xué)習(xí)目標(biāo)掌握編程的基本思維掌握編程的基本語(yǔ)法我們先來(lái)學(xué)習(xí)基礎(chǔ)，后續(xù)會(huì)講解高級(jí)。語(yǔ)句基本語(yǔ)法當(dāng)循環(huán)條件為時(shí)，執(zhí)行循環(huán)體，當(dāng)循環(huán)條件為時(shí)，結(jié)束循環(huán)?；A(chǔ)語(yǔ)法循環(huán)體循環(huán)條件代碼示例初始化變量循環(huán)體自增循環(huán)條件語(yǔ)句和一般用來(lái)解決無(wú)法確認(rèn)次數(shù)的循環(huán)。 學(xué)習(xí)目標(biāo): 掌握編程的基本思維 掌握編程的基本語(yǔ)法 我們先來(lái)學(xué)習(xí)JavaScript基礎(chǔ)，后續(xù)會(huì)講解JavaScript高級(jí)。 重點(diǎn)內(nèi)容 變...
摘要：學(xué)習(xí)目標(biāo)掌握編程的基本思維掌握編程的基本語(yǔ)法我們先來(lái)學(xué)習(xí)基礎(chǔ)，后續(xù)會(huì)講解高級(jí)。語(yǔ)句基本語(yǔ)法當(dāng)循環(huán)條件為時(shí)，執(zhí)行循環(huán)體，當(dāng)循環(huán)條件為時(shí)，結(jié)束循環(huán)?；A(chǔ)語(yǔ)法循環(huán)體循環(huán)條件代碼示例初始化變量循環(huán)體自增循環(huán)條件語(yǔ)句和一般用來(lái)解決無(wú)法確認(rèn)次數(shù)的循環(huán)。 學(xué)習(xí)目標(biāo): 掌握編程的基本思維 掌握編程的基本語(yǔ)法 我們先來(lái)學(xué)習(xí)JavaScript基礎(chǔ)，后續(xù)會(huì)講解JavaScript高級(jí)。 重點(diǎn)內(nèi)容 變...
摘要：學(xué)習(xí)目標(biāo)掌握編程的基本思維掌握編程的基本語(yǔ)法我們先來(lái)學(xué)習(xí)基礎(chǔ)，后續(xù)會(huì)講解高級(jí)。語(yǔ)句基本語(yǔ)法當(dāng)循環(huán)條件為時(shí)，執(zhí)行循環(huán)體，當(dāng)循環(huán)條件為時(shí)，結(jié)束循環(huán)?；A(chǔ)語(yǔ)法循環(huán)體循環(huán)條件代碼示例初始化變量循環(huán)體自增循環(huán)條件語(yǔ)句和一般用來(lái)解決無(wú)法確認(rèn)次數(shù)的循環(huán)。 學(xué)習(xí)目標(biāo): 掌握編程的基本思維 掌握編程的基本語(yǔ)法 我們先來(lái)學(xué)習(xí)JavaScript基礎(chǔ)，后續(xù)會(huì)講解JavaScript高級(jí)。 重點(diǎn)內(nèi)容 變...
閱讀 1591·2021-11-24 11:16
閱讀 2859·2021-07-28 12:32
閱讀 2393·2019-08-30 11:22
閱讀 1499·2019-08-30 11:01
閱讀 676·2019-08-29 16:24
閱讀 3622·2019-08-29 12:52
閱讀 1694·2019-08-29 12:15
閱讀 1396·2019-08-29 11:18
