关于for...in和for..of

本文对比了JavaScript中for...in、for...of及forEach()三种循环方式的特点与适用场景,阐述了它们在数组与对象上的表现差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

潜意识认为两个差不了多少的,今天忽然发现相差还挺多的。

(1)for…in…

let arr=["weiqiujuan","nihao",7,[12,14]];
arr.add = 10;//添加的属性;
function f(arr) {
    for (let item in arr) {
        console.log(item);
    }
}
f(arr);//0 1 2 3 add

我们发现此时的item代表的是arr数组中的index,新添加属性add,也直接返回它的属性,而不是值。


let arr=["weiqiujuan","nihao",7,[12,14]];
arr.add = 10;//添加的属性;
function f(arr) {
    for (let item in arr) {
        console.log(arr[item]);
    }
}
f(arr);//weiqiujuan nihao 7  [ 12, 14 ] 10

此时返回的就是数组的值。

(2) for…of

let arr=["weiqiujuan","nihao",7,[12,14]];
arr.add = 10;//添加的属性;
function f1(arr) {
    for (let item of arr) {
        console.log(item);
    }
}
f1(arr);//weiqiujuan  nihao  7 [ 12, 14 ]

运行结果表明,这里的item就是数组中的值,但是很明显add添加并没有生效,我们换用push直接添加值,是可以的。

总结:

1.for…in 循环的是对象中的属性或者数组中的下标(可以遍历出自定义的属性)。for…of循环的数组值,不能应用于普通对象的直接循环,配合Object.keys()使用。
2.我们在循环对象的时候,用for..in较好;在循环数组的时候用for..of;这样得到的结果个更清晰。

(3) forEach()

刚好提到了循环,感觉forEach 也是一个不错的选择。数组自带的方法吧,在应用的时候更为方便,但是效率的高低,谁知道呢

let arr=["weiqiujuan","nihao",7,[12,14]];
arr.push(10);//添加的属性;
arr.forEach(function (item) {
    console.log(item);
});//weiqiujuan  nihao 7 [12,14] 10

同学博客的时候,忽然注意到了,forEach变种,em…也就是说,这样可以扩大forEach()的使用范围(比如应用到HTMLCollection,NodeList等等。)

Array.prototype.forEach.call(arr,function(item){...});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值