通过实例解析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 相关文章推荐
php与js的区别是什么
Aug 05 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 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
php基础知识:类与对象(5) static
2006/12/13 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php curl常用的5个经典例子
2017/01/20 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
不懂JavaScript应该怎样学
2008/04/16 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
基于python编写的微博应用
2014/10/17 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python爬取微信公众号文章
2018/08/31 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
金融专业应届生求职信
2013/11/02 职场文书