for...in 和for...of的区别

zc自由飞~

已于 2022-03-10 14:50:40 修改

阅读量367

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

于 2022-03-10 10:14:49 首次发布

本文链接：https://blog.csdn.net/weixin_39808181/article/details/123393994

javascript 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了JavaScript中的for...of和for...in循环的区别，强调for...of用于遍历数组和迭代器对象的值，而for...in遍历对象的键。for...in会包含自定义属性，而for...of则不会。同时，文章展示了for...of在字符串、Map和Set等数据结构中的应用，并提供了使用Object.keys()和Object.values()处理对象的示例。

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

① for of 可以遍历数组里的每一项（for of 遍历数组的值）;一般不建议for in 遍历数组（for in 是遍历循环数组的索引（键值））

var arr = ['haha','heihei'];
for(var item of arr){
	console.log(item);
}
打印结果：'haha','heihei'
----------------------------------
var arr = ['haha','heihei'];
for(var item in arr){
	console.log(item);
}
打印结果：0,1
----------------------------------
var arr1 = [
	{name: 'one',age: 11},
	{name: 'two',age:22},
	{name: 'three',age: 33},
]
for(var item of arr1){
	console.log(item.name,item.age);
}
打印结果：
'one' 11
'two' 22
'three' 33

② for of 不适合遍历对象

var obj = {
	0: 'one',
	1: 'two'
}
for(var key in obj) {
	console.log(key,obj[key])
}
打印结果：
0 'one',
1 'two'
-------------------------------
for(var item of obj) {
	console.log(item)
}
打印结果：报错

如果想让对象可以使用for of循环，那就先使用Object.keys()获取对象的key值集合后，再使用for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
    console.log(o) // a,b,c,d
}

或者使用内置的Object.values()方法获取对象的value值再使用for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
    console.log(o) // 1,2,3,4
}

③ for in 会遍历自定义属性，for of不会；给数组添加一个自定义属性，然后赋值给数组，遍历，for in 会把自定义属性输出，for of 不会。

var arr = ['one', 'two', 'three'];
arr.name = 'andy';
for(var key in arr) {
	console.log(key+':'+arr[key]);
}
打印结果：
0:'one'
1:'two'
2:'three'
name:'andy'
--------------------------------
for(var item in arr) {
	console.log(item);
}
打印结果：
'one'
'two'
'three'

拓展：
for of 还可以循环一个字符串：

let str = 'love';
for(let o of str){
	console.log(o);
}
打印结果：
l,o,v,e

循环一个Map:

let iterable = new Map([['a',1],['b',2],['c',3]]);
for(let [key, value] of iterable){
	console.log(value)
}
打印结果：
1
2
3
---------------------------
for(let entity of iterable){
	console.log(entity)
}
打印结果：
[a,1]
[b,2]
[c,3]

循环一个set:

let iterable = new Set([1,1,2,2,3,3]);
for(let value of iterable){
	console.log(value)
}
打印结果：
1
2
3