通过实例解析js可枚举属性与不可枚举属性


Posted in Javascript onDecember 02, 2020

在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。

一、怎么判断属性是否可枚举

js中基本包装类型的原型属性是不可枚举的,如Object, Array, Number等,如果你写出这样的代码遍历其中的属性:

var num = new Number();
for(var pro in num) {
  console.log("num." + pro + " = " + num[pro]);
}

它的输出结果会是空。这是因为Number中内置的属性是不可枚举的,所以不能被for…in访问到。

Object对象的propertyIsEnumerable()方法可以判断此对象是否包含某个属性,并且这个属性是否可枚举。

需要注意的是:如果判断的属性存在于Object对象的原型内,不管它是否可枚举都会返回false。

二、枚举性的作用

属性的枚举性会影响以下三个函数的结果:

  • for…in
  • Object.keys()
  • JSON.stringify

先看一个例子,按如下方法创建kxy对象:

function Person() {
  this.name = "KXY";
}
Person.prototype = {
  constructor: Person,
  job: "student",
};
 
var kxy = new Person();
Object.defineProperty(kxy, "sex", {
  value: "female",
  enumerable: false
});

其中用defineProperty为对象定义了一个名为”sex”的不可枚举属性

接下来做以下验证:

for(var pro in kxy) {
  console.log("kxy." + pro + " = " + kxy[pro]);
 }

遍历结果:

通过实例解析js可枚举属性与不可枚举属性

可以看到除了”sex“之外的属性都遍历到了

console.log(Object.keys(kxy));

结果:

通过实例解析js可枚举属性与不可枚举属性

只包含”name”属性,说明该方法只能返回对象本身具有的可枚举属性。

console.log(JSON.stringify(kxy));

结果:

通过实例解析js可枚举属性与不可枚举属性

此方法也只能读取对象本身的可枚举属性,并序列化为JSON对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
简单理解vue中Props属性
Oct 27 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
JavaScript函数柯里化实现原理及过程
Dec 02 #Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 #Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
You might like
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python三引号输出方法
2019/02/27 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
岗位职责定义及内容
2013/11/08 职场文书
品质主管的岗位职责
2013/12/04 职场文书
中层干部岗位职责
2013/12/18 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
React配置子路由的实现
2021/06/03 Javascript
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL