通过实例解析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 相关文章推荐
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
js实现日历的简单算法
Jan 24 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
JavaScript解析URL参数示例代码
2013/08/12 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python 实现try重新执行
2019/12/21 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
SQL Server笔试题
2012/01/10 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
党员批评与自我批评发言材料
2014/10/14 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
赤壁观后感(2)
2015/06/15 职场文书
python爬虫--selenium模块
2021/03/31 Python