对象遍历

对象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方法的封装就结束了。