通过实例解析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 遍历页面text控件详解
Jan 06 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php常用Stream函数集介绍
2013/06/24 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
详解Python中break语句的用法
2015/05/14 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
爱护花草树木的标语
2014/06/11 职场文书
动物科学专业求职信
2014/07/27 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
毕业欢送会致辞
2015/07/29 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