JS面试手写：页面标签

问题：

1. 当前页面总共有多少个标签
2. 当前页面总共有多少种标签
3. 每种标签各多少个
4. 数目最多的前三个标签是什么

// 1. 统计当前页面总共有多少个标签
let sumOfTagss = document.querySelectorAll('*').length

// 2. 统计当前页面总共有多少种标签
let kindsOfTags = new Set([...document.querySelectorAll('*')].map(node => node.nodeName)).size

// 3. 每种标签各多少个
let mapFortags = Object.entries([...document.querySelectorAll("*")].map(n=>n.tagName).reduce((pre, cur)=>{ pre[cur] = (pre[cur] || 0) + 1; return pre; }, {}))

// 4. 数目最多的前三个标签是什么
let top3Tags = mapFortags.sort().sort((a, b) => b[1] - a[1]).slice(0, 3)

API参考

1.document.querySelector() 和 document.querySelectorAll()

querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。

querySelectorAll()返回与指定的选择器组匹配的文档中的元素列表(使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList。(注：NodeList不是数组，而是一个类数组)

2.Object.entries()

entries方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。