JS obtain object properties

Two types of attributes of the object
properties of the object are of two types: String and Symbol.

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"
// }

Because the object supports only the string and Symbol are two types of properties, if we use any other type of value as the attribute name, the last will be converted to a string. For example, here's [objProp], objProp is an object after it has been created with obj, then take a look, it becomes the string "[object Object]" a.

Get property methods
in order to better demonstrate, let's define an action 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' })

This object covering the distinction between the different methods say below. Symbol comprising a string property and property, but also has a string attribute and Symbol not enumerated attributes. Further, reset prototype object, the prototype object attribute contains a string and Symbol properties (are enumerable).

The following shows the data structure of obj.
Here Insert Picture Description
Object.keys / values / entries
These three methods are used to obtain the set of attributes on the objects. But, Object.keys is used to obtain a set of attribute name, Object.values is used to obtain the property value set, Object.entries is used to obtain key attribute - the value of the collection.

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

The results can be found, except for returning results, these three attributes has one thing in common: only obj process itself may be enumerated string properties.

Object.getOwnPropertyNames (obj)
As the name suggests, Object.getOwnPropertyNames (obj) is acquired set of properties of the object itself. But specifically what attributes it? We look:

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

From the results, to return all the attributes obj string itself (including not enumerable) , but does not include Symbol properties.

Object.getOwnPropertySymbols (obj)
Object.getOwnPropertySymbols (obj) is now Object.getOwnPropertyNames (obj) corresponding to return to their obj all of Symbol attributes (including non-enumerable).

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

From the results, to return all the attributes Symbol obj itself (including not enumerable) , but does not include character string attributes.

Reflect.ownKeys (obj)
Reflect.ownKeys (obj) can be seen as Object.getOwnPropertyNames (obj) + Object.getOwnPropertySymbols (obj ), i.e. obj obtain all their attributes.

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

for-in

Let's look at the results of for-in statement to traverse the object of why.

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

Thus: for-in returns all enumerable string property on the object itself and where the prototype chain.
The for-in statement with obj.hasOwnProperty (prop) for use with the method can be obtained with Object.keys / values / entries method same effect - i.e., returns the object itself may be enumerated string properties.

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"] }

to sum up

         方法 	                            返回值 	                                                         备注
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) {}     	   对象自身及所在原型链上的所有可枚举字符串属性



Published 47 original articles · won praise 0 · Views 325

Guess you like

Origin blog.csdn.net/weixin_45959525/article/details/104067601