JAVA分用户统计标签点击量_你真的知道怎么统计一个页面使用了多少标签吗？...

其实感觉工作，需要的是什么？技术？责任心？还是良好的人际关系。

问大家一个问题： 如果你的项目今天要上线，产品的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 排版