JS: Какие есть способы получить свойства объекта?

JavaScript

Два типа свойств объектов

Существует два типа свойств объекта: строка и символ.

var sybProp = Symbol()
var strProp = 'str'
var objProp = {}

var obj = {
  [sybProp]: 'This is a String property',
  [strProp]: 'This is a Symbol property',
  [objProp]: 'This is also a String property'
}

obj
// {
//   str: "This is a String property",
//   [object Object]: "This is also a String property",
//   Symbol(): "This is a Symbol property"
// }

Поскольку объекты поддерживают только два типа свойств, String и Symbol, если мы используем любой другой тип значения в качестве имени свойства, оно в конечном итоге будет преобразовано в строку. такой как здесь[objProp],objPropявляется объектом, используйте его для созданияobjПосле этого посмотрите еще раз, он станет строкой"[object Object]".

Как получить свойства

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

var obj = {
  str: 'This is a String property',
  [Symbol()]: 'This is a Symbol property'
}
// 再定义一个不可枚举属性
Object.defineProperty(obj, 'unenum', {
  value: 'This is a non-enumerable property',
  writeable: true,
  enumerable: false,
  configurable: true
})
Object.defineProperty(obj, Symbol('unenum'), {
    value: 'This is a non-enumerable Symbol property',
    writeable: true,
    enumerable: false,
    configurable: true
})
// 
Object.setPrototypeOf(obj, { foo: 'bar', [Symbol('foo')]: 'bar' })

Этот объект охватывает разницу между различными методами, описанными ниже. Содержит строковое свойство и свойство Symbol, а также неперечислимое строковое свойство и свойство Symbol. Кроме того, объект-прототип сбрасывается, а объект-прототип содержит строковое свойство и свойство Symbol (оба перечислимы).

Показано нижеobjструктура данных.

image.png

Object.keys/values/entries

Все эти три метода используются для получения набора свойств объекта. Только,Object.keysиспользуется для получения коллекции имен атрибутов,Object.valuesОн используется для получения набора значений атрибутов,Object.entriesОн используется для получения атрибута ключ-значение для коллекции.

Object.keys(obj) // ["str"]
Object.values(obj) // ["This is a String property"]
Object.entries(obj) // [ ["str", "This is a String property"] ]

По результатам можно обнаружить, что помимо разницы в возвращаемых результатах, эти три свойства имеют одну общую черту:обрабатывать толькоobjсобственное перечислимое строковое свойство.

Object.getOwnPropertyNames(obj)

Как подсказывает название,Object.getOwnPropertyNames(obj)Получается набор свойств самого объекта. Но каковы конкретные свойства? Давайте взглянем:

Object.getOwnPropertyNames(obj) // ["str", "unenum"]

Из результатов,вернулсяobjВсе строковые свойства самого себя (включая неперечислимые), но не свойство Symbol.

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj)это сObject.getOwnPropertyNames(obj)Соответствующий,вернутьobjВсе свойства Symbol самого себя (включая неперечислимые).

Object.getOwnPropertySymbols(obj) // [Symbol(), Symbol(unenum)]

Из результатов видно, чтовернулсяobjВсе свойства Symbol самого себя (включая неперечислимые), но не строковые свойства.

Reflect.ownKeys(obj)

Reflect.ownKeys(obj)можно рассматривать какObject.getOwnPropertyNames(obj) + Object.getOwnPropertySymbols(obj),Прямо сейчасполучатьobjВся ваша собственная коллекция свойств.

Reflect.ownKeys(obj) // ["str", "unenum", Symbol(), Symbol(unenum)]

for-in

Давайте посмотрим на результат обхода объекта оператором for-in.

for (let prop in obj) {
    console.log(prop) // "str" -> "foo"
}

Видно, что:for-in Возвращает сам объект и все перечисляемые строковые свойства в его цепочке прототипов..

Заявление о вступлении сobj.hasOwnProperty(prop)метод вместе, вы можете получитьObject.keys/values/entriesТот же эффект, что и у метода — то есть возврат перечислимого строкового свойства самого объекта.

for (let prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log({ key: prop, value: obj[prop], pair: [prop, obj[prop]] })
  }
}
// {key: "str", value: "This is a String property", pair: ["str", "This is a String property"] }

Суммировать

метод возвращаемое значение Примечание
Object.keys/values/entries Собственные перечисляемые строковые свойства объекта
Object.getOwnPropertyNames(obj) Все перечисляемые и неперечисляемые строковые свойства самого объекта
Object.getOwnPropertySymbols(obj) Все перечисляемые и неперечислимые свойства Symbol самого объекта
Reflect.ownKeys(obj) Все перечисляемые, неперечисляемые строковые свойства, свойства Symbol самого объекта. ЭквивалентноObject.getOwnPropertyNames(obj) +  Object.getOwnPropertySymbols(obj) Эффект.
for (let prop in obj) {} Сам объект и все перечисляемые строковые свойства в его цепочке прототипов

(Конец текста)

коммерческое время(длительный эффект)

Моя хорошая знакомая владеет питомником, и я здесь, чтобы помочь ей распространить информацию. Теперь все кошки в питомникекукла кошка. Если вы также любите кошек и нуждаетесь в этом, вы можете также отсканировать ее [Xianyu] QR-код. Неважно, если вы не купите его, просто взгляните.

(над)

Категории