本文轉(zhuǎn)載自微信公眾號「Piper蛋窩」，作者Piper蛋。轉(zhuǎn)載本文請聯(lián)系Piper蛋窩公眾號。

成都創(chuàng)新互聯(lián)公司專注于紅旗企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城開發(fā)。紅旗網(wǎng)站建設(shè)公司,為紅旗等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

我是一名自學(xué)敲代碼的管理學(xué)研究生，喜歡 js/ts 但是菜得不行，平常挺關(guān)注國內(nèi)的前端圈。

除了讀雪碧大佬[1]等等大佬的知乎外(蒟蒻還看不太懂)，平常也看看大圣老師[2]等等的B站。

有一次看大圣老師直播點評簡歷，他提到：“如果我來面試你，我就把我面前的筆記本給你，隨便給你打開個網(wǎng)頁比如淘寶，你給我用瀏覽器現(xiàn)場統(tǒng)計一下各個標(biāo)簽出現(xiàn)的次數(shù)?！?/p>

!這道題應(yīng)該不難?我分析無非就是考察了三點：

• 最最基礎(chǔ)的瀏覽器調(diào)試能力
• 算法能力
• 基礎(chǔ)的 JavaScript API 應(yīng)用

剛和爸媽打完球回來，那我就做做這道題。

首先咱捋一下思路：

• 其實早在聽到這個題目時，我腦子中就蹦出兩個字：『遞歸』!
• 畢竟，我們的網(wǎng)頁就是一棵 DOM 樹，從根部有子節(jié)點，子節(jié)點還有子節(jié)點，對于每個節(jié)點，我們能夠知道這個節(jié)點是什么標(biāo)簽并且對其子節(jié)點做同樣的事就可以了

然后我們捋一下需要哪些技術(shù)細(xì)節(jié)：

• 首先我們應(yīng)該獲取根節(jié)點，這個好說，我們在瀏覽器的控制臺里試一試就知道：document.children[0]
• 然后我們應(yīng)該能夠獲取每個標(biāo)簽對象的字符串名字和子節(jié)點列表，分別是 tagName 和 children
• 至于如何實現(xiàn)「遞歸」呢?這里未必要用到遞歸，我用的是寬度優(yōu)先搜索 BFS ，簡單一個隊列就能實現(xiàn)

值得一提的是，我近一個月里寫了基于 C++ 、Python 、 JavaScript/TypeScript 、 Scala/Java 的不同項目/小腳本(工作要求...)，所以我也記不住 JavaScript 的 API ，我都是在瀏覽器控制臺里試出來的，比如 獲取標(biāo)簽的名字是 tagName 、 獲取子節(jié)點 Array 是 children 。如下圖，我試關(guān)鍵詞試出來的，要不然誰記得住啊。

輸入 tag 會不會得到我想要的 API 呢?果然!

下面動手來做吧

第零步，打開瀏覽器的 Sources ，新建一個 Snippet 。

Sources

首先我不知道 JavaScript 里有沒有現(xiàn)成的隊列數(shù)據(jù)結(jié)構(gòu)，應(yīng)該是沒有，那我就自己實現(xiàn)一個吧。

 
 
 
 

  
  
  
  
