JavaScript中對象的枚舉/遍歷（enumeration）

Amio 發布于2019-08-22 17:02 / 3476人閱讀

摘要：附如果你想獲取一個對象的所有屬性甚至包括不可枚舉的即可見下面一種方法方法返回一個由指定對象的所有自身屬性的屬性名包括不可枚舉屬性但不包括值作為名稱的屬性組成的數組。

JavaScript中遍歷獲取對象屬性和方法主要有三種： Object.keys()、Object.getOwnPropertyNames()、for...in... 一、Object.keys()、Object.getOwnPropertyNames()、for...in...區別

for...in ...會輸出自身以及原型鏈上可枚舉的屬性

Object.keys可以用來獲取對象自身可枚舉的屬性鍵

Object.getOwnPropertyNames可以用來獲取對象自身的全部屬性名

二、Object.keys()、Object.getOwnPropertyNames()、for...in...實際應用

1、for...in...（通過屬性個數來確定循環圈數，想要遍歷誰就in誰）

hasOwnPrototype()：判斷屬性是否是自身的屬性，返回值是Boolean類型的true和false，對于繼承的屬性返回的是false（過濾）

propertyIsEnumerable():是hasOwnProperty()的增強版,只有檢測到是只有屬性且這個屬性的可枚舉為true時它才返回true

in：只能判斷對象是否能訪問到該元素，繼承過來的屬性也能夠訪問

instanceof：可以用來判斷某個構造函數的prototype屬性是否存在于另外一個要檢測對象的原型鏈上

如：A instanceof B
      A對象是不是B構造函數構造出來的，看A對象的原型鏈上有沒有B的原型

2、Object.keys() 方法（返回一個所有元素字符串類型的數組）
會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致（兩者的主要區別是一個 for-in 循環還會枚舉其原型鏈上的屬性）。

// simple array
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]

// array like object
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // console: ["0", "1", "2"]

// array like object with random key ordering
var anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.keys(anObj)); // console: ["2", "7", "100"]

// getFoo is a property which isn"t enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ["foo"]

附：如果你想獲取一個對象的所有屬性,甚至包括不可枚舉的,即可見下面一種方法

3、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"]

附：Object.keys或用for...in循環使用時可通過hasOwnProperty()方法過濾掉獲取到原型鏈上的可枚舉屬性，實現和Object.getOwnPropertyNames()方法同樣的效果

三、區別數組和對象的方法

constructor、instanceof、call.tostring

GPU云服務器云服務器 javascript對象遍歷 Enumerable對象 java中枚舉的用法 js遍歷對象的數據

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

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

JavaScript 中遍歷對象的屬性

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

Atom 2019-08-21 10:56 評論0 收藏0
關于JavaScript對象，你所不知道的事（二）- 再說屬性

摘要：但好在還給我們提供了一個方法，每一個對象都有這樣一個方法，專門用來判斷某個屬性是否是該對象的私有屬性。如果你想要用對象字面形式，你只能在創建對象時定義訪問器屬性。在中，我們使用凍結一個對象，并且使用來判斷一個對象是否被凍結。說完了對象那些不常用的冷知識，是時候來看看JavaScript中對象屬性有哪些有意思的東西了。不出你所料，對象屬性自然也有其相應的特征屬性，但是這個話題有點復雜...

Richard_Gao 2019-08-21 17:49 評論0 收藏0
javaScript遍歷對象屬性

摘要：遍歷對象的屬性并沒有像中遍歷一個那么簡單，主要原因有以下兩點在中對象的屬性分為可枚舉與不可枚舉之分他們是由屬性的的值決定的。 javascript遍歷對象的屬性并沒有像java中遍歷一個Map那么簡單，主要原因有以下兩點: 在javascript中對象的屬性分為可枚舉與不可枚舉之分,他們是由屬性的 enumerable 的值決定的。可枚舉性決定了這個屬性是否可以被 for-in ...

liaorio 2019-08-22 13:51 評論0 收藏0
JavaScript-面向對象、Object類型

摘要：面向對象面向對象編程的全稱為簡稱。面向對象編程是用抽象方式創建基于現實世界模型的一種編程方式。面向對象編程可以看做是使用一系列對象相互協作的軟件設計。面向對象編程的三個主要特征是封裝繼承多態。面向對象面向對象編程的全稱為Object Oriented Programming,簡稱OOP。面向對象編程是用抽象方式創建基于現實世界模型的一種編程方式。面向對象編程可以看做是使用一系列對象...

amuqiao 2019-08-26 12:11 評論0 收藏0
ES6入門之對象的擴展

摘要：屬性的簡潔表示法在中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量...

AWang 2019-08-26 13:53 評論0 收藏0