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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。