浅谈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 节点排序 2
Jan 31 Javascript
JS继承 笔记
Jul 13 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
几种响应式文字详解
May 19 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
JavaScript实现随机点名小程序
Oct 29 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
php 结果集的分页实现代码
2009/03/10 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP 实现重载
2021/03/09 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python实现名片管理系统项目
2019/04/26 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
应届生自荐书
2014/06/23 职场文书
招商引资工作汇报
2014/10/28 职场文书
会议新闻稿
2015/07/17 职场文书
校运会新闻稿
2015/07/17 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技