對象遍歷(對象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