在 JavaScript 中列出物件屬性

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 for...in 迴圈列出物件的屬性
  2. 使用 JavaScript 中的 Object.keys() 函式列出物件的屬性
  3. 在 JavaScript 中使用 Object.getOwnPropertyNames() 列出物件的屬性
在 JavaScript 中列出物件屬性

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);
}

在上面的示例程式碼塊中,我們定義了物件的三個屬性 - idnameaddress。當你迭代 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));

在前面的示例中,我們定義了物件 IDnameaddress 的三個屬性。當你傳遞 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));

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

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

輸出:

["id", "name", "address", "salary"]
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript Object