浅谈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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
Vue计算属性的使用
Aug 04 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
基于JavaScript获取url参数2种方法
Apr 17 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下读取文本文件的代码
2008/07/02 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php格式化金额函数分享
2015/02/02 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
pandas中ix的使用详细讲解
2020/03/09 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
数控专业个人求职信范例
2013/11/29 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
还款承诺书范文
2014/05/20 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript