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 相关文章推荐
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
three.js如何实现3D动态文字效果
Mar 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
YII框架常用技巧总结
2019/04/27 PHP
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
ajax异步请求详解
2017/01/06 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
Python文件处理
2016/02/29 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python tkinter界面居中显示的方法
2018/10/11 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Keras自定义IOU方式
2020/06/10 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
小学校园活动策划
2014/01/30 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
行政助理岗位职责
2015/02/10 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA