通过实例解析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 相关文章推荐
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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
Dedecms常用函数解析
2008/02/01 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
下载给定网页上图片的方法
2014/02/18 Python
理解python中生成器用法
2017/12/20 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python 绘制场景热力图的示例
2020/09/23 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
升职自荐书范文
2013/11/28 职场文书
高二英语教学反思
2014/01/19 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
周年庆典答谢词
2015/01/20 职场文书
环境卫生整治简报
2015/07/20 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript