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 相关文章推荐
js function使用心得
May 10 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
JavaScript小技巧整理
Dec 30 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
详解JavaScript数据类型和判断方法
Sep 04 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 #Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
You might like
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
python访问hdfs的操作
2020/06/06 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python