You often need to look through the properties and values of plain JavaScript objects.
Here are the common lists to extract from an object:
Let's consider the following JavaScript object:
const hero = {
name: 'Batman',
city: 'Gotham'
};
The keys of hero are ['name', 'city']. The values are ['Batman', 'Gotham']. And the entries are [['name', 'Batman'], ['city', 'Gotham']].
Let's see what utility functions provide JavaScript to extract the keys, values, and entries from an object.
Object.keys(object) is a utility function that returns the list of keys of object.
Let's use Object.keys() to get the keys of hero object:
const hero = {
name: 'Batman',
city: 'Gotham'
};
Object.keys(hero); // => ['name', 'city']
Object.keys(hero) returns the list ['name', 'city'], which, as expected, are the keys of hero object.
If you'd like to quickly check if an object is empty (has no own properties), then a good approach is to check whether the keys list is empty.
To check if the object is empty, all you need to do is verify the length property of the array returned by Object.keys(object):
const isObjectEmpty = Object.keys(object).length === 0;
In the following example, empty has no properties, while nonEmpty object has one property:
const empty = {};
const nonEmpty = { a: 1 };
Object.keys(empty).length === 0; // => true
Object.keys(nonEmpty).length === 0; // => false
Object.keys(empty).length === 0 evaluates to true, which means that empty has no properties.
Object.values(object) is the JavaScript utility function that returns the list of values of object.
Let's use this function to get the values of hero object:
const hero = {
name: 'Batman',
city: 'Gotham'
};
Object.values(hero); // => ['Batman', 'Gotham']
Object.values(hero) returns the values of hero: ['Batman', 'Gotham'].
books is an object that holds the prices of some books. The property key is the book name, while the value is the book price.
How would you determine the sum of all books from the object? By accessing the values of the object, and summing them.
Let's see how to do that:
const books = {
'The Shining': 5.50,
'Harry Potter and the Goblet of Fire': 10.00,
'1984': 4.35
};
const prices = Object.values(books);
prices; // => [4.35, 5.5, 10]
const sum = prices.reduce((sum, price) => sum + price);
sum; // => 19.85
Object.values(books) returns the values of books object, which in this case is the prices list.
Then prices.reduce(Math.sum) summarizes the prices.
Finally, Object.entries(object) is an useful function to access the entries of object.
Let's extract the entries of hero object:
const hero = {
name: 'Batman',
city: 'Gotham'
};
Object.entries(hero); // => `[['name', 'Batman'], ['city', 'Gotham']]`
Object.entries(hero) returns the entries of hero: [['name', 'Batman'], ['city', 'Gotham']].
Again, let's use the books object that holds the prices of some books. This time, due to a mistake, one of the books has been assigned with the price 0.
Let's find the book with the price 0 and log its name to console.
Using the object's entries list fits well to solve this task:
const books = {
'The Shining': 5.50,
'Harry Potter and the Goblet of Fire': 10.00,
'1984': 0
};
for (const [book, price] of Object.entries(books)) {
if (price === 0) {
console.log(book);
}
}
// logs '1984'
Object.entries(books) returns a list of tuples: the book name and price. const [book, price] extracts in place from the tuple the book name and price.
Finally, inside the for..of cycle, you can check which book price is 0, and log the name to console if that's the case.
The keys, values, and entries are 3 common lists to extract from a JavaScript object for further processing.
JavaScript provides the necessary utility function to access these lists:
Object.keys(object)Object.values(object)Object.entries(object)What other ways to access keys, values, and entries do you know?
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。