在 JavaScript 中枚举对象属性

Habdul Hazeez 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 for...in 枚举对象属性
  2. 在 JavaScript 中使用 Object.keys 枚举对象属性
  3. 在 JavaScript 中使用 Object.entries() 枚举对象属性
  4. 在 JavaScript 中使用 Underscore.js 枚举对象属性
在 JavaScript 中枚举对象属性

本教程将教你使用不同的方法来枚举 JavaScript 对象的属性。这些方法将使用内置的 JavaScript 功能,如 for...inObject.keysObject.entries

在 JavaScript 中使用 for...in 枚举对象属性

你可以使用 for...in 枚举 JavaScript 对象属性。但是,如果 JavaScript 符号是属性名称,它们将被忽略。

此外,for...in 返回继承的可枚举属性;你可以使用 hasOwnProperty() 方法来避免这种情况。hasOwnProperty() 方法确保返回的属性属于当前对象。

在下面的示例代码中,我们有一个具有一些属性和值的对象。此外,属性名称之一是 JavaScript 符号。

当你使用 for...in 枚举对象时,结果将不包括 JavaScript 符号。

let Java = Symbol("Java");

let inventors = {
  "HTML": 			"Sir Tim Berners-Lee",
  "JavaScript": 	"Brendan Eich",
  [Java]: 			"James Gosling",
  "PHP": 			"Rasmus Lerdorf",
  "Ruby on Rails": 	"DHH",
  "Python": 		"Guido van Rossum"
}

for (let propName in inventors) {
  if (inventors.hasOwnProperty(propName)) {
    console.log(propName);
  }
}

输出:

HTML
JavaScript
PHP
Ruby on Rails
Python

在 JavaScript 中使用 Object.keys 枚举对象属性

你可以通过将对象作为参数传递给 object.keys() 来枚举对象属性。结果是可枚举属性名称的数组,按对象中出现的顺序排列。

以下代码有一个包含星期几及其数值的对象。我们只想获取星期几,所以我们在对象上使用 object.keys()

let daysOfTheWeek = {
  "Sunday": 		1,
  "Monday": 		2,
  "Tuesday": 		3,
  "Wednesday": 		4,
  "Thursday": 		5,
  "Friday": 		6,
  "Saturday":		7
}

let daysArray = Object.keys(daysOfTheWeek);

for (let i = 0; i < daysArray.length; i++) {
  console.log(daysArray[i]);
}

输出:

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

在 JavaScript 中使用 Object.entries() 枚举对象属性

Object.entries() 返回一个数组。该数组的每个元素都是一个由对象属性名称和值组成的数组。

但是,我们需要属性名称。因此,我们将遍历结果数组以获取属性名称。

我们在下面的代码中对数组使用 Object.keys()。之后,我们使用 for...of 循环来提取属性名称。

请注意,我们使用的是与上一节相同的数组。

let daysOfTheWeek = {
  "Sunday": 		1,
  "Monday": 		2,
  "Tuesday": 		3,
  "Wednesday": 		4,
  "Thursday": 		5,
  "Friday": 		6,
  "Saturday":		7
}

let daysArray = Object.entries(daysOfTheWeek);

for (const [propName, propValue] of daysArray) {
  console.log(`${propName}`);
}

输出:

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

在 JavaScript 中使用 Underscore.js 枚举对象属性

Underscore.js 有一个 .keys() 方法以数组形式返回对象属性。但是,由于要枚举属性,因此需要遍历数组。

你可以在循环期间一个接一个地列出属性名称。

在以下代码中,我们通过 CDN 使用 Underscore.js。当 Underscore.js 下载并可供我们的脚本使用时,我们使用它的 .keys() 方法。

<body>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js"
	integrity="sha512-anTuWy6G+usqNI0z/BduDtGWMZLGieuJffU89wUU7zwY/JhmDzFrfIZFA3PY7CEX4qxmn3QXRoXysk6NBh5muQ==" crossorigin="anonymous"
	referrerpolicy="no-referrer"
	>
	</script>
	<script>
		let daysOfTheWeek = {
  			"Sunday": 			1,
  			"Monday": 			2,
  			"Tuesday": 			3,
  			"Wednesday": 		4,
  			"Thursday": 		5,
  			"Friday": 			6,
  			"Saturday":		7
  		}

  		let underscore = _;
  		let days = _.keys(daysOfTheWeek);

  		days.forEach((propKey, propValue) => {
  			console.log(propKey);
  		});
	</script>
</body>

输出:

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

相关文章 - JavaScript Object