Javascript массив ключей объекта

Object.entries()

The Object.entries() static method returns an array of a given object’s own enumerable string-keyed property key-value pairs.

Try it

Syntax

Parameters

Return value

An array of the given object’s own enumerable string-keyed property key-value pairs. Each key-value pair is an array with two elements: the first element is the property key (which is always a string), and the second element is the property value.

Description

Object.entries() returns an array whose elements are arrays corresponding to the enumerable string-keyed property key-value pairs found directly upon object . This is the same as iterating with a for. in loop, except that a for. in loop enumerates properties in the prototype chain as well. The order of the array returned by Object.entries() is the same as that provided by a for. in loop.

If you only need the property keys, use Object.keys() instead. If you only need the property values, use Object.values() instead.

Examples

Using Object.entries()

const obj =  foo: "bar", baz: 42 >; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // Array-like object const obj =  0: "a", 1: "b", 2: "c" >; console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] // Array-like object with random key ordering const anObj =  100: "a", 2: "b", 7: "c" >; console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] // getFoo is a non-enumerable property const myObj = Object.create( >,  getFoo:  value()  return this.foo; >, >, >, ); myObj.foo = "bar"; console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] 

Using Object.entries() on primitives

Non-object arguments are coerced to objects. Only strings may have own enumerable properties, while all other primitives return an empty array.

// Strings have indices as enumerable own properties console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] // Other primitives have no own properties console.log(Object.entries(100)); // [] 

Converting an Object to a Map

The Map() constructor accepts an iterable of entries . With Object.entries , you can easily convert from Object to Map :

const obj =  foo: "bar", baz: 42 >; const map = new Map(Object.entries(obj)); console.log(map); // Map(2) "bar", "baz" => 42> 

Iterating through an Object

Using array destructuring, you can iterate through objects easily.

// Using for. of loop const obj =  a: 5, b: 7, c: 9 >; for (const [key, value] of Object.entries(obj))  console.log(`$key> $value>`); // "a 5", "b 7", "c 9" > // Using array methods Object.entries(obj).forEach(([key, value]) =>  console.log(`$key> $value>`); // "a 5", "b 7", "c 9" >); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

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.* возвращают «реальные» массивы, а не просто итерируемые объекты. Это в основном по историческим причинам.

  • 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 >

Так же, как и цикл 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((Javascript массив ключей объекта) => Javascript массив ключей объекта) ); alert(doublePrices.meat); // 8

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

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

Задачи

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

Есть объект 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 >

Источник

Object.keys()

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

Синтаксис

Параметры

Объект, чьи собственные перечисляемые свойства будут возвращены.

Описание

Метод Object.keys возвращает массив строковых элементов, соответствующих именам перечисляемых свойств, найденных непосредственно в самом объекте. Порядок свойств такой же, как и при ручном перечислении свойств в объекте через цикл.

Примеры

var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // консоль: ['0', '1', '2'] // Массивоподобный объект var obj =  0: 'a', 1: 'b', 2: 'c' >; console.log(Object.keys(obj)); // консоль: ['0', '1', '2'] // Массивоподобный объект со случайным порядком ключей var an_obj =  100: 'a', 2: 'b', 7: 'c' >; console.log(Object.keys(an_obj)); // консоль: ['2', '7', '100'] // Свойство getFoo является не перечисляемым свойством var my_obj = Object.create(>,  getFoo:  value: function()  return this.foo; > > >); my_obj.foo = 1; console.log(Object.keys(my_obj)); // консоль: ['foo'] 

Если вы хотите увидеть все свойства, а не только перечисляемые, смотрите метод Object.getOwnPropertyNames() .

Примечания

В ES5, если аргумент метода не является объектом (является примитивным значением), будет выброшено исключение TypeError . В ES2015 такой аргумент будет приведён к объекту.

> Object.keys('foo') TypeError: 'foo' is not an object // код ES5 > Object.keys('foo') ['0', '1', '2'] // код ES2015 

Полифил

Для добавления поддержки совместимого метода Object.keys в старых окружениях, которые его ещё не реализуют, скопируйте следующий кусок кода:

// From https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/keys if (!Object.keys)  Object.keys = (function()  'use strict'; var hasOwnProperty = Object.prototype.hasOwnProperty, hasDontEnumBug = !( toString: null >).propertyIsEnumerable('toString'), dontEnums = [ 'toString', 'toLocaleString', 'valueOf', 'hasOwnProperty', 'isPrototypeOf', 'propertyIsEnumerable', 'constructor' ], dontEnumsLength = dontEnums.length; return function(obj)  if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null))  throw new TypeError('Object.keys called on non-object'); > var result = [], prop, i; for (prop in obj)  if (hasOwnProperty.call(obj, prop))  result.push(prop); > > if (hasDontEnumBug)  for (i = 0; i  dontEnumsLength; i++)  if (hasOwnProperty.call(obj, dontEnums[i]))  result.push(dontEnums[i]); > > > return result; >; >()); > 

Пожалуйста, обратите внимание, что вышеприведённый код в IE7 (и, может быть, в IE8) включает и не перечисляемые ключи, если объект передаётся из другого окна.

Более простой полифил может быть найден в статье Javascript — Object.keys Browser Compatibility (англ.).

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Источник

Читайте также:  Кластеризация поисковых запросов python
Оцените статью