for...in和for...of

讲for...of之前应该先讲for...in。

for...in是我们一开始学数组对象遍历时最常用的方式,像下面这样

var arr=[1,3,5,7,9];
for(let i=0;i<arr.length;i++){
    console.log(i);//当前元素下标
    console.log(arr[i]);//当前元素
}

但是,这种写法略显麻烦,可以改成下面这种,略微简单

var arr=[1,3,5,7,9];
for(let i in arr){
    console.log(i);//当前元素下标
    console.log(arr[i]);//当前元素
}

但还是不太好用,因为for...in会将原型链上的属性方法都遍历出来,这样会导致很多麻烦,length啥的都不准,比如你在原型链上定义过一些属性或方法,使用for...in的话就会将这些方法一起遍历出来,

Array.prototype.sss=function(){
	console.log(1)
}
var arr=[1,3,5,7,9];
for(let i in arr){
	console.log(i,arr[i]);//当前元素下标、元素本身
}
			
Object.prototype.s=function(){
	console.log(2)
}
var obj={m:2,ss:66};
for(let i in obj){
	console.log(i,obj[i]);//当前元素下标、元素本身
}

如果不想那些属性啥的被遍历出来,可以使用hasOwnProperty()-----(这个用在对象上好点,因为这个是用来判断对象是否含有该属性的,而数组虽然也是对象,但每个元素的索引被视为对象的属性,所以如果用arr.hasOwnProperty(i)来对数组进行判断,实际上是行不通的),在对象上使用如下

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

(除非你本来就是想把这些额外的属性方法也一起遍历出来,毕竟有些时候我们就是不知道原型链上有啥属性方法),由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for ... in循环可以直接循环出Array的索引:

而for...of是iterable类型才能使用的(iterable包括array、set、map,但不包括object),作用类似于for...in,

在用于数组上时如下:

var arr=[1,3,5,7,9];
for(let item of arr){
    console.log(item);//当前元素
}

但是,for...of在用于数组遍历时是无法直接获取到当前下标的,如果想获取到当前下标志,可以通过如下方式

var arr=[1,3,5,7,9];
for(let [i,v] of arr.entries()){
    console.log(i);//当前元素下标
    console.log(v);//当前元素
}

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值