通过实例解析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 call和apply方法
Nov 24 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
简单分析js中的this的原理
Aug 31 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
德生S2000电路分析
2021/03/02 无线电
PHP 数组遍历顺序理解
2009/09/09 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php中Ctype函数用法详解
2014/12/09 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
寄语十八大感言
2014/02/07 职场文书
2014年度思想工作总结
2014/11/27 职场文书
小学感恩节活动总结
2015/03/24 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js