0
点赞
收藏
分享

微信扫一扫

for...in 和 for...of的区别

冶炼厂小练 2022-01-31 阅读 66

        今天是年前最后一天,然而还在公司上班,简单记录下for...in 和 for...of的区别;

首先是对数组的遍历:

//for...in
let arr = [1,2,3]
for(let item in arr) {
    console.log(item); // 索引
    // 0
    // 1
    // 2
}

//for...of
let arr = [1,2,3]
for(let key of arr) {
    console.log(key);
    // 1
    // 2
    // 3
}

总结: for…in 返回key(索引)值, for…of返回value

对对象的遍历:

// for...in
let obj1 = {
    name: 'kobe',
    height: 180
}

for(let key in obj) {
    console.log(key)
    //name
    //height
}

// for...of
let obj2 = {
    name: 'kobe',
    height: 180
}

for(let key of obj) {
    console.log(key)
    // 报错:obj2 is not iterable
}

总结二for…in 遍历对象,返回key值,for…of 遍历对象,会直接报错, 因为缺少Symbol.iterable

注意:假如某个对象设置了不可枚举(enumerable: false)属性,那么就不能被for...in 遍历。可迭代对象包括: Array,Map,Set,String,TypedArray,arguments等等。

3、添加原型上添加属性(for…in)或者手动添加属性

Array.prototype.key1 = function() {}
let a = [1,2,3]
a.foo = 'kobe'
for(let key in a) {
    console.log(key);
    //0
    //1
    //2
    //kobe
    //key1    key1是可以被枚举的,就会被打印出来
}

Array.prototype.key1 = function() {}
//设置key1为不可枚举
Object.defineProperty(Array.prototype, 'key1', {
    enumerable: false
})  
let a = [1,2,3]
for(let key in a) {
    console.log(key);
    //0
    //1
    //2
}

总结: for…in会遍历可枚举的属性(包括在原型链上)。for…of不会遍历原型链上。

举报

相关推荐

0 条评论