一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
本题类型：综合题
本题难度：⭐ ⭐
本题考察了：
- DOM API 的使用熟练度
- 伪数组转数组
- 数组去重
如果看了题目没什么思路的可以参考上面的知识点再想想怎么解。
答：
new Set([...document.getElementsByTagName('*')].map(v => v.tagName)).size
把这段代码扔到掘金首页测试一下：
看了答案，发现确实也不过如此，但是如果突然丢给你这么一个问题，还真不一定能立马写出来。
加大难度：
随便打开一个网页，统计页面中出现最多的三种标签及出现次数。
本题在上一题的基础上，又考察了：
- 计算数组中每个元素出现的次数
- 根据数组某一项进行排序
- Object.entries
答：
const arr = [...document.getElementsByTagName("*")].map(tag=>tag.tagName)
const obj = arr.reduce((pre, i)=>{
pre[i] = (pre[i] || 0) + 1;
return pre;
}, {})
const res = Object.entries(obj).sort((a, b)=>(b[1] - a[1])).slice(0, 3)
console.table(res)
当然，上面的写法使用了 Object.entries 这个 API，如果不使用 Object.entries，换一种写法也是 ok 的，比如像下面这样，用一个新的对象来统计出使用最多的三种标签数量：
const arr = [...document.getElementsByTagName("*")].map(tag=>tag.tagName)
const obj = arr.reduce((pre, i)=>{
pre[i] = (pre[i] || 0) + 1;
return pre;
}, {})
const countArr = Object.keys(obj).sort((a,b) => obj[b] - obj[a])
const res = {}
countArr.slice(0,3).forEach(v => {
res[v] = obj[v]
})
console.log(res)
结尾
这种题目其实一点也不难，就是看平时业务代码写得熟不熟练，如果平时写东西都是写一步查一个 API，那可能就会被考到。
阿林水平有限，文中如果有错误或表达不当的地方，非常欢迎在评论区指出，感谢～
如果我的文章对你有帮助，你的👍就是对我的最大支持^_^
你也可以关注《前端每日一问》这个专栏，防止失联哦～
我是阿林，输出洞见技术，再会！
上一篇：
下一篇：
