【ES6】for in与for of不同点

for in 和 for of常常被我搞混，今天来写篇文章来彻底搞清楚它们的原理。

我们知道，for in和for of 都是可以遍历数组的，除此之外，for in还可以遍历对象，那我们通过代码来看看它们有什么不同。

---

1.for in

let arr = [1,2,3,4,5]
我们用arr作为遍历的数组对象

for (let i in arr) {
  console.log(i);
  console.log(typeof i);
  console.log(arr[i]);  
}
输出：
0
string
1

1
string
2

2
string
3

3
string
4

4
string
5

可以看到，for in 循环遍历有这么几个特点：
1.遍历中的i是数组里的下标，这跟普通的for循环没区别
2.这里的i是string类型，在普通for循环中是nubmer类型

我们再对代码进行改造

Array.prototype.test = function(){
  console.log(123);
}
let arr = [1,2,3,4,5];
arr.name = "xiaoming";
for (let i in arr) {
  console.log(i);
  console.log(typeof i);
  console.log(arr[i]);  
}
输出
0
string
1

1
string
2

2
string
3

3
string
4

4
string
5

name
string
xiaoming

test
string
[Function]

这次我们在数组原型上加了一个方法，并手动加了一个属性，当我们再用for in遍历的时候，会将原型上的方法和属性都打印出来，当我们单纯想要数组里的值的时候，for in并不适合，那我们可以使用在ES6中新增加的for of来循环遍历

2.for of

let arr = [1,2,3,4,5]
我们还是用arr作为遍历的数组对象

Array.prototype.test = function(){
  console.log(123);
}
let arr = [1,2,3,4,5];
arr.name = "xiaoming";
for(let i of arr){
  console.log(i);
  console.log(typeof i);
}
输出
1
number

2
number

3
number

4
number

5
number

for of循环遍历数组的特点:
1.遍历中的i是数组的值，不是数组下标
2.这里的i是number类型，不用for in那样要转化类型
3.不会去遍历数组外增加的属性和原型上的方法

3.总结和补充

1.for in不适合遍历数组，适合遍历对象
2.for in除了有下标类型、原型属性问题外，遍历数组的时候可能不是按照数组内部的顺序遍历
3.for of可以遍历ES6中iterable类型的数据类型，Array、Map和Set都属于iterable类型