遍历对象属性_细说JS遍历对象属性的N种方法

本人详细介绍了JS遍历对象N种方法，欢迎关注收藏。

遍历对象属性有五种方法，下图为一个场景对比图。

可以注意到两点：

只有for ... in 才可以遍历原型链属性，且只能遍历可枚举属性。

Object.getOwnPropertyNames + Object.getOwnPropertySymbols = Reflect.ownKeys.

以上五种方法，用如下代码来做例子：

let obj = {enum_prop: "enum_val",[Symbol("symbol")]: "symbol" };Object.defineProperty(obj, "no_enum_prop", {value: "no_enum_val", enumerable: false});Object.getPrototypeOf(obj).proto_enum_prop = "proto_enum_prop";

Object.keys

返回一个数组，包含对象自身所有enumerable属性（不含Symbol属性）的键名。

console.log(Object.keys(obj)); // 输出：["enum_prop"]

类似的其他两个函数为Object.values() 和Object.entries()。

console.log(Object.values(obj)); // 输出：["enum_val"] console.log(Object.entries(obj)); // 输出：[[enum_prop: "enum_val"]]

for ... in

循环遍历对象自身和prototype的可枚举属性（不含Symbol属性）

for(let prop in obj){console.log(prop); } // 输出: enum_prop proto_enum_prop

Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身所有可枚举和不可枚举属性的（不含Symbol属性）的键名

console.log(Object.getOwnPropertyNames(obj)); // 输出：["enum_prop", "no_enum_prop"]

Object.getOwnPropertySymbols(obj)

返回一个数组，包含对象自身的所有Symbol属性的键名。

console.log(Object.getOwnPropertySymbols(obj)); // 输出：[Symbol(symbol)]

Reflect.ownKeys(obj)

返回数组，包含对象自身可枚举属性、不可枚举属性和Symbol属性。

console.log(Reflect.ownKeys(obj)); // 输出：["enum_prop", "no_enum_prop", Symbol(symbol)]

对象属性的顺序

对于对象属性的顺序，经常看到的说法是：ES5 没有制定，ES6按照如下方式：

值为整形的按照升序排序。

普通字符串的按照插入顺序。

Symbol按照插入顺序。

但是，以下是我从MDN上找到：

for ... in: 返回的属性顺序是不确定的。以下来自MDN文档：

Object.keys(obj)：返回顺序与for ... in 相同。以下来自MDN文档：

Object.getOwnPropertyNames(obj)：返回顺序中可枚举属性和 for ...in相同，不可枚举属性的顺序没有定义，参见：

Object.getOwnPropertySymbols和Reflect.ownKeys，MDN文档没有说明顺序。

总结来说：避免依赖对象属性的顺序。

总结

以上是生活随笔为你收集整理的遍历对象属性_细说JS遍历对象属性的N种方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。