Циклическое прохождение по объектам в javascript

В этом посте я расскажу вам о различных методах перебора объектов в языке программирования javascript.

Содержание

for … in
Object.keys()
Object.values()
Object.entries()

for … in

Этот подход используется для перебора ключей объекта.
Перебирая ключи, вы можете получить значение, используя object[key].

const object = {
  name: "Dhanush",
  language:"js"
}

for(const key in object){
  const value = object[key]
  console.log("Key: ",key)
  console.log("Value: ",value)
}

// Key: name
// Value: Dhanush
// Key: language
// Value: js

Вход в полноэкранный режим Выйти из полноэкранного режима

Object.keys()

Метод keys конструктора Object возвращает массив ключей объекта.
Имея массив ключей, вы можете перебирать массив, используя любые подходы к массивам.
Значение ключа объекта также можно получить, используя object[key].

const object = {
  name: "Dhanush",
  language:"js"
}
const keys = Object.keys(object)
// ['name', 'language']
keys.forEach(function(key){
  const value = object[key]
  console.log("Key: ",key)
  console.log("Value: ",value)
})

// Key: name
// Value: Dhanush
// Key: language
// Value: js

Вход в полноэкранный режим Выйти из полноэкранного режима

Object.values()

Метод values возвращает массив значений объекта (противоположный методу keys).
С полученным массивом вы можете перебирать их, используя любую функциональность массива.
Вы можете использовать ключ для получения значения напрямую, но вы не можете использовать значение для получения ключа напрямую.

const object = {
  name: "Dhanush",
  language:"js"
}
const values = Object.values(object)
// ['Dhanush', 'js']
values.forEach(function(value){
  console.log(value)
})

// Dhanush
// js

Вход в полноэкранный режим Выйти из полноэкранного режима

Object.entries()

Метод entries возвращает массив подмассивов, где каждый подмассив состоит из двух элементов, первый из которых является ключом, а второй — значением.
В отличие от метода keys and values, entries возвращает ключи и значения объекта в подмассивах.
Затем вы можете получить к ним доступ, используя индекс.

const object = {
  name: "Dhanush",
  language:"js"
}
const entries = Object.entries(object)
// [
//   ['name', 'Dhanush'],
//   ['language', 'js'],
// ]
entries.forEach(function(entry){
  const key = entry[0]
  const value = entry[1]
  console.log("Key: ",key)
  console.log("Value: ",value)

console.log(value)
})

// Key: name
// Value: Dhanush
// Key: language
// Value: js

Вход в полноэкранный режим Выход из полноэкранного режима

Сообщение в Твиттере 👇