通过实例解析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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
javascript cookie的简单应用
Feb 24 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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垃圾代码优化操作代码
2010/08/05 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
Less 安装及基本用法
2018/05/05 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python运行其他程序的实现方法
2017/07/14 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python OpenCV获取视频的方法
2018/02/28 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python实现时间序列可视化的方法
2019/08/06 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
如何教少儿学习Python编程
2020/07/10 Python
Python如何发送与接收大型数组
2020/08/07 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
历史学专业毕业生求职信
2013/09/27 职场文书
酒吧创业计划书
2014/01/18 职场文书
红色故事演讲稿
2014/05/22 职场文书
交通安全责任书范本
2014/07/24 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
Python中的socket网络模块介绍
2022/07/23 Python