建站
咨詢
售后
建站咨詢
新聞中心
本文轉(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ù)。”
!這道題應(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ā)簡歷的地步。
新聞標(biāo)題：如果我去參加前端面試，我應(yīng)該能做出大圣老師的這道題...
網(wǎng)站地址：http://m.5511xx.com/article/cojhsii.html
