你真的知道怎么统计一个页面使用了多少标签吗？

2024-06-11 21:52| 来源: 网络整理| 查看: 265

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

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

【本文地址】

公司简介

联系我们