浅谈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库还是自己写代码?
Jan 28 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 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 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP7.0版本备注
2015/07/23 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
车贷收入证明范本
2014/01/09 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
经济管理自荐书
2014/06/09 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
golang操作rocketmq的示例代码
2022/04/06 Golang