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 相关文章推荐
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 #Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
You might like
php上的memcache和memcached两个pecl库
2010/03/29 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
js实现简单的验证码
2015/12/25 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
python中的__slots__使用示例
2015/02/26 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python Web版语音合成实例详解
2019/07/16 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
社区志愿者心得体会
2014/01/03 职场文书
青年文明号创建承诺
2014/03/31 职场文书
蓝颜请假条
2014/04/11 职场文书
毕业生找工作求职信
2014/08/05 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
七年级地理教学计划
2015/01/22 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python