1. 程式人生 > >js 中遍歷獲取物件屬性 /迭代物件

js 中遍歷獲取物件屬性 /迭代物件

js中遍歷獲取物件屬性和方法主要有Object.keys()、Object.getOwnPropertyNames()、for...in...三種方式

1、Object.keys()、1、1、Object.getOwnPropertyNames()、for...in...區別

1、1 for in會輸出自身以及原型鏈上可列舉的屬性。

          for (variable in object) {...}
           variable  在每次迭代時,將不同的屬性名分配給變數。   object    被迭代列舉其屬性的物件。

           通常,在迭代過程中最好不要在物件上進行新增、修改或者刪除屬性的操作,除非是對當前正在被訪問的屬性。
           for...in不應該用於迭代一個 Array,其中索引順序很重要。

//下面的函式接受一個物件作為引數。被呼叫時迭代傳入物件的所有可列舉屬性然後返回一個所有屬性名和其對應
//值的字串。

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
//下面的函式說明了hasOwnProperty()的用法:繼承的屬性不顯示。
var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

// Output:
// "obj.color = red"

1、2 與for of的區別

          for (variable of iterable) {
           //statements  variable  在每次迭代中,將不同屬性的值分配給變數。   iterable  被迭代列舉其屬性的物件。
         }

2、Object.keys用來獲取物件自身可列舉的屬性鍵。

3、Object.getOwnPropertyNames用來獲取物件自身的全部屬性名

2、可列舉屬性和不可列舉屬性

 在JavaScript中,物件的屬性分為可列舉和不可列舉之分,它們是由屬性的enumerable值決定的。可列舉性決定了這個屬效能否被for…in查詢遍歷到。

一、怎麼判斷屬性是否可列舉

  js中基本包裝型別的原型屬性是不可列舉的,如Object, Array, Number等,如果你寫出這樣的程式碼遍歷其中的屬性:

1

2

3

4

var num = new Number();

for(var pro in num) {

console.log("num." + pro + " = " + num[pro]);

}

它的輸出結果會是空。這是因為Number中內建的屬性是不可列舉的,所以不能被for…in訪問到。

Object物件的propertyIsEnumerable()方法可以判斷此物件是否包含某個屬性,並且這個屬性是否可列舉。

需要注意的是:如果判斷的屬性存在於Object物件的原型內,不管它是否可列舉都會返回false。