Abo

Js中for in 和for of的区别

fade

前言

  1. 推荐在循环对象属性的时候,使用 for...in ,在遍历数组的时候的时候使用 for...of
  2. for...in 循环出的是 keyfor...of循环出的是 value
  3. 注意,for...of 是ES6新引入的特性。修复了ES5引入的 for...in 的不足
  4. for...of 不能循环普通的对象,需要通过和 Object.keys() 搭配使用

假设我们要遍历一个数组的value let aArray = ['a',123,{a:'1',b:'2'}]

使用for...in循环:

1
2
3
for(let index in aArray){
console.log(`${aArray[index]}`);
}

使用for...of循环:

1
2
3
for(var value of aArray){
console.log(value);
}

咋一看好像好像只是写法不一样而已,那为什么说for...of修复了for...in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = 'demo',再分别查看上面写的两个循环:

1
2
3
4
5
6
for(let index in aArray){
console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
console.log(value);
}

所以说,作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

1
for...of`循环不会循环对象的key,只会循环出数组的value,因此`for...of`不能循环遍历**普通对象**,对普通对象的属性遍历推荐使用`for...in

如果实在想用for...of来遍历普通对象的属性的话,可以通过和Object.keys()搭配使用,先获取对象的所有key的数组
然后遍历:

1
2
3
4
5
6
7
8
9
10
11
12
13
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}

使用for…of方法迭代Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
// 将会显示两个log。一个是"0 = zero"另一个是"1 = one"

for (var key of myMap.keys()) {
console.log(key);
}
// 将会显示两个log。 一个是 "0" 另一个是 "1"

for (var value of myMap.values()) {
console.log(value);
}
// 将会显示两个log。 一个是 "zero" 另一个是 "one"

for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
// 将会显示两个log。 一个是 "0 = zero" 另一个是 "1 = one"