class Queue { 
  
  
  
  
    #array = [] 
  
  
  
  
    constructor () { 
  
  
  
  
        this.#array = [] 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    top () { 
  
  
  
  
        return this.#array[0] 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    size () { 
  
  
  
  
        return this.#array.length 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    pop () { 
  
  
  
  
        this.#array.shift() 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    push (ele) { 
  
  
  
  
        this.#array.push(ele) 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

很簡單的封裝!我平時做算法題都是用 C++ ，所以這里方法的名稱就都盡量接近 C++ 的 std::queue 。

接下來咱們寫 BFS 就行了!

我看現(xiàn)在大佬們都把每個邏輯封裝在函數(shù)里，所以咱也把腳本運行邏輯 main() 里，然后再在外面調(diào)用一下 main() ，看著整潔點。

 
 
 
 

  
  
  
  
const main = () => { 
  
  
  
  
 
  
  
  
  
    const dict = {} 
  
  
  
  
    const queue = new Queue() 
  
  
  
  
 
  
  
  
  
    const htmlTag = document.children[0] 
  
  
  
  
    dict[htmlTag.tagName] += 1  // !!! 
  
  
  
  
    queue.push(htmlTag) 
  
  
  
  
 
  
  
  
  
    while (queue.size() > 0) { 
  
  
  
  
        const t = queue.top() 
  
  
  
  
        queue.pop() 
  
  
  
  
 
  
  
  
  
        for (let i = 0; i < t.children.length; i ++) { 
  
  
  
  
            childTag = t.children[i] 
  
  
  
  
            dict[htmlTag.tagName] += 1  // !!! 
  
  
  
  
            queue.push(childTag) 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    for (let item in dict) { 
  
  
  
  
        console.log(item, ': ', dict[item]) 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
main() 
 
 
 
 

上面是最最簡單的 BFS 實現(xiàn)了，可見這道題著實不是用算法難為我們，很實在的一道題。

注意我標(biāo)注的 !!! 兩行，這里有一個問題：

• dict = {} 中，對于未聲明過的鍵值，如果直接調(diào)用運算，會報錯 dict[未聲明的鍵值] +=1 // 報錯!
• 而 js 又不是 Python ，沒有 setdefault 給我們用比如 dict.setdefault(鍵值, 0); dict[鍵值] += 1
• js 也不是 C++ ，直接默認(rèn)未出現(xiàn)過的鍵值的值為 0
• 因此我們需要再寫一個 dict[未聲明的鍵值] +=1 功能

咱們把這個邏輯寫成一個 Effect ，返回一個函數(shù)，以顯示咱很注重邏輯復(fù)用性(劃去)。

 
 
 
 

  
  
  
  
const addDictEffect =  (dict) => { 
  
  
  
  
    return (name) => { 
  
  
  
  
        if (dict[name]) { 
  
  
  
  
            dict[name] += 1 
  
  
  
  
        } else { 
  
  
  
  
            dict[name] = 1 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

OK 那下面在修改一下 main ，一共有三處!

 
 
 
 

  
  
  
  
const main = () => { 
  
  
  
  
 
  
  
  
  
    const dict = {} 
  
  
  
  
    const addDict = addDictEffect(dict)  // 第一處！ 
  
  
  
  
    const queue = new Queue() 
  
  
  
  
 
  
  
  
  
    const htmlTag = document.children[0] 
  
  
  
  
    addDict(htmlTag.tagName)  // 第二處！ 
  
  
  
  
    queue.push(htmlTag) 
  
  
  
  
 
  
  
  
  
    while (queue.size() > 0) { 
  
  
  
  
        const t = queue.top() 
  
  
  
  
        queue.pop() 
  
  
  
  
 
  
  
  
  
        for (let i = 0; i < t.children.length; i ++) { 
  
  
  
  
            childTag = t.children[i] 
  
  
  
  
            addDict(childTag.tagName)  // 第三處！ 
  
  
  
  
            queue.push(childTag) 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    for (let item in dict) { 
  
  
  
  
        console.log(item, ': ', dict[item]) 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
main() 
 
 
 
 

啪!很快啊，本題目解決。www.taobao.com 結(jié)果如下。

代碼

結(jié)果

其他網(wǎng)頁均可測試。

完整代碼

 
 
 
 

  
  
  
  
class Queue { 
  
  
  
  
    #array = [] 
  
  
  
  
    constructor () { 
  
  
  
  
        this.#array = [] 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    top () { 
  
  
  
  
        return this.#array[0] 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    size () { 
  
  
  
  
        return this.#array.length 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    pop () { 
  
  
  
  
        this.#array.shift() 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    push (ele) { 
  
  
  
  
        this.#array.push(ele) 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const addDictEffect =  (dict) => { 
  
  
  
  
    return (name) => { 
  
  
  
  
        if (dict[name]) { 
  
  
  
  
            dict[name] += 1 
  
  
  
  
        } else { 
  
  
  
  
            dict[name] = 1 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const main = () => { 
  
  
  
  
 
  
  
  
  
    const dict = {} 
  
  
  
  
    const addDict = addDictEffect(dict) 
  
  
  
  
    const queue = new Queue() 
  
  
  
  
 
  
  
  
  
    const htmlTag = document.children[0] 
  
  
  
  
    addDict(htmlTag.tagName) 
  
  
  
  
    queue.push(htmlTag) 
  
  
  
  
 
  
  
  
  
    while (queue.size() > 0) { 
  
  
  
  
        const t = queue.top() 
  
  
  
  
        queue.pop() 
  
  
  
  
 
  
  
  
  
        for (let i = 0; i < t.children.length; i ++) { 
  
  
  
  
            childTag = t.children[i] 
  
  
  
  
            addDict(childTag.tagName) 
  
  
  
  
            queue.push(childTag) 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    for (let item in dict) { 
  
  
  
  
        console.log(item, ': ', dict[item]) 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
main() 
 
 
 
 

目前不會js/ts+沒做過項目，菜到都沒法給大圣老師發(fā)簡歷讓他點評。期待早日能到發(fā)簡歷的地步。

網(wǎng)頁標(biāo)題：如果我去參加前端面試，我應(yīng)該能做出大圣老師的這道題...
文章來源：http://uogjgqi.cn/article/cojhsii.html