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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值