Как вывести все свойства произвольно заданного объекта
Для того чтобы осуществить проверку на объект, можно использовать typeof , но в таком случае если будет передан массив, то typeof выдаст object , так же как и для объекта.
typeof(<>); //'object' typeof([]); //'object' Поэтому можно воспользоваться такой конструкцией:
Object.prototype.toString.call(obj) === '[object Object]' Есть более простой способ, но нужно воспользоваться опциональной цепочкой ( ? ), так как в случае если не передать ничего в функцию, то будет TypeError , по той причине что будет вызываться метод toString на obj , а он в свою очередь будет undefined , соответсвенно метода toString у undefined не обнаружится и будет ошибка:
function isObject(obj)
function _keys(obj) < if (!isObject(obj)) return []; else return Object.keys(obj) >function _values(obj) < if (!isObject(obj)) return []; else return Object.values(obj) >function isObject(obj) < return Object.prototype.toString.call(obj) === '[object Object]' >console.log(_keys()) console.log(_values())Отслеживать
ответ дан 19 дек 2020 в 15:27
1,348 4 4 серебряных знака 8 8 бронзовых знаков
function _keys(obj)< if (!isObject(obj)) return []; console.log('Первый вариант:'); console.log(obj); console.log('\n\nВторой вариант:'); console.log( Object.keys(obj) ); console.log('\n\nТретий вариант:'); console.log( JSON.stringify(obj) ); console.log('\n\nЧетвёртый вариант:'); for (const [key, value] of Object.entries(obj)) < console.log(`$: $`); > > function isObject(obj) < return typeof obj === "object" && obj !== null; >_keys(< width: 10, height: 30, >);Отслеживать
ответ дан 19 дек 2020 в 15:22
user347472 user347472
const hidden = Symbol.for('hidden'); const obj = < key_a: 'value_a', key_b: 'value_b', [hidden]: 'hidden_value' >; // Выведет все ключи объекта console.log(Object.keys(obj)); // Выведет все пары ключ-значение console.log(Object.entries(obj)); // Выдаст имена свойств console.log(Object.getOwnPropertyNames(obj)); // Выведет символы скрытых свойств console.log(Object.getOwnPropertySymbols(obj)); // * В песочнице console.log не выводит символы, // но в консоли браузера выводит // Выдаст все свойства с их getter-ами и setter-ами и правами доступа console.log(Object.getOwnPropertyDescriptors(obj));А вот так можно вывести ключи не только непосредственно самого объекта, но и наследуемых прототипов тоже:
console.log(keys(window)); console.log(keys(document)); function keys(obj)
Object.values()
Метод Object.values() возвращает массив значений перечисляемых свойств объекта в том же порядке что и цикл for. in . Разница между циклом и методом в том, что цикл перечисляет свойства и из цепочки прототипов.
Интерактивный пример
Синтаксис
Object.values(obj)
Параметры
Объект, чьи значения перечисляемых свойств будут возвращены.
Возвращаемое значение
Массив содержащий значения перечисляемых свойств объекта.
Описание
Object.values() возвращает массив, чьи элементы это значения перечисляемых свойств найденных в объекте. Порядок такой же как если пройтись по объекту циклом вручную.
Примеры
var obj = foo: "bar", baz: 42 >; console.log(Object.values(obj)); // ['bar', 42] // Массив как объект var obj = 0: "a", 1: "b", 2: "c" >; console.log(Object.values(obj)); // ['a', 'b', 'c'] // Массив как объект со случайным порядком ключей // Когда мы используем нумерованные ключ, значения возвращаются в порядке возрастания var an_obj = 100: "a", 2: "b", 7: "c" >; console.log(Object.values(an_obj)); // ['b', 'c', 'a'] // getFoo неперечисляемое свойство var my_obj = Object.create( >, getFoo: value: function () return this.foo; >, >, >, ); my_obj.foo = "bar"; console.log(Object.values(my_obj)); // ['bar'] // Аргумент, не являющийся объектом, будет приведён к объекту console.log(Object.values("foo")); // ['f', 'o', 'o']
Полифил
Для добавления совместимости Object.values со старым окружением, которое не поддерживает нативно его, вы можете найти полифил здесь tc39/proposal-object-values-entries или в es-shims/Object.values репозитории.
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-object.values |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Перечисляемость и принадлежность свойств
- Object.keys()
- Object.entries() Экспериментальная возможность
- Object.prototype.propertyIsEnumerable()
- Object.create()
- Object.getOwnPropertyNames()
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Обход свойств объекта — 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'] Логика работы функции выглядит так:
- Обходим свойства объекта
- Если значение в свойстве совпадает с переданным, то добавляем ключ в результат
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 студентов
Наши выпускники работают в компаниях:
Получение и изменение свойств объекта
Получить значение свойства можно с помощью операторов точки ( . ) и квадратных скобок ( [] ). Слева от оператора должно находиться выражение, возвращающее объект. При использовании оператора точки справа должен находиться простой идентификатор, соответствующий имени свойства. При использовании квадратных скобок в квадратных скобках должно указываться выражение, возвращающее строку, содержащую имя требуемого свойства:
var author = book.author; // Получить свойство "author" объекта book. var name = author.surname // Получить свойство "surname" объекта author. var title = book["main title"] // Получить свойство "main title" объекта book. Чтобы создать новое свойство или изменить значение существующего свойства, также используются операторы точки и квадратные скобки, как в операциях чтения значений свойств, но само выражение помещается уже слева от оператора присваивания:
book.edition = 6; // Создать свойство "edition" объекта book. book["main title"] = "ECMAScript"; // Изменить значение свойства "main title". В ECMAScript 3 идентификатор, следующий за точкой, не может быть зарезервированным словом: нельзя записать обращение к свойству o.for или o.class , потому что for является ключевым словом, а class – словом, зарезервированным для использования в будущем. Если объект имеет свойства, имена которых совпадают с зарезервированными словами, для доступа к ним необходимо использовать форму записи с квадратными скобками: o[«for»] и o[«class»] .
Стандарт ECMAScript 5 ослабляет это требование и допускает возможность использования зарезервированных слов после оператора точки. При использовании формы записи с квадратными скобками выражение в скобках должно возвращать строку. Если быть более точными, это выражение должно возвращать строку или значение, которое может быть преобразовано в строку.