在 JavaScript 中列出物件屬性

1. 在 JavaScript 中使用 for...in 迴圈列出物件的屬性
2. 使用 JavaScript 中的 Object.keys() 函式列出物件的屬性
3. 在 JavaScript 中使用 Object.getOwnPropertyNames() 列出物件的屬性

JavaScript 提供了各種處理物件的方法，例如 Object.values() 和 Object.prototype.valueOf() 來處理物件值，Object.keys() 和 Object.prototype.hasOwnProperty() 使用物件鍵。

使用者可以對物件鍵和屬性執行任何操作。本教程解釋了在 JavaScript 中使用 for...in 迴圈、Object.getOwnPropertyNames() 和 Object.keys() 函式列出物件屬性。

在 JavaScript 中使用 for...in 迴圈列出物件的屬性

要列出物件的屬性，你可以使用 JavaScript 中的 for...in 迴圈。for...in 迴圈遍歷物件的可列舉屬性。

這些是 enumerable 標誌設定為 true 的物件的屬性。這包括繼承的可列舉屬性。但是，此迴圈忽略了 enumerable 標誌設定為 false 的不可列舉屬性。

例如，讓我們建立一個具有三個屬性的物件並使用 for...in 迴圈列出它。請參閱下面的程式碼。

語法：

for (variable in object) {
  statement
}

該函式迭代 object，並且每次迭代都為 variable 分配不同的屬性名稱。此方法僅從 object 中提取可列舉屬性。

有關更多資訊，請閱讀有關 for...in 方法的更多資訊。

const inputObject = {
    id: 42,
    name: 'John Doe',
    address: {
    	city: "Mumbai",
        country: "India"
    }
};
for (const property in inputObject) {
  console.log(property);
}

在上面的示例程式碼塊中，我們定義了物件的三個屬性 - id、name 和 address。當你迭代 inputObject 時，inputObject 中的所有屬性都會被檢查。

上面程式碼塊的輸出將如下所示。

輸出：

id
name
address

使用 JavaScript 中的 Object.keys() 函式列出物件的屬性

這是 JavaScript 提供的一種內建方法，用於提取物件的屬性或鍵。它迭代物件並返回一個可列舉屬性的陣列。

不可列舉屬性是在迴圈中使用 Object.keys() 或 for ...in 傳遞相應物件時未出現在迴圈中的物件的屬性。

語法：

Object.keys(object);

這個函式接受一個 object 作為輸入，它是一個強制引數。此方法僅從 Object 中提取可列舉屬性。

有關更多資訊，請閱讀有關 keys 方法的更多資訊。

const inputObject = {
    id: 42,
    name: 'John Doe',
    address: {
    	city: "Mumbai",
        country: "India"
    }
};

Object.defineProperty(inputObject, 'salary',{
    value : '30,000$',
    enumerable: false
})

console.log(Object.keys(inputObject));

在前面的示例中，我們定義了物件 ID、name 和 address 的三個屬性。當你傳遞 inputObject 時，會檢查 inputObject 的所有屬性。

上面程式碼塊的輸出將如下所示。

輸出：

["id", "name", "address"]

在 JavaScript 中使用 Object.getOwnPropertyNames() 列出物件的屬性

這是 JavaScript 提供的一種內建方法，用於提取物件的屬性或鍵。它迭代物件並返回一個屬性陣列，包括不可列舉的屬性。

語法：

Object.getOwnPropertyNames(object);

此函式將強制引數 object 作為輸入。此方法僅提取 Object 的可列舉和不可列舉屬性，而不提取值。

有關更多資訊，請閱讀有關 getOwnPropertyNames 方法的更多資訊。

getOwnPropertyNames() 和 Object.keys() 之間的主要區別在於 getOwnPropertyName() 返回可列舉和不可列舉的屬性。而 Object.keys() 只返回可列舉的鍵。

可以使用 Object.defineProperty 建立不可列舉的屬性。當屬性初始化程式初始化屬性時，enumerable 標誌設定為 true。

你可以使用 propertyIsEnumerable() 方法來檢查物件是否包含可列舉或不可列舉的屬性。

const inputObject = {
    id: 42,
    name: 'John Doe',
    address: {
    	city: "Mumbai",
        country: "India"
    }
};

Object.defineProperty(inputObject, 'salary',{
    value : '30,000$',
    enumerable: false
})

console.log(Object.getOwnPropertyNames(inputObject));

在前面的示例中，我們定義了物件 ID、name 和 address 的三個屬性。當你傳遞 inputObject 時，會檢查 inputObject 的所有屬性和不可列舉的屬性。

上面程式碼塊的輸出將如下所示。

輸出：

["id", "name", "address", "salary"]