javascript遍历对象的五种方式实例代码


Posted in Javascript onOctober 24, 2021

准备

先来准备一个测试对象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)
*/

参考

MDN Object

总结

到此这篇关于javascript遍历对象的五种方式的文章就介绍到这了,更多相关javascript遍历对象内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 #Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
You might like
咖啡的传说和历史
2021/03/03 新手入门
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
DWR Ext 加载数据
2009/03/22 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
运动会通讯稿300字
2014/02/02 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
家长会主持词
2014/03/26 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
python实现Nao机器人的单目测距
2021/09/04 Python
MySQL分区表管理命令汇总
2022/03/21 MySQL
nginx.conf配置文件结构小结
2022/04/08 Servers