【根據問題解答分析】ES6 獲取頁面有多少種html標籤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>1</h1><h2>2</h2><h3>3</h3><h4>4</h4><h4>5</h4>
		<script type="text/javascript">
			var i = new Set([...document.querySelectorAll("*")].map(val=>val.nodeName)).size;
			console.log(i);
			//document.querySelectorAll("*")
			//NodeList(12) [html, head, meta, title, script, body, h1, h2, h3, h4, h4, script]
			
			//[document.querySelectorAll("*")]
			//[NodeList(12)]
			
			//[...document.querySelectorAll("*")]
			//[html, head, meta, title, script, body, h1, h2, h3, h4, h4, script]
			
			//[...document.querySelectorAll("*")].map(val=>val.nodeName)
			//(12) ["HTML", "HEAD", "META", "TITLE", "SCRIPT", "BODY", "H1", "H2", "H3", "H4", "H4", "SCRIPT"]
			
			//new Set([...document.querySelectorAll("*")].map(val=>val.nodeName))
			//Set(10) {"HTML", "HEAD", "META", "TITLE", "SCRIPT", …}
			
		</script>
	</body>
</html>

擴展運算符(...)可以將某些數據結構轉爲數組

map() 方法返回一個新數組,數組中的元素爲原始數組元素調用函數處理後的值

set 數組去重

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章