通过实例解析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 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
简单谈谈json跨域
Mar 13 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
JS之相等操作符详解
Sep 13 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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若干单维数组遍历方法的比较
2011/09/20 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
详解Python发送邮件实例
2016/01/10 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
学习两会精神心得范文
2014/03/17 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
商业用房租赁协议书
2014/10/13 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript