Как выполнить итерацию по простому объекту в Javascript

Хоть и не часто, но иногда вы можете оказаться в ситуации, когда вам нужно выполнить цикл по объекту Javascript. В отличие от строк и массивов, объекты, буквальные объекты с фигурными скобками и парой ключ: значение, не считаются итерируемыми.

Поэтому, если вы воспользуетесь методом for... of для итерации следующих объектов, например, так:

const fruitsQty = {
melon: 10, 
apple: 15, 
grape: 7, 
pineapple: 10, 
jackfruit: 22, 
strawberry: 14, 
orange: 30}

for (let exm of fruitsQty) {
console.log(exm)
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы получите ошибку.

Однако если вы представите пары ключ:значение этого объекта в виде массива, вы сможете использовать метод for...of.

Для этого вам нужно использовать специальные методы: Object.keys(), чтобы вернуть фактический массив, содержащий ключи из объекта в виде массива, Object.values(), чтобы вернуть фактический массив, состоящий из значений из этого объекта, и Object.entries(), который вернет литеральные вложенные массивы пар ключ:значение этого объекта.

Object.keys(fruitsQty) // (7) ["melon", "apple", "grape", "pineapple", "jackfruit", "strawberry", "orange"]

Object.values(fruitsQty) // (7) [10, 15, 7, 10, 22, 14, 30]

Object.entries(fruitsQty) // ["melon" 10, "apple" 15, "grape" 7, "pineapple" 10, "jackfruit" 22, "strawberry" 14, "orange" 30
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, когда они представлены в виде массива (технически они не превращаются в массив, мы просто делаем массив из объекта, извините, если это запутано), мы можем использовать предыдущий метод for...of для итерации этого объекта, потому что он работает с массивом.

Вот пример итерации по количеству фруктов

for (let quantity of Object.values(fruitsQty) {
console.log(quantity) 
}

//
10
15
7
10
22
14
30
Вход в полноэкранный режим Выйти из полноэкранного режима

В принципе, использование этих трех методов позволит вам выполнять итерацию объектов с помощью метода for..of, как если бы они были массивом. Вы также можете перебирать их, чтобы получить общее количество фруктов.

let sum = 0;

for (let quantity of Object.values(fruitsQty) {
sum += quantity;
}

// Each time it loops, the sum adds each fruit quantity
// 108
Вход в полноэкранный режим Выход из полноэкранного режима

Поскольку эти ключи и значения ведут себя как массив с помощью этих методов, вы также можете узнать длину количества фруктов, например, так:

// first, create a variable that stores the fruit quantity information as an array

let quantity = Object.values(fruitsQty);

console.log(quantity.length) // 7
Войти в полноэкранный режим Выйти из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий