对象遍历（对象forEach遍历）

àì夳堔傛蜴生んèń 2021-10-06 18:48 499阅读 0赞

### 对象遍历（对象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()

不出意外，报了如下的错误  
![在这里插入图片描述][20210304145913397.png]  
接下来让我们封装一下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方法的封装就结束了。

[20210304145913397.png]: /images/20211007/98bb838753b14c03b931bfa7f515b82d.png