欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:06:26
在javascript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单。这主要有两个方面的原因:一个是,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中的属性:如何遍历属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。