通过实例解析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 相关文章推荐
angularjs指令中的compile与link函数详解
Dec 06 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
js倒计时显示实例
Dec 11 Javascript
vue如何从接口请求数据
Jun 22 Javascript
Vuex 入门教程
Jan 10 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
基于jquery的3d效果实现代码
2011/03/23 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
python字典DICT类型合并详解
2017/08/17 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python函数与方法的区别总结
2019/06/23 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
《窗前的气球》教学反思
2014/04/07 职场文书
小学校本教研总结
2015/08/13 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
赞美教师的句子
2019/09/02 职场文书