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类型