在 JavaScript 中列舉物件屬性
-
在 JavaScript 中使用
for...in列舉物件屬性 -
在 JavaScript 中使用
Object.keys列舉物件屬性 -
在 JavaScript 中使用
Object.entries()列舉物件屬性 -
在 JavaScript 中使用
Underscore.js列舉物件屬性
本教程將教你使用不同的方法來列舉 JavaScript 物件的屬性。這些方法將使用內建的 JavaScript 功能，如 for...in、Object.keys 和 Object.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 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