Vue12_使用for...in和for...of在循环遍历时的区别

ParadoxLin

已于 2022-07-27 22:20:13 修改

阅读量2.1k

点赞数 2

分类专栏： Vue 文章标签： vue

于 2021-02-23 20:57:40 首次发布

本文链接：https://blog.youkuaiyun.com/linxwx/article/details/114002847

版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了JavaScript中的for...in和for...of两种遍历方式。for...in用于遍历数组的索引或对象的属性名，而for...of则用于遍历数组的元素值或字符串的字符。for...of不适用于遍历对象，但可以结合对象的属性进行遍历。此外，文章还提到了Vue中v-for指令的用法，并指出for...of是为了解决for...in的某些不足而引入的新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 使用for…in遍历数组 / 对象

var a=[1,2,3];
for(let i in a){
	console.log(i);//0 1 2
	console.log(a[i]);//1 2 3
}

遍历数组：结果是key，数组index
遍历对象：结果是key，对象的键
遍历字符串：结果是key，字符串的index（同数组）

2. 使用for…of遍历数组 / 对象

var a=[1,2,3];
for(let i of a){
	console.log(i);//1 2 3
}

遍历数组：结果是value，数组项值
遍历对象：报错，for…of不能遍历对象，其实错误的原因也很简单，对象没有迭代器，所以不能使用for of 遍历。

那么，怎么遍历对象中的属性值呢？

//依然使用 for...in + obj[i],注意，不是 obj.i
for(let i in obj){
	console.log(obj[i]);
}

遍历字符串：结果是value，字符串的值（同数组）

3. 总结

for…of是在for…in之后推出的新特性,弥补for…in中的一些不足.
JSON 数据的标的达方式是key:value
for…in遍历出的结果是key
for…of遍历出的结果是value

PS. `v-for(value,index)-in === v-for(value,index)-of`

<ul>
	<li v-for="value in object"></li>
</ul>

<ul>
	<li v-for="(value,index) in object"></li>
</ul>

<ul>
	<li v-for="(value,key,index) in object"></li>
</ul>