for of

最新推荐文章于 2024-04-16 10:03:08 发布

转载最新推荐文章于 2024-04-16 10:03:08 发布 · 268 阅读

文章标签：

#for of

js 专栏收录该内容

137 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成HTML列表的方法，展示了如何利用for...of循环遍历数组对象，并将数据填充到HTML元素中。此外，还解释了for...of与for...in循环的区别。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="pList">
		<!-- <li>
			<a href="">名字1</a>
			<b>￥3456.00</b>
		</li> -->
	</ul>

	<script>
		var data=[
			{pname:"iPhone8",price:6666},
			{pname:"iPhone8plus",price:8888},
			{pname:"iPhoneX",price:9999}
		];
		var html="";
		for(var p of data){
			console.dir(p);
			html+=`<li>
					<a href="">${p.pname}</a>
					<b>￥${p.price}</b>
				</li>`;
		}
		document.getElementById("pList").innerHTML=html;
	</script>
</body>
</html>

for of是取键值对后面的value，for in是取下标。