ES6 -- Set，reduce特性計算html中的標籤類型數以及各標籤的數量

let tags = document.querySelectorAll('*')
let tagNames = Array.from(tags).map(tag => tag.tagName)

// tag的類型數
console.log(new Set(tagNames).size)

// 每個tag類型各有多少個
let res = tagNames.reduce((holder, cur) => {
  holder[cur] = holder[cur] ? ++ holder[cur] : 1
  return holder
}, {})
console.log(res, Object.keys(res).length)

codePen地址

 

Set是一組key的集合，由於key不能重複，所以，在Set中，沒有重複的key。

輸入一個數組來創建Set將會返回一個對這個數組進行去重後的Set對象。

 

reduce語法

 

arr.reduce(callback,[initialValue])

reduce 爲數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（或者上一次回調函數的返回值），當前元素值，當前索引，調用 reduce 的數組。

callback （執行數組中每個值的函數，包含四個參數）

    1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
    2、currentValue （數組中當前被處理的元素）
    3、index （當前元素在數組中的索引）
    4、array （調用 reduce 的數組）

initialValue （作爲第一次調用 callback 的第一個參數。）

作者：_小坦克_
鏈接：https://www.jianshu.com/p/e375ba1cfc47
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。