物件遍歷（物件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);
})

列印結果

=> 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方法的封裝就結束了。

原文連結:https://blog.csdn.net/qq_44046765/article/details/114367698