在 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