for in , for of 和forEach三者对比

for in , for of 和forEach三者都是循环时经常使用的，但是每个使用场景都是有轻微不同，接下来就进行一个对比

1.1 for…in…的作用

1.1.1 可枚举对象

const person = {
  name: 'Lydia',
  age: 21,
};

for (const item in person) {
  console.log(item);
}

这个输出结果是： name age

对于这个结果可以简单理解为，对于对象object，使用for…in…循环是对对象的key值进行循环。

但是使用for…of…结果就不相同

const person = {
  name: 'Lydia',
  age: 21,
};

for (const item of person) {
    console.log(item);
  }

这个输出结果TypeError: person is not iterable

这个结果可以看出for…of…不能对对象进行循环

再看看forEach能怎么样？

const person = {
  name: 'Lydia',
  age: 21,
}

person.forEach((i) => {
  console.log(i)
})

这个输出结果TypeError: person.forEach is not a function

这个结果可以看出forEach不能对对象进行遍历

1.1.2 可枚举数组

 const arr = ['a','b','c']
 
  for (const item in arr) {
    console.log(item);
    console.log(arr[item]);
  }

这个输出结果为 0 ‘a’ 1 ‘b’ 2 ‘c’

这个结果看出使用for…in…是输出索引值，通过索引值能拿到数组数据

但是使用for…of…结果就不相同

 const arr = ['a','b','c']
 
 for (const item of arr) {
    console.log(item);
  }

这个输出结果为 ‘a’ ‘b’ ‘c’

这个结果看出使用for…of…是输出数组值

1.1.3 可枚举数组的原型对象

Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,3];
myArray.name='数组';

for(let index in myArray){
  console.log(index);
}

这个输出结果是： 0 1 2 name sayHello str

这个结果看出for in 不仅返回的是数组的下标，而且将数组的原型对象以及数组对象本身属性值都会返回。但是这也存在一个问题，在实际工作开发中，这些对象很可能是不需要的，全部列举出来可能会产生新的问题。

为了解决原型对象这个问题，可以使用hasOwnProperty

Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = [1,2,3];
myArray.name='数组';

for(let index in myArray){
  if(myArray.hasOwnProperty(index)) {
    console.log(index);
  }
}

这个输出的结果是 0 1 2 name

但是这个结果能看出来，虽然使用hasOwnProperty，但是数组本身的属性还是会输出

1.2 forEach的作用

1.2.1 可遍历数组

针对上面1.1.3中提及的问题，可以使用forEach进行处理

Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = ['a','b','c'];
myArray.name='数组';

myArray.forEach((value,i) => {
  console.log(value)
  console.log(i)
})

输出的结果是 ‘a’ 0 ‘b’ 1 ‘c’ 2

使用forEach可以输出索引值和数组值，而且不会输出数组的原型对象。

1.2.2 无法break

forEach有个问题就是不能中断执行

var arr = [3, 5, 7];

arr.forEach(function (value) {
  console.log(value);
  if (value === 5) {
    return false;
  }
});

输出的结果是 3 5 7

从结果可以看出，return false没有执行，他会一直运行到底

但是 for in 可以用break ：

var arr = [3, 5, 7];

for (let index in arr) {
  console.log(arr[index]);
  if (arr[index] == 5) {
    break;
  }
}

输出的结果是 3 5

从结果可以看出，for in 可以使用break

1.3 for…of…的作用

1.3.1可遍历数组

针对上面1.1.3中提及的问题，除了可用forEach，还可以使用for of进行处理

Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = ['a','b','c'];
myArray.name='数组';

for(let index of myArray) {
  console.log(index)
}

输出结果是 a b c

使用for of无法输出索引值，但也不会输出数组的原型对象。

1.3.2 可中断

针对上面1.2.2中提及的问题，for of可以使用break进行解决

var arr = [3, 5, 7];

for (let value of arr) {
  console.log(value);
  if (value == 5) {
    break;
  }
}

输出结果是 3 5

结果可以看出，break执行了，可以中断循环

1.3.3 可迭代字符串

let str = 'hello';

for (let value of str) {
  console.log(value);
}

输出结果是 ‘h’ ‘e’ ‘l’ ‘l’ ‘o’

1.3.4可迭代arguments类数组对象

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

输出结果是 1 2 3

1.3.5 可迭代map和set

let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let [key, value] of mapData) {
  console.log(value);
}

let setData = new Set([['a', 1], ['b', 2], ['c', 3]]);

for (let [key, value] of setData) {
  console.log(value);
}

输出结果都是 1 2 3

1.4 总结

for in 适用于纯对象的遍历，并且只能输出可枚举属性

forEach适用于需要知道索引值的数组遍历，但是不能中断

for of适用于无需知道索引值的数组遍历，因为可以中断。另外对于其他字符串，类数组，类型数组的迭代，for of也更适用