其实感觉工作，需要的是什么？
技术？责任心？还是良好的人际关系。
问大家一个问题： 如果你的项目今天要上线，产品的P0项目，但是测试说没环境，让找产品。产品说我不管，你找测试。你该怎么办？请在评论区告诉在下
好了，闲话不说，问一个很简单很简单的问题？如果让你统计一个页面中有多少种标签，每种多少个，最多的是那几个？你该怎么办？
本文主要用到的方法：扩展运算符、new Set()、Array.reduce() 、Array.sort()、Object.entries() 、Array.slice()、Array.map()、Array.join()
正文开始
随便找一个链接：https://search.bilibili.com/all?keyword=vue%E6%BA%90%E7%A0%81
1、首先获取当前页面的所有标签
document.getElementsByTagName("*")
得到结果，这一步应该都是统一的。
2、得到当前页面一共有多少种标签。【不用循环遍历】
// 首先第一步得到的是一个伪数组，我们需要降其转为数组
[...document.getElementsByTagName("*")].map(item => item.tagName) //1430个标签
//然后 利用new Set() 的优势对数组去重
new Set([...document.getElementsByTagName("*")].map(item => item.tagName)) // 27种标签
//最后利用 new Set().size 得出数组的长度就是标签的种类的总数
new Set([...document.getElementsByTagName("*")].map(item => item.tagName)).size //27
3、如何获得每种标签有多少个呢？ 简单，Array.reduce() Array.sort()
//reduce，初始化给出一个空对象，对每种标签进行计数
[...document.getElementsByTagName("*")].map(item => item.tagName).reduce((prev, next) => {next in prev ? prev[next] +=1 : prev[next] = 1; return prev}, {})
//结果是有了，但是看着不太好，给个顺序排列吧。
Object.entries([...document.getElementsByTagName("*")].map(item => item.tagName).reduce((prev, next) => {next in prev ? prev[next] +=1 : prev[next] = 1; return prev}, {}))
Object.entries([...document.getElementsByTagName("*")].map(item => item.tagName).reduce((prev, next) => {next in prev ? prev[next] +=1 : prev[next] = 1; return prev}, {})).sort((a,b)=> b[1]-a[1])
4、好了，胜利近在眼前，获取前三的标签并得出有多少个！Object.entries() Array.slice() Array.map() Array.join()
//首先对上述得出的数组截取前三。
Object.entries([...document.getElementsByTagName("*")].map(item => item.tagName).reduce((prev, next) => {next in prev ? prev[next] +=1 : prev[next] = 1; return prev}, {})).sort((a,b)=> b[1]-a[1]).slice(0,3)
// 然后对前三的输出进行转化成我们想要的文案
Object.entries([...document.getElementsByTagName("*")].map(item => item.tagName).reduce((prev, next) => {next in prev ? prev[next] +=1 : prev[next] = 1; return prev}, {})).sort((a,b)=> b[1]-a[1]).slice(0,3).map(v => `${v[0]}:${v[1]}个`)
//最后将数组转为字符串
Object.entries([...document.getElementsByTagName("*")].map(item => item.tagName).reduce((prev, next) => {next in prev ? prev[next] +=1 : prev[next] = 1; return prev}, {})).sort((a,b)=> b[1]-a[1]).slice(0,3).map(v => `${v[0]}:${v[1]}个`).join(',')
本文使用 mdnice 排版
