作为前端，你在面试的时候可能会遇到这样一道面试题，随便打开一个网页，让你在控制台统计出当前页面使用最多的标签和数量？

下面我们来一步步进行，go:

1、获取页面所有标签(类数组)

const nodeList = document.getElementsByTagName('*');

image.png

2、获取标签名数组（标签名组成的数组）

const tagNameList = ([...document.getElementsByTagName('*')]).map(v=>v.tagName);

image.png

3、标签种类统计

const tagNameNums = new Set([...([...document.getElementsByTagName('*')])
.map(v=>v.tagName)]);
const len = tagNameNums.size;

image.png

4、reduce统计标签出现的次数

const reduceResult = ([...document.getElementsByTagName('*')])
.map(v=>v.tagName)
.reduce((obj,item)=>{
    obj[item] = obj[item] ? obj[item] + 1 : 1;
    return obj;
},{});

image.png

5、获取entris数组

const reduceResultEntries = Object.entries(reduceResult);

image.png

6、entris数组排序

const sortReduceList = Object.entries(reduceResult).sort((a,b)=>b[1]-a[1]);

image.png

7、输出前三名

console.table(sortReduceList.slice(0,3))

image.png

搞定！！！