vue中for...in常使用于对“数组或者对象的属性”进行循环遍历

最新推荐文章于 2024-04-29 03:21:44 发布

原创最新推荐文章于 2024-04-29 03:21:44 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

前端专栏收录该内容

23 篇文章

订阅专栏

本文详细讲解了Vue中如何使用for...in遍历对象属性，并与数组索引循环进行对比，强调了在不同场景下的选择。同时介绍了常见的编程习惯和循环规范。

vue中for...in常使用于对“数组或者对象的属性”进行循环遍历
console.log(obj.length)无法计算对象的长度，显示undefined，因此采用for ... in
小习惯，使用for...in中的变量，习惯写成key或者k

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			// 遍历对象
			var obj = {
				name:'pink',
				age:18,
				sex:'男',
			}
			console.log(obj);
			
			// 遍历对象所有的属性(for ... in  常用于对“数组 或者对象的属性”进行循环遍历的 操作 )
			for(let k in obj){
				console.log(k) // 变量 输出属性名
				console.log(obj[k]); // 输出属性值
			}
			
			// 小习惯，使用for...in中的变量，习惯写成key或者k
			
			// 循环/遍历列表
			var arr = ["小花",'小明','小牧'];
			for(let i=0;i<arr.length;i++){
				console.log(arr[i]) // 数组对应的值
			}
			for(let i in arr){
				console.log(arr[i]) // 数组对应的值
			}			
		</script>
	</body>
</html>