浅谈JavaScript中的属性:如何遍历属性


Posted in Javascript onSeptember 14, 2017

在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单。这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性.第二个原因是,JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则称这个属性是可枚举的,否则反之。

知道了这些,我们就可以把属性的遍历分为四种情况.

注:示例代码中,我们要遍历的对象是浏览器中的window,环境为Firefox 19,代码运行在空白页面中的script标签里。没有Firebug或者其他调试工具的影响(会导入一些全局变量,console等)。

1.遍历可枚举的自身属性

可枚举的意思就是该属性的[[Enumerable]]特性为true,自身属性的意思就是该属性不是从原型链上继承下来的.

(function () {
 var propertys = Object.keys(window);
 alert(propertys.length);   //3
 alert(propertys.join("\n"));  //window,document,InstallTrigger,除了最后一个是火狐私有的属性,原来window对象只有两个可枚举的自身属性.window属性指向window对象自身,一般没什么用.
})()

2.遍历所有的自身属性

特性为不可枚举的属性也并不是遍历不到,ES5给我们提供了getOwnPropertyNames方法,可以获取到一个对象的所有自身属性.

(function () {
 var propertys = Object.getOwnPropertyNames(window);
 alert(propertys.length);  //72
 alert(propertys.join("\n")); //Object,Function,eval等等
})()

3.遍历可枚举的自身属性和继承属性

继承属性怎么遍历,你应该知道,就是最常用的for in遍历

(function () {
 var getEnumPropertyNames = function (obj) {
  var props = [];
  for (prop in obj) {
   props.push(prop);
  }
  return props;
 }
 var propertys = getEnumPropertyNames(window);
 alert(propertys.length);  //185
 alert(propertys.join("\n")); //addEventListener,onload等等
})()

4.遍历所有的自身属性和继承属性

这种遍历主要用在各种js调试工具的代码补全功能上.比如Firebug的.

(function () {
 var getAllPropertyNames = function (obj) {
  var props = [];
  do {
   props = props.concat(Object.getOwnPropertyNames(obj));
  } while (obj = Object.getPrototypeOf(obj));
  return props;
 }
 var propertys = getAllPropertyNames(window);
 alert(propertys.length);   //276
 alert(propertys.join("\n"));  //toString等
})()

以上这篇浅谈JavaScript中的属性:如何遍历属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript深入理解js闭包
Jul 03 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 #Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 #Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 #Javascript
基于js中document.cookie全面解析
Sep 14 #Javascript
基于Vue过渡状态实例讲解
Sep 14 #Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 #Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
ThinkPHP分页实例
2014/10/15 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用scrapy解析js示例
2014/01/23 Python
python简单获取数组元素个数的方法
2015/07/13 Python
理解python正则表达式
2016/01/15 Python
5款非常棒的Python工具
2018/01/05 Python
python中的数据结构比较
2019/05/13 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
应聘自荐书
2013/10/08 职场文书
俄语专业毕业生推荐信
2013/10/28 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
求职信怎么写
2014/05/23 职场文书
新闻人物通讯稿
2014/10/09 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技