通过实例解析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获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
js中的json对象详细介绍
Oct 29 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 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+MYSQL中文乱码问题
2015/07/01 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
大学社团活动策划书
2014/01/26 职场文书
根叔历年演讲稿
2014/05/20 职场文书
医学生求职信
2014/07/01 职场文书
授权委托书范文
2014/07/31 职场文书
医院党员公开承诺书
2014/08/30 职场文书
商铺门面租房协议书
2014/10/21 职场文书
Python实现简单的猜单词
2021/06/15 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript