通过实例解析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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
js获取url中"?"后面的字串方法
May 15 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
CSS常用网站布局实例
2008/04/03 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
angular 服务随记小结
2019/05/06 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
python模块之StringIO使用示例
2015/04/08 Python
python制作一个桌面便签软件
2015/08/09 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
python顺序执行多个py文件的方法
2019/06/29 Python
python学生管理系统的实现
2020/04/05 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
大三学习计划书范文
2014/05/02 职场文书
小学生校园广播稿
2014/09/28 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
天坛导游词
2015/02/02 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python