Как перебрать объект js

Как перебрать массив объектов js

Чтобы перебрать массив с объектами, можно также воспользоваться функцией высшего порядка map.

const pupils = [  name: 'Kris', school: 11, >,  name: 'Yulia', school: 547, >,  name: 'Tom', school: 192, >, ]; pupils.map((pupil) => console.log(pupil)); // => // => // =>

Объекты: перебор свойств

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/object.

Для перебора всех свойств из объекта используется цикл по свойствам for..in . Эта синтаксическая конструкция отличается от рассмотренного ранее цикла for(;;) .

for..in

for (key in obj) < /* . делать что-то с obj[key] . */ >

При этом for..in последовательно переберёт свойства объекта obj , имя каждого свойства будет записано в key и вызвано тело цикла.

Объявление переменной в цикле for (var key in obj)

Вспомогательную переменную key можно объявить прямо в цикле:

for (var key in menu) < // . >

Так иногда пишут для краткости кода. Можно использовать и любое другое название, кроме key , например for(var propName in menu) .

Пример итерации по свойствам:

var menu = < width: 300, height: 200, title: "Menu" >; for (var key in menu) < // этот код будет вызван для каждого свойства объекта // ..и выведет имя свойства и его значение alert( "Ключ: " + key + " значение: " + menu[key] ); >

Обратите внимание, мы использовали квадратные скобки menu[key] . Как уже говорилось, если имя свойства хранится в переменной, то обратиться к нему можно только так, не через точку.

Количество свойств в объекте

Как узнать, сколько свойств хранит объект?

Готового метода для этого нет.

Самый кросс-браузерный способ – это сделать цикл по свойствам и посчитать, вот так:

var menu = < width: 300, height: 200, title: "Menu" >; var counter = 0; for (var key in menu) < counter++; >alert( "Всего свойств: " + counter );

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

В каком порядке перебираются свойства?

Для примера, рассмотрим объект, который задаёт список опций для выбора страны:

var codes = < // телефонные коды в формате "код страны": "название" "7": "Россия", "38": "Украина", // . "1": "США" >;

Здесь мы предполагаем, что большинство посетителей из России, и поэтому начинаем с 7 , это зависит от проекта.

При выборе телефонного кода мы хотели бы предлагать варианты, начиная с первого. Обычно на основе списка генерируется select , но здесь нам важно не это, а важно другое.

Правда ли, что при переборе for(key in codes) ключи key будут перечислены именно в том порядке, в котором заданы?

По стандарту – нет. Но некоторое соглашение об этом, всё же, есть.

Соглашение говорит, что если имя свойства – нечисловая строка, то такие ключи всегда перебираются в том же порядке, в каком присваивались. Так получилось по историческим причинам и изменить это сложно: поломается много готового кода.

С другой стороны, если имя свойства – число или числовая строка, то все современные браузеры сортируют такие свойства в целях внутренней оптимизации.

К примеру, рассмотрим объект с заведомо нечисловыми свойствами:

var user = < name: "Вася", surname: "Петров" >; user.age = 25; // порядок перебора соответствует порядку присвоения свойства for (var prop in user) < alert( prop ); // name, surname, age >

А теперь – что будет, если перебрать объект с кодами?

Перебор объекта в JavaScript

В этом посте мы рассмотрим как в JS перебрать объект с помощью цикла и методов. Методы перебора массива мы рассматривали в этой статье.

Мы рассмотрим следующие варианты:

for in — цикл по объекту. Можно получить и ключ и значение.
Object.entries() — метод, возвращающий массив пар [key, value]
Object.keys() — метод, который возвращает массив ключей [key1, key2]
Object.values() — метод, который возвращает массив значений [value1, value2]

For … in

Начнем с простого примера, допустим у нас есть объект user

const user =

Если мы знаем все свойства этого объекта, то мы могли бы их просто вывести так:

console.log(user.name); console.log(user.age); // и т.д.

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

for (let key in user) < console.log(key + ' - ' + user[key]); >// В консоли мы увидим следующее: // name - John // age - 30 // position - manager // salary - 5000

В переменную key мы получаем на каждой итерации ключ, а для того чтобы получить значение по данному ключу, мы используем user[key] .

Обратите внимание, что мы не можем написать просто user.key , т.к. у нашего объекта нет такого свойства, key — это переменная, которую мы задали для прохода по объекту в цикле (кстати, мы также можем сделать ее const вместо let , это не имеет значения). Поэтому мы обращаемся именно через квадратные скобки []

В другом примере, рассмотрим вариант когда нам те же данные нужно вывести и добавить к определeнному div

Еще пару моментов, которые касаются этого цикла. Первое, сортировка ключей происходит в порядке их добавления, если ключи это обычные строки. Если ключи это числа (не важно 9 или «9»), тогда они будут выводиться в порядке возрастания. Допустим, есть объект с постами, где ключ это id поста:

const posts = < 2: 'Второй пост', 3: 'Третий пост', 1: 'Первый пост' >console.log(posts); //

Так часто приходится делать в случае, когда вам нужно будет вытащить пост по ID, это будет быстрее чем перебирать весь массив постов.

Второй нюанс, это то что данный цикл перебирает все свойства в цепочке Prototype:

const user = < name: 'John', age: 30 >const user1 = < lastName: 'Doe', role: 'admin' >user1.__proto__ = user; for (let key in user1) < console.log(key); >// Результат в консоли // lasName, role, name, age

Для того, чтобы вывести только свойства конкретного объекта, вам придется воспользоваться методом hasOwnProperty (более детально об этом методе), чтобы убедиться что данное свойство принадлежит только итерируемому объекту:

for (let key in user1) < if (user1.hasOwnProperty(key)) < console.log(key); >> // lastName, role

Object.entries() — пара ключ значение из объекта

Данный метод вернет массив, где каждый элемент массива будет парой [ключ, значение]

const user = < name: 'John', age: 30, role: 'Administrator' >const objEntries = Object.entries(user); console.log(objEntries); // [ ['name', 'John'], ['age', 30], ['role', 'Administrator'] ]

Важно, обратите внимание на вызов данного метода. Нельзя просто написать user.entries()

Из нашего примера видно, что в переменной objEntries будет массив состоящий из 3 других массивов. Дальше в зависимости от того, что вам нужно в результате, вы можете воспользоваться методами массивов.

Object.keys() — получаем ключи из объекта

Данный метод возвращает массив ключей объекта. Если рассмотреть на том же примере с объектом user, то получим:

const objKeys = Object.keys(user); console.log(objKeys); // [ 'name', 'age', 'role' ]

Данный метод можно использовать для определения количества элементов в объекте:

console.log(Object.keys(user).length); // 3

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

Object.values() — получаем массив значений из объекта

Как вы уже наверное догадались, данный метод возвращает массив со значениями:

const user = < name: 'John', age: 30, role: 'Administrator' >const objValues = Object.values(user); console.log(objValues); // [ 'John', 30, 'Administrator' ]

Тут думаю ничего сложного, но если остались вопросы пишите в комментариях.

Ваши вопросы и комментарии:

Object.keys()

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

Синтаксис

Object.keys(obj)

Параметры

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

Описание

Метод 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 (англ.).

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

Specification
ECMAScript Language Specification # sec-object.keys

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

BCD tables only load in the browser

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

Перечисляемость и собственность свойств (en-US)
Object.prototype.propertyIsEnumerable()
Object.create()
Object.getOwnPropertyNames()