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

 更新时间:2017年09月14日 08:48:26   投稿:jingxian  
下面小编就为大家带来一篇浅谈JavaScript中的属性:如何遍历属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在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中的属性:如何遍历属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 点击A元素触发B元素的事件在IE8下会识别成A元素

    点击A元素触发B元素的事件在IE8下会识别成A元素

    IE8自动触发的事件源会识别成手动点击的元素就是点击A元素触发B元素的事件在IE8下会识别成A元素,需要的朋友可以参考下
    2014-09-09
  • JS+JSP checkBox 全选具体实现

    JS+JSP checkBox 全选具体实现

    本文为大家介绍下使用JS+JSP实现checkBox全选,下面有个不错的示例,感兴趣的朋友可以参考下
    2014-01-01
  • JS字符串截取函数实例

    JS字符串截取函数实例

    这篇文章主要介绍了JS字符串截取函数实例,有需要的朋友可以参考一下
    2013-12-12
  • javascript设计模式 – 代理模式原理与用法实例分析

    javascript设计模式 – 代理模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 代理模式,结合实例形式分析了javascript代理模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS中sort函数排序用法实例分析

    JS中sort函数排序用法实例分析

    这篇文章主要介绍了JS中sort函数排序用法,结合实例形式详细分析了sort函数的功能、原理及实现数组排序的相关技巧,代码中备有详尽的注释便于理解,需要的朋友可以参考下
    2016-06-06
  • 微信小程序自定义音乐进度条的实例代码

    微信小程序自定义音乐进度条的实例代码

    最近遇到这样的需求:显示音乐播放按钮、可手动拖拽进度条;页面中含多个音乐,播放当前音乐时暂停其他音乐播放。 这篇文章主要介绍了微信小程序自定义音乐进度条的实例代码,需要的朋友可以参考下
    2018-08-08
  • 详解Js模板引擎(TrimPath)

    详解Js模板引擎(TrimPath)

    本文详细介绍了在页面中引用template.js文件之后,具体的使用方法及实例,有需要的朋友可以参考下
    2016-11-11
  • JS中使用TextDecoder解码二进制数据(数据流的逐步解码)

    JS中使用TextDecoder解码二进制数据(数据流的逐步解码)

    JS中使用TextDecoder将二进制数据转换为可读文本字符串,首先,创建TextDecoder对象,使用decode()方法,解码为字符串,,{stream:true}选项允许处理流式数据,适用于大型数据流的逐步解码,TextDecoder广泛应用于WebSocket通信、文件读取、网络响应等场景
    2024-10-10
  • JS下载文件|无刷新下载文件示例代码

    JS下载文件|无刷新下载文件示例代码

    JS下载文件的实现在网上可以找到很多教程,不过本文为大家介绍的是无刷新下载文件,貌似更酷一点是吧
    2014-04-04
  • uniapp页面跳转的五种方式总结

    uniapp页面跳转的五种方式总结

    这篇文章主要给大家介绍了关于uniapp页面跳转的五种方式,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03

最新评论