1 简介

对象是前端在编程中最常见的部分，很多情况下需要遍历该对象上的百题遍历属性，那么有几种方式可以帮助我们遍历该对象上的斩之中种属性呢?下面一起来了解九种方法。

下面测试方法所用的对象的方对象如下所示：

const parentObj = {     a: aaaaa,     b: Symbol(bbbbb),     c: ccccc }; const Obj = Object.create(parentObj, {     d: {         value: ddddd,         enumerable: true     },     e: {         value: eeeee,         enumerable: false     },     [Symbol(f)]: {         value: fffff,         enumerable: true     } }); 

Object.keys(obj)

Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的前端object上面可直接枚举的属性(不含Symbol属性)。这些属性的百题遍历顺序与手动遍历该对象属性时的一致。

console.log(Object.keys(),斩之中种 Object.keys(Obj)); // Object.keys() [ d ] 

Object.values(obj)

Object.values()返回一个数组，其元素是对象的方在对象上找到的可枚举属性值。属性的前端顺序与通过手动循环对象的属性值所给出的顺序相同。

console.log(Object.values(),百题遍历 Object.values(Obj)); // Object.values() [ ddddd ] 

Object.entries(obj)

Object.entries()返回一个数组，其元素是斩之中种与直接在object上找到的可枚举属性键值对相对应的数组。属性的亿华云对象的方顺序与通过手动循环对象的属性值所给出的顺序相同。

console.log(Object.entries(),前端 Object.entries(Obj)); // Object.entries() [ [ d, ddddd ] ] 

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

console.log(Object.getOwnPropertyNames(),百题遍历 Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ d, e ] 

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。

console.log(Object.getOwnPropertySymbols(),斩之中种 Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ] 

for……in

遍历所有可枚举的属性(包括原型上的)，然后可利用hasOwnProperty判断对象是否包含特定的自身(非继承)属性，其具有以下特点：

(1)index索引为字符串型数字，不能直接进行几何运算

(2)遍历顺序有可能不是按照实际数组的内部顺序

(3)会遍历数组的所有可枚举属性，包括原型

(4)for...in更适合便利对象，不要使用for...in遍历数组

for(let key in Obj) {     // for in: d     // for in: a     // for in: b     // for in: c     console.log(for in:, key); } 

for……of

必须部署了Iterator接口后才能使用。使用范围：数组、Set和Map结构、类数组对象(arguments、DOMNodeList对象……)、Generator对象以及字符串

for(let value of Object.values(Obj)) {     // for of: ddddd     console.log(for of:, value); } 

forEach

使用break不能中断循环使用

Object.values(Obj).forEach(value => {     // forEach: ddddd     console.log(forEach:, value); }); 

Reflect.ownKeys(obj)

返回一个数组，包含对象自身的免费源码下载所有属性，不管属性名是Symbol还是字符串，也不管是否可枚举。

console.log(Reflect.ownKeys(), Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ d, e, Symbol(f) ] 

2 特点总结

类型 特点 Object.keys(obj) 返回对象本身可直接枚举的属性(不含Symbol属性） Object.values(obj) 返回对象本身可直接枚举的属性值(不含Symbol属性） Object.entries(obj) 返回对象本身可枚举属性键值对相对应的数组(不含Symbol属性） Object.getOwnPropertyNames(obj) 返回对象所有自身属性的属性名（不包括Symbol值作为名称的属性） Object.getOwnPropertySymbols(obj) 返回一个给定对象自身的所有 Symbol 属性的数组 for……in 所有可枚举的属性（包括原型上的） for……of 必须部署了Iterator接口后才能使用，例如数组、Set和Map结构、类数组对象、Generator对象以及字符串 forEach break不能中断循环 Reflect.ownKeys(obj) 对象自身所有属性

3 遍历顺序

上述遍历对象的属性时都遵循同样的属性遍历次序规则：

首先遍历所有属性名为数值的属性，按照数字排序 其次遍历所有属性名为字符串的属性，按照生成时间排序 最后遍历所有属性名为Symbol值的属性，按照生成时间排序

用下面代码来验证上述遍历规则

const Obj = {     [Symbol(0)]: symbol,     1 : 1,     c: c,     1a1: 11,     22223333: 2,     d: d }; console.log(Reflect.ownKeys(Obj)); // [ 1, 22223333, c, 1a1, d, Symbol(0) ] 

本文转载自微信公众号「执鸢者」，可以通过以下二维码关注。转载本文请联系执鸢者公众号。

云服务器