在JavaScript中,遍歷一個對象的屬性往往沒有在其他語言中遍歷一個哈希(有些語言稱為字典)的鍵那么簡單.這主要有兩個方面的原因:一個是,JavaScript中的對象通常都處在某個原型鏈中,它會從一個或多個的上層原型上繼承一些屬性.第二個原因是,JavaScript中的屬性不光有值,它還有一些除了值以外的其他特性,其中一個影響屬性遍歷的特性就是[[Enumerable]],如果該值為true,則稱這個屬性是可枚舉的,否則反之.

知道了這些,我們就可以把屬性的遍歷分為四種情況.

注:示例代碼中,我們要遍歷的對象是瀏覽器中的window,環(huán)境為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等 })()

轉載于:https://www.cnblogs.com/qiangxia/p/5532043.html

總結

以上是生活随笔為你收集整理的[转] JavaScript中的属性:如何遍历属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。