Как получить список ключей объекта js
Перейти к содержимому

Как получить список ключей объекта js

  • автор:

Object.keys, values, entries

Давайте отойдём от отдельных структур данных и поговорим об их переборе вообще.

В предыдущей главе мы видели методы map.keys() , map.values() , map.entries() .

Это универсальные методы, и существует общее соглашение использовать их для структур данных. Если бы мы делали собственную структуру данных, нам также следовало бы их реализовать.

Методы поддерживаются для структур:

Простые объекты также можно перебирать похожими методами, но синтаксис немного отличается.

Object.keys, values, entries

Для простых объектов доступны следующие методы:

  • Object.keys(obj) – возвращает массив ключей.
  • Object.values(obj) – возвращает массив значений.
  • Object.entries(obj) – возвращает массив пар [ключ, значение] .

Обратите внимание на различия (по сравнению с map , например):

Map Object
Синтаксис вызова map.keys() Object.keys(obj) , не obj.keys()
Возвращает перебираемый объект «реальный» массив

Первое отличие в том, что мы должны вызвать Object.keys(obj) , а не obj.keys() .

Почему так? Основная причина – гибкость. Помните, что объекты являются основой всех сложных структур в JavaScript. У нас может быть объект data , который реализует свой собственный метод data.values() . И мы всё ещё можем применять к нему стандартный метод Object.values(data) .

Второе отличие в том, что методы вида Object.* возвращают «реальные» массивы, а не просто итерируемые объекты. Это в основном по историческим причинам.

let user = < name: "John", age: 30 >;
  • Object.keys(user) = [«name», «age»]
  • Object.values(user) = [«John», 30]
  • Object.entries(user) = [ [«name»,»John»], [«age»,30] ]

Вот пример использования Object.values ​​для перебора значений свойств в цикле:

let user = < name: "John", age: 30 >; // перебор значений for (let value of Object.values(user)) < alert(value); // John, затем 30 >

Object.keys/values/entries игнорируют символьные свойства

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

Обычно это удобно. Но если требуется учитывать и символьные ключи, то для этого существует отдельный метод Object.getOwnPropertySymbols, возвращающий массив только символьных ключей. Также, существует метод Reflect.ownKeys(obj), который возвращает все ключи.

Трансформации объекта

У объектов нет множества методов, которые есть в массивах, например map , filter и других.

Если мы хотели бы их применить, то можно использовать Object.entries с последующим вызовом Object.fromEntries :

  1. Вызов Object.entries(obj) возвращает массив пар ключ/значение для obj .
  2. На нём вызываем методы массива, например, map .
  3. Используем Object.fromEntries(array) на результате, чтобы преобразовать его обратно в объект.

Например, у нас есть объект с ценами, и мы хотели бы их удвоить:

let prices = < banana: 1, orange: 2, meat: 4, >; let doublePrices = Object.fromEntries( // преобразовать в массив, затем map, затем fromEntries обратно объект Object.entries(prices).map(([key, value]) => [key, value * 2]) ); alert(doublePrices.meat); // 8

Это может выглядеть сложным на первый взгляд, но становится лёгким для понимания после нескольких раз использования.

Можно делать и более сложные «однострочные» преобразования таким путём. Важно только сохранять баланс, чтобы код при этом был достаточно простым для понимания.

Задачи

Сумма свойств объекта

важность: 5

Есть объект salaries с произвольным количеством свойств, содержащих заработные платы.

Напишите функцию sumSalaries(salaries) , которая возвращает сумму всех зарплат с помощью метода Object.values и цикла for..of .

Если объект salaries пуст, то результат должен быть 0 .

let salaries = < "John": 100, "Pete": 300, "Mary": 250 >; alert( sumSalaries(salaries) ); // 650
function sumSalaries(salaries) < let sum = 0; for (let salary of Object.values(salaries)) < sum += salary; >return sum; // 650 > let salaries = < "John": 100, "Pete": 300, "Mary": 250 >; alert( sumSalaries(salaries) ); // 650

Или, как вариант, мы можем получить сумму, используя методы Object.values и reduce :

// reduce перебирает массив значений salaries, // складывает их // и возвращает результат function sumSalaries(salaries) < return Object.values(salaries).reduce((a, b) =>a + b, 0) // 650 >

Как получить ключ объекта в js?

lazalu68

А если у меня вот такого типа результат:
Харитоов Иван Олегович: Array[2]
0: Object
1: Object
Как перебрать объекты внутри ФИО?

lazalu68

obj = < 'key': [ 1, 2, 3, 4, 5 ], 0: 'somevalue', 1: 564>keys = Object.keys(obj) for (var i = 0, l1 = keys.length; i < l1; i++) < if ( isNaN(parseInt(keys[i])) ) < for (var j = 0, arr = obj[keys[i]], l2 = arr.length; j < l2; j++) < console.log(arr[j]); >> >

То есть если у вас в объекте есть элементы имеющие и числовые и текстовые ключи, то вы можете выбрать те, у которых ключи текстовые, и работать только с ними.

Обход свойств объекта — JS: Объекты

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

В JavaScript для обхода объектов есть несколько способов. Самый простой — использовать конструкцию for..in, которая очень похожа на обычный цикл.

const course =  name: 'JS: React', slug: 'js-react' >; for (const prop in course)  console.log(`course.$prop> = $course[prop]>`); > // course.name = JS: React // course.slug = js-react 

Несмотря на простоту использования, for..in работает не совсем так, как может показаться. for..in выводит не только свойства самого объекта, но и свойства, добавленные в прототип этого объекта. Эту тему мы пока не проходили и дается она позже, но если в двух словах, то объекты в JavaScript могут быть связаны друг с другом и обращение к свойству в одном объекте может приводить к обращению (неявному) к свойству в другом объекте (прототипе). Мы уже сталкивались с таким поведением на практике, но пока обходили этот вопрос стороной.

Главное, что сейчас нужно понимать, в подавляющем большинстве случаев это нежелательное поведение. Именно поэтому for..in используется не так часто, как может показаться. Гораздо более распространенный способ — обходить ключи. Метод Object.keys(obj) позволяет получить массив всех ключей объекта:

const course =  name: 'JS: React', slug: 'js-react' >; const keys = Object.keys(course); // [ 'name', 'slug' ] 

Далее мы можем обойти в цикле массив ключей и получить нужные значения. На практике, обычно, сначала получают массив ключей и что-то с ним делают. Например, фильтруют, отбирая только нужные ключи, а затем обрабатывают исходный объект или создают новый, получая в цикле значение по ключу.

for (const key of keys)  console.log(course[key]); > 

Если ключи в процессе обхода не используются, то можно сразу получить массив значений свойств объекта. Это делает метод Object.values(obj) :

const course =  name: 'JS: React', slug: 'js-react' >; const values = Object.values(course); // [ 'JS: React', 'js-react' ] for (const value of values)  console.log(value); > 

Ну, и последний вариант, метод, который возвращает сразу ключи и значения объекта. То есть каждый элемент сам будет массивом, содержащим ключ и соответствующее ему значение — [ key, value ] . За это отвечает метод Object.entries(obj) :

const course =  name: 'JS: React', slug: 'js-react' >; const entries = Object.entries(course); // [[ 'name', 'JS: React' ], [ 'slug', 'js-react' ]] 

Обойти такой массив циклом for. of не составит никакого труда, а деструктуризация позволит сделать это красиво:

for (const [key, value] of entries)  console.log(key); console.log(value); > 

Рассмотрим пример. Реализуем функцию findKeys() , которая возвращает список ключей объекта, значение которых равно переданному значению:

const lessonMembers =  syntax: 3, using: 2, foreach: 10, operations: 10, destructuring: 2, array: 2, >; findKeys(lessonMembers, 10); // ['foreach', 'operations'] findKeys(lessonMembers, 3); // ['syntax'] 

Логика работы функции выглядит так:

  1. Обходим свойства объекта
  2. Если значение в свойстве совпадает с переданным, то добавляем ключ в результат
const findKeys = (obj, expectedValue) =>  const result = []; const entries = Object.entries(obj); for (const [key, value] of entries)  if (value === expectedValue)  result.push(key); > > return result; >; 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Получить ключи из объекта массива

Всем привет. Имеется массив с объектами. Задача: Получить ключи значений из объекта. Пытаюсь решить через Object.key, получаю ключи самих объектов. Вот код:

Object.keys(data).forEach((key) =>

Отслеживать
задан 24 ноя 2021 в 7:41
61 1 1 серебряный знак 8 8 бронзовых знаков
«Задача: Получить ключи» —- «через Object.key, получаю ключи «. в чём проблема тогда?
24 ноя 2021 в 7:42
Допиши в вопрос пример данных и то, что хочешь получить из этого
24 ноя 2021 в 7:43
полагаю data.forEach( el => console.log(Object.keys(el)) )
24 ноя 2021 в 8:54

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

По заданию есть массив объектов:

let array = [, , ]; 

Нам необходимо получить ключи объектов в массиве, для этого используем функцию массива — reduce:

let keys = array.reduce((container, obj) => [. container, . Object.keys(obj)], []); 

Тем самым получаем все ключи, присутствующие в каждом объекте из массива. Так же можем получить уникальные ключи (массив ключей без дубликатов), используя Set:

let uniqueKeys = [. new Set(keys)]; 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *