javaScript遍歷對象屬性

liaorio 發布于2019-08-22 13:51 / 534人閱讀

摘要：遍歷對象的屬性并沒有像中遍歷一個那么簡單，主要原因有以下兩點在中對象的屬性分為可枚舉與不可枚舉之分他們是由屬性的的值決定的。

javascript遍歷對象的屬性并沒有像java中遍歷一個Map那么簡單，主要原因有以下兩點:

在javascript中對象的屬性分為可枚舉與不可枚舉之分,他們是由屬性的 enumerable 的值決定的。可枚舉性
決定了這個屬性是否可以被 for-in 遍歷到。

javascript的對象一般都處于原型鏈中，它會從上層原型對象上繼承一些屬性

根據這兩點特性，我們可以分為 4 種情況來遍歷javascript對象屬性

1.遍歷自身可枚舉的屬性 (可枚舉，非繼承屬性)   Object.keys() 方法

該方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中的屬性名的排列順序和使用for..in遍歷該對象時返回的順序一致（兩者的區別是 for ..in還會枚舉其原型鏈上的屬性）

/**Array 對象**/
var arr = ["a","b","c"];
console.log(Object.keys(arr));  
// ["0","1","2"]

/**Object對象**/
var obj = {foo:"bar",baz:42};
console.log(Object.keys(obj));
// ["foo","baz"]

/**類數組 對象  隨機key排序**/
var anObj ={100:"a",2:"b",7:"c"};
console.log(Object.keys);
//["2","7","100"]

/***getFoo 是一個不可枚舉的屬性**/
var my_obj = Object.create(
   {}, 
   { getFoo : { value : function () { return this.foo } } }
);
my_obj.foo = 1;

console.log(Object.keys(my_obj)); 
// ["foo"]

2.遍歷自身的所有屬性(可枚舉，不可枚舉，非繼承屬性)  Object.getOwnPropertyNames()方法

該方法返回一個由指定對象的所有自身屬性組成的數組(包括不可枚舉屬性但不包括Symbol值作為名稱的屬性)

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

// 類數組對象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

// 使用Array.forEach輸出屬性名和屬性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 輸出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚舉屬性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

3.遍歷可枚舉的自身屬性和繼承屬性 （可枚舉，可繼承的屬性） for in

遍歷對象的屬性
var obj={
    name："張三",
    age : "24",
    getAge:function(){
        console.log(this.age);
    }
}
var arry ={};
for(var i in obj){
    if(obj.hasOwnProperty(i)&& typeOf obj[i] != "function"){
        arry[i] = obj[i];
    }
}
console.log(arry);
{name:"張三",age:24}

注: hasOwnProperty()方法判斷對象是有某個屬性(本身的屬性，不是繼承的屬性)

4.遍歷所有的自身屬性和繼承屬性

(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("
"));      //toString等
})()

云服務器 GPU云服務器遍歷json對象屬性 javascript對象遍歷屬性遍歷遍歷java對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92518.html

JavaScript 中遍歷對象的屬性

摘要：所以說遍歷屬性時，要考慮這兩個因素。開始遍歷先定義兩個類吧和，后者繼承前者。然后再聲明并初始化一個的實例。原文鏈接 JavaScript 中遍歷對象的屬性參考 JavaScript中的屬性:如何遍歷屬性《JavaScript 高級程序設計》概述遍歷 JavaScript 對象中的屬性沒有其他語言那么簡單，因為兩個因素會影響屬性的遍歷：對象屬性的屬性描述符 (property ...

Atom 2019-08-21 10:56 評論0 收藏0
JavaScript對象遍歷

摘要：簡單說就是一個有一個函數，這個函數執行的返回值一定是一個對象，對象有兩個屬性標記迭代是否結束，標記這次迭代的結果值。引言遍歷對象是平常工作中很常見的一個操作，幾乎是日常操作，但是遍歷對象真的是一件很容易的事情么，顯然不是的。常用的方式 for...in for (variable in object) {...} 這個是一個很常見的用法，相信每個人順手都可以寫出來。但是這里需要主...

Seay 2019-08-26 13:53 評論0 收藏0
JavaScript遍歷對象和數組的方法總結

摘要：日常開發中我們難免需要對數組和對象進行遍歷，今天抽空來總結下遍歷數組和對象常用的方法。使用遍歷對象注只能遍歷出自身可枚舉的屬性，而不能遍歷出原型鏈上面的屬性。日常開發中我們難免需要對數組和對象進行遍歷，今天抽空來總結下遍歷數組和對象常用的方法。 Javascript遍歷數組總結我們定義一個數組 var arr = [2,4,6]; 1.使用for循環遍歷 var lengt...

jiekechoo 2019-08-23 12:55 評論0 收藏0
JavaScript 中的 for 循環

摘要：在中，引入了新的循環，即循環。而且，遍歷數組元素的順序可能是隨機的。所以，鑒于以上種種缺陷，我們需要改進原先的循環。總結一下，循環有以下幾個特征這是最簡潔最直接的遍歷數組元素的語法。在ECMAScript5（簡稱 ES5）中，有三種 for 循環，分別是：簡單for循環 for-in forEach 在2015年6月份發布的ECMAScript6（簡稱 ES6）中，新增了一種循...

chengjianhua 2019-08-21 10:42 評論0 收藏0
JavaScript循環遍歷你會用哪些？

摘要：總結中的循環遍歷定義一個數組和對象經常用來遍歷數組元素遍歷值為數組元素索引用來遍歷數組元素第一個參數為數組元素，第二個參數為數組元素索引，第三個參數為數組本身可選沒有返回值用來遍歷數組元素第一個參數為數組元素，第二個參數為數組元素索引，第三總結JavaScript中的循環遍歷定義一個數組和對象 const arr = [a, b, c, d, e, f]; const obj = ...

CHENGKANG 2019-08-23 12:10 評論0 收藏0