Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what is the way javascript traverses objects". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Prepare for

Let's prepare a test object, obj.

Code listing 1

Var notEnum = Symbol ("inheritance cannot be enumerated symbol"); var proto = {[Symbol ("inheritance enumerable symbol")]: "inheritance enumerable symbol", name: "inheritance enumerable attribute"}; / / non-enumerable attribute Object.defineProperty (proto, "age", {value: "inheritance non-enumerable attribute"}) / / cannot enumerate symbol attributes Object.defineProperty (proto, notEnum, {value: "inheriting non-enumerable symbol"}); var obj = {job1: "own enumerable attribute 1", job2: "own enumerable attribute 2", [Symbol ("own enumerable symbol")]: "own enumerable symbol"}; / / inherit Object.setPrototypeOf (obj, proto) / / non-enumerable attribute Object.defineProperty (obj, "address", {value: "own non-enumerable attribute"}); / / non-enumerable symbol attribute var ownNotEnum = Symbol ("own non-enumerable symbol"); Object.defineProperty (obj, ownNotEnum, {value: "own non-enumerable symbol"}); five weapons

For... In

This is a veteran of the object traversal world, and in this way you can traverse the object itself and all inherited enumerable properties (not including the Symbol type).

Code listing 2

For (var attr in obj) {console.log (attr, "= =", obj [attr]);} / * job1 = = own enumerable attribute 1job2 = = own enumerable attribute 2name = = inherit enumerable attribute * / Object.keys

Gets an array of all enumerable properties of the object itself (excluding the Symbol type)

Listing 3

Object.keys (obj) .map ((attr) = > {console.log (attr, "= =", obj [attr]);}); / * job1 = = own enumerable attribute 1job2 = = own enumerable property 2*/Object.getOwnPropertyNames

Gets an array of non-Symbol attribute names (including non-enumerable) of the object itself

Listing 4

Object.getOwnPropertyNames (obj) .map ((attr) = > {console.log (attr, "= =", obj [attr]);}); / * job1 = = own enumerable attribute 1job2 = = own enumerable attribute 2address = = own non-enumerable attribute * / Object.getOwnPropertySymbols

Gets an array of all attribute names of type Symbol (including non-enumerable) of the object itself

Listing 5

Object.getOwnPropertySymbols (obj) .map ((attr) = > {console.log (attr, "= =", obj [attr]);}); / * Symbol (own enumerable symbol) = = own enumerable symbolSymbol (own non-enumerable symbol) = = own non-enumerable symbol*/Reflect.ownKeys

Gets an array of property names of all of an object's own (including non-enumerable and Symbol types)

Code listing 6

Reflect.ownKeys (obj) .map ((attr) = > {console.log (attr, "= =", obj [attr]);}); / * job1 = = own enumerable attribute 1job2 = = own enumerable attribute 2address = = own non-enumerable attribute Symbol (own enumerable symbol)'= 'own enumerable symbol'Symbol (own non-enumerable symbol)' = 'own non-enumerable symbol'*/ summary

The instructions for the armory, choose the right weapon according to your needs.

The api operation itself cannot enumerate the property inheriting the property Symbol property for. In traverses yesnoyesnoObject.keys returns attribute array yesnononoObject.getOwnPropertyNames returns non-Symbol attribute array yesyesnonoObject.getOwnPropertySymbols returns Symbol attribute array yesyesnoyesReflect.ownKeys returns attribute array yesyesnoyes

The best of the five weapons is Reflect.ownKeys, whether Symbol or can not enumerate all, it is simply the combination of Object.getOwnPropertyNames and Object.getOwnPropertySymbols effect.

Expansion

Object.values

Gets an array of values of all enumerable properties of the object itself (excluding the Symbol type)

Code listing 7

Object.values (obj) .map ((val) = > {console.log (val);}); / * own enumerable attribute 1 has its own enumerable attribute 2*/Object.entries

Gets the key-value pair array of all enumerable properties of the object itself (excluding the Symbol type)

Code listing 7

Object.entries (obj) .map ((val) = > {console.log (val);}); / * ['job1',' own enumerable attribute 1'] ['job2',' own enumerable attribute 2'] * / hasOwnProperty

Detects whether an object's own property contains the specified property, and returns boolean

Referencing from MDN: JavaScript does not protect the hasOwnProperty property name, so it is possible for an object to have a property that uses this property name, so use the hasOwnProperty method on the prototype chain directly

Code listing 8

For (var attr in obj) {if (Object.prototype.hasOwnProperty.call (obj,attr)) {console.log ("own attribute::", attr);} else {console.log ("inheritance attribute::", attr);}} / * own attribute:: job1 own attribute:: job2 inheritance attribute:: name*/propertyIsEnumerable

Detects whether a property can be enumerated in the specified object and returns boolean

Listing 9

Reflect.ownKeys (obj) .map ((attr) = > {if (Object.prototype.propertyIsEnumerable.call (obj, attr)) {console.log ("enumerable attributes::", attr);} else {console.log ("non-enumerable attributes::", attr);}}) / * enumerable attribute:: job1 enumerable attribute:: job2 enumerable attribute:: address enumerable attribute:: Symbol (own enumerable symbol) non-enumerable attribute:: Symbol (own non-enumerable symbol) * / "what are the ways in which javascript traverses objects". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.