javascript遍历对象的五种方式实例代码
目录
- 准备
- 五种武器
- for…in
- Object.keys
- Object.getOwnPropertyNames
- Object.getOwnPropertySymbols
- Reflect.ownKeys
- 总结
- 扩展
- Object.values
- Object.entries
- hasOwnProperty
- propertyIsEnumerable
- 总结
准备
先来准备一个测试对象obj。
代码清单1
var notEnum = Symbol("继承不可枚举symbol"); var proto = {[Symbol("继承可枚举symbol")]: "继承可枚举symbol",name: "继承可枚举属性"}; // 不可枚举属性Object.defineProperty(proto, "age", {value: "继承不可枚举属性"}); // 不可枚举symbol属性Object.defineProperty(proto, notEnum, {value: "继承不可枚举symbol"}); var obj = {job1: "自有可枚举属性1",job2: "自有可枚举属性2",[Symbol("自有可枚举symbol")]: "自有可枚举symbol"}; // 继承Object.setPrototypeOf(obj, proto); // 不可枚举属性Object.defineProperty(obj, "address", {value: "自有不可枚举属性"}); // 不可枚举symbol属性var ownNotEnum = Symbol("自有不可枚举symbol"); Object.defineProperty(obj, ownNotEnum, {value: "自有不可枚举symbol"});
五种武器
for…in
这个是对象遍历界的老兵了,通过这种方式可以遍历对象自身及继承的所有可枚举属性(不包括Symbol类型)。
代码清单2
for(var attr in obj){console.log(attr,"==",obj[attr]); }/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2name == 继承可枚举属性*/
Object.keys
获取对象自身所有可枚举属性(不包括Symbol类型)组成的数组
代码清单3
Object.keys(obj).map((attr)=>{console.log(attr,"==",obj[attr]); }); /*job1 == 自有可枚举属性1job2 == 自有可枚举属性2*/
Object.getOwnPropertyNames
获取对象自身所有类型为非Symbol的属性名称(包括不可枚举)组成的数组
代码清单4
Object.getOwnPropertyNames(obj).map((attr)=>{console.log(attr,"==",obj[attr]); }); /*job1 == 自有可枚举属性1job2 == 自有可枚举属性2address == 自有不可枚举属性*/
Object.getOwnPropertySymbols
获取对象自身所有类型为Symbol的属性名称(包括不可枚举)组成的数组
代码清单5
Object.getOwnPropertySymbols(obj).map((attr)=>{console.log(attr,"==",obj[attr]); }); /*Symbol(自有可枚举symbol) == 自有可枚举symbolSymbol(自有不可枚举symbol) == 自有不可枚举symbol*/
Reflect.ownKeys
获取一个对象的自身的所有(包括不可枚举的和Symbol类型)的属性名称组成的数组
代码清单6
Reflect.ownKeys(obj).map((attr)=>{console.log(attr,"==",obj[attr]); }); /*job1 == 自有可枚举属性1job2 == 自有可枚举属性2address == 自有不可枚举属性Symbol(自有可枚举symbol) '==' '自有可枚举symbol'Symbol(自有不可枚举symbol) '==' '自有不可枚举symbol'*/
总结
武器库的说明书,根据需要选择合适的武器吧。
api | 操作 | 自身属性 | 不可枚举属性 | 继承属性 | Symbol属性 |
---|---|---|---|---|---|
for…in | 遍历 | yes | no | yes | no |
Object.keys | 返回属性数组 | yes | no | no | no |
Object.getOwnPropertyNames | 返回非Symbol属性数组 | yes | yes | no | no |
Object.getOwnPropertySymbols | 返回Symbol属性数组 | yes | yes | no | yes |
Reflect.ownKeys | 返回属性数组 | yes | yes | no | yes |
扩展
Object.values
获取对象自身所有可枚举属性(不包括Symbol类型)的值组成的数组
代码清单7
Object.values(obj).map((val)=>{console.log(val); }); /*自有可枚举属性1自有可枚举属性2*/
Object.entries
获取对象自身所有可枚举属性(不包括Symbol类型)的键值对数组
代码清单7
Object.entries(obj).map((val)=>{console.log(val); }); /*[ 'job1', '自有可枚举属性1' ][ 'job2', '自有可枚举属性2' ]*/
hasOwnProperty
检测一个对象自身属性中是否含有指定的属性,返回boolean
【javascript遍历对象的五种方式实例代码】引用自MDN: JavaScript 并没有保护 hasOwnProperty 属性名,因此某个对象是有可能存在使用这个属性名的属性,所以直接使用原型链上的 hasOwnProperty 方法
代码清单8
for(var attr in obj){if(Object.prototype.hasOwnProperty.call(obj,attr)){console.log("自有属性::",attr); }else{console.log("继承属性::",attr); }}/*自有属性:: job1自有属性:: job2继承属性:: name*/
propertyIsEnumerable
检测一个属性在指定的对象中是否可枚举,返回boolean
代码清单9
Reflect.ownKeys(obj).map((attr) => {if (Object.prototype.propertyIsEnumerable.call(obj, attr)) {console.log("可枚举属性::", attr); } else {console.log("不可枚举属性::", attr); }}); /*可枚举属性:: job1可枚举属性:: job2不可枚举属性:: address可枚举属性:: Symbol(自有可枚举symbol)不可枚举属性:: Symbol(自有不可枚举symbol)*/
参考
MDN Object
总结 到此这篇关于javascript遍历对象的五种方式的文章就介绍到这了,更多相关javascript遍历对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 事件代理
- 数组常用方法一
- jQuery插件
- iOS面试题--基础
- 口红选得好,对象不愁找......
- java静态代理模式
- Python-类和对象
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历