通过实例解析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 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
js倒计时显示实例
Dec 11 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
webpack4简单入门实例
Sep 06 Javascript
mocha的时序规则讲解
Feb 16 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
django 修改server端口号的方法
2018/05/14 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python 进程的几种创建方式详解
2019/08/29 Python
python中删除某个元素的方法解析
2019/11/05 Python
python3 xpath和requests应用详解
2020/03/06 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
python装饰器代码深入讲解
2021/03/01 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
私用公车造成事故检讨书
2014/11/16 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
奠基仪式致辞
2015/07/30 职场文书