javascript遍历对象的五种方式实例代码
程序员文章站
2022-06-19 15:06:02
目录准备五种武器for…inobject.keysobject.getownpropertynamesobject.getownpropertysymbolsreflect.ownkeys总结扩展ob...
准备
先来准备一个测试对象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 == 自有可枚举属性1 job2 == 自有可枚举属性2 name == 继承可枚举属性 */
object.keys
获取对象自身所有可枚举属性(不包括symbol类型)组成的数组
代码清单3
object.keys(obj).map((attr)=>{ console.log(attr,"==",obj[attr]); }); /* job1 == 自有可枚举属性1 job2 == 自有可枚举属性2 */
object.getownpropertynames
获取对象自身所有类型为非symbol的属性名称(包括不可枚举)组成的数组
代码清单4
object.getownpropertynames(obj).map((attr)=>{ console.log(attr,"==",obj[attr]); }); /* job1 == 自有可枚举属性1 job2 == 自有可枚举属性2 address == 自有不可枚举属性 */
object.getownpropertysymbols
获取对象自身所有类型为symbol的属性名称(包括不可枚举)组成的数组
代码清单5
object.getownpropertysymbols(obj).map((attr)=>{ console.log(attr,"==",obj[attr]); }); /* symbol(自有可枚举symbol) == 自有可枚举symbol symbol(自有不可枚举symbol) == 自有不可枚举symbol */
reflect.ownkeys
获取一个对象的自身的所有(包括不可枚举的和symbol类型)的属性名称组成的数组
代码清单6
reflect.ownkeys(obj).map((attr)=>{ console.log(attr,"==",obj[attr]); }); /* job1 == 自有可枚举属性1 job2 == 自有可枚举属性2 address == 自有不可枚举属性 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 |
五种武器里最牛的就是reflect.ownkeys了,无论symbol还是不可枚举通吃, 简直就是object.getownpropertynames和object.getownpropertysymbols合体的效果。
扩展
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
引用自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) */
参考
总结
到此这篇关于javascript遍历对象的五种方式的文章就介绍到这了,更多相关javascript遍历对象内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
javascript 面向对象的经典实例代码_js面向对象
-
遍历DOM对象内的元素属性示例代码_javascript技巧
-
JavaScript for-in遍历,ES6的for-of遍历,可迭代对象的forEach()方法实例讲解
-
javascript中元素的创建方式代码实例
-
javascript遍历json对象的key和任意js对象属性实例
-
JavaScript面向对象学习之类的创建,类的抽象代码实例讲解
-
遍历某个数组里的字段,拼接到需要的对象里,相对应的修改字段名称(代码实例)
-
JavaScript实现的可变动态数字键盘控件方式实例代码
-
JavaScript-类的定义与对象的创建代码实例
-
jQuery对象和Javascript对象之间转换的实例代码