通过实例解析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代码
Aug 13 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jQuery链使用指南
Jan 20 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
浅析vue component 组件使用
Mar 06 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
解决vue组件中click事件失效的问题
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学习之整理字符串
2011/04/17 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
Python FTP操作类代码分享
2014/05/13 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
销售员自我评价怎么写
2013/09/19 职场文书
医学生自荐信范文
2013/12/03 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
管理提升方案
2014/06/04 职场文书
测绘工程专业求职信
2014/07/15 职场文书
合作意向协议书
2015/01/29 职场文书
接收函格式
2015/01/30 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
通知函格式范文
2015/04/27 职场文书
信仰纪录片观后感
2015/06/08 职场文书
公司联欢会主持词
2015/07/04 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS