对象遍历（对象forEach遍历）-蒲公英云

对象遍历（对象forEach遍历）

- 对象遍历
- - 对象fon in 遍历
  - 对象keys 遍历
  - 对象values 遍历
  - 对象getOwnPropertyNames遍历
  - 使用Reflect.ownKeys(obj)遍历
  - 封装Object.forEach方法遍历

对象遍历

对象fon in 遍历

尝试遍历(获取对象的键)

在JavaScript中，对象是不能使用传统的for循环进行遍历的，但是可以使用fon in来进行比遍历。

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
for(key in obj){ 
    console.log(key)
}

打印结果

以上代码执行打印的结果为

=> avatar
=> nickName
=> UID

获取对象的值

由此可以看出使用for in来进行对象的遍历，可以得到对象的属性，也就是key，那么我们要进行取值就可以这样做。

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
for(key in obj){ 
    console.log(obj[key])
}

代码执行后的结果为

=> https://a.jpg
=> 昵称
=> 5616259

对象keys 遍历

除了使用for in遍历对象，我们还可以使用Object提供的方法来进行对象的遍历。
在JavaScript中，Object提供了一个keys的方法。

获取对象自身的和继承的可枚举属性(不含Symbol属性）

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
var keys = Object.keys(obj)
console.log(keys)

返回结果

=>  ["avatar", "nickName", "UID"]

通俗来讲，就是使用对象的keys方法可以获取到对象可枚举的属性（key）数组。
那么根据这个数组我们可以获取到对象的值。

获取对象的值

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
var keys = Object.keys(obj)
keys.forEach(item=>{ 
    console.log(item + " : " + obj[item])
})

打印结果

=> avatar : https://a.jpg
=> nickName : 昵称
=> UID : 5616259

对象values 遍历

如果你只关注对象的值，而不关注对象的属性，那么可以尝试使用values方法来遍历对象。

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
Object.values(obj).forEach(value=>{ 
    console.log(value);
})

返回的值

=> https://a.jpg
=> 昵称
=> 5616259

对象getOwnPropertyNames遍历

Object.getOwnPropertyNames()方法返回一个数组,包含对象自身的所有属性(键)(不含Symbol属性,但是包括不可枚举属性)。

获取属性

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
Object.getOwnPropertyNames(obj).forEach(key=>{ 
    console.log(key);
})

打印结果

=> avatar
=> nickName
=> UID

使用Reflect.ownKeys(obj)遍历

Reflect.ownKeys(obj)返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举。

获取属性

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
Reflect.ownKeys(obj).forEach(key=>{ 
    console.log(key);
})

打印结果

=> avatar
=> nickName
=> UID

封装Object.forEach方法遍历

如果我们在开放中不想使用以上的那些方法，那么我们可以尝试一下自己封装forEach方法，将封装的方法挂在到Object原型链的构造函数中，我们就可以使用Object.forEach来进行对象的遍历。

未封装前使用Object.forEach()

不出意外，报了如下的错误
在这里插入图片描述
接下来让我们封装一下forEach吧！

封装forEach

// 将自定义的方法挂载到Object的构造函数中，函数接收一个对象一个回调方法
Object.prototype.constructor.forEach = function(obj,callback){ 
// 判断回调是否是一个函数
    if(typeof(callback) === 'function'){ 
        let i = 0;
        for(let key in obj){ 
            callback(obj[key],i,key);
            i ++;
        }
        return;
    }
    // 传入的回调如果不是function，那么就抛出错误
    throw new Error    (callback + ' is not a function!,You can use it like this: Object.forEach(obj,(item,index,key)=>{...}) ')
}

让我们来使用一下Object.forEach方法吧

var obj = { 
    avatar:'https://a.jpg',
    nickName:'昵称',
    UID:'5616259',
}
Object.forEach(obj,(item,index,key)=>{ 
    console.log(item, index, key);
})

返回结果

=> https://a.jpg 0 avatar
=> 昵称 1 nickName
=> 5616259 2 UID

我们可以看出，使用自己封装的forEach方法可以实现我们想要的结果，他能遍历出对象的值，下标（伪下标），属性。分别对应着回调方法中的item、index、key三个形参。

到此，我们的forEach方法的封装就结束了。

对象遍历（对象forEach遍历）