JavaScript中對(duì)象的枚舉/遍歷（enumeration）

Amio 發(fā)布于2019-08-22 17:02 / 3494人閱讀

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

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

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

Object.keys可以用來(lái)獲取對(duì)象自身可枚舉的屬性鍵

Object.getOwnPropertyNames可以用來(lái)獲取對(duì)象自身的全部屬性名

二、Object.keys()、Object.getOwnPropertyNames()、for...in...實(shí)際應(yīng)用

1、for...in...（通過屬性個(gè)數(shù)來(lái)確定循環(huán)圈數(shù)，想要遍歷誰(shuí)就in誰(shuí)）

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

propertyIsEnumerable():是hasOwnProperty()的增強(qiáng)版,只有檢測(cè)到是只有屬性且這個(gè)屬性的可枚舉為true時(shí)它才返回true

in：只能判斷對(duì)象是否能訪問到該元素，繼承過來(lái)的屬性也能夠訪問

instanceof：可以用來(lái)判斷某個(gè)構(gòu)造函數(shù)的prototype屬性是否存在于另外一個(gè)要檢測(cè)對(duì)象的原型鏈上

如：A instanceof B
      A對(duì)象是不是B構(gòu)造函數(shù)構(gòu)造出來(lái)的，看A對(duì)象的原型鏈上有沒有B的原型

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

// 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"]

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

3、Object.getOwnPropertyNames()方法
返回一個(gè)由指定對(duì)象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數(shù)組。

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

// 類數(shù)組對(duì)象
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循環(huán)使用時(shí)可通過hasOwnProperty()方法過濾掉獲取到原型鏈上的可枚舉屬性，實(shí)現(xiàn)和Object.getOwnPropertyNames()方法同樣的效果

三、區(qū)別數(shù)組和對(duì)象的方法

constructor、instanceof、call.tostring