javascript Five Ways to Traverse Objects Example Code

Directory preparation 5 weapons for … in
Object.keys
Object.getOwnPropertyNames
Object.getOwnPropertySymbols
Reflect.ownKeys
Summarize Expand Object.values
Object.entries
hasOwnProperty
propertyIsEnumerable
Summarize

Prepare

First, prepare a test object obj.

Code Listing 1

var notEnum = Symbol(" Inheritance is not enumerable symbol");
var proto = {
    [Symbol(" Inheritance enumerable symbol")]: " Inheritance enumerable symbol",
    name: " Inheriting enumerable properties "
};
//  Non-enumerable properties 
Object.defineProperty(proto, "age", {
    value: " Inheriting non-enumerable properties "
});
//  Non-enumerable symbol Attribute 
Object.defineProperty(proto, notEnum, {
    value: " Inheritance is not enumerable symbol"
});

var obj = {
    job1: " Own enumerable properties 1",
    job2: " Own enumerable properties 2",
    [Symbol(" Own enumerable symbol")]: " Own enumerable symbol"
};
//  Inheritance 
Object.setPrototypeOf(obj, proto);
//  Non-enumerable properties 
Object.defineProperty(obj, "address", {
    value: " Own non-enumerable properties "
});
//  Non-enumerable symbol Attribute 
var ownNotEnum = Symbol(" Own non-enumerable symbol");
Object.defineProperty(obj, ownNotEnum, {
    value: " Own non-enumerable symbol"
});

5 weapons

for … in

This is a veteran of object traversal, which allows you to traverse the object itself and all the enumerable properties it inherits (excluding Symbol types).

Listing 2

for(var attr in obj){
    console.log(attr,"==",obj[attr]);
}
/*
job1 ==  Own enumerable properties 1
job2 ==  Own enumerable properties 2
name ==  Inheriting enumerable properties 
*/

Object.keys

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

Listing 3

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

Object.getOwnPropertyNames

Gets an array of all property names of non-Symbol types (including non-enumerable ones) of the object itself

Listing 4

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

Object.getOwnPropertySymbols

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

Code Listing 5

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

Reflect.ownKeys

Gets an array of all (including non-enumerable and Symbol types) attribute names of 1 object itself

Listing 6

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

Summarize

The manual of the arsenal, choose the right weapon according to your needs.

api	操作	自身属性	不可枚举属性	继承属性	Symbol属性
for…in	遍历	yes	no	yes	no
Object.keys	返回属性数组	yes	no	no	no
Object.getOwnPropertyNames	返回非Symbol属性数组	yes	yes	no	no
Object.getOwnPropertySymbols	返回Symbol属性数组	yes	yes	no	yes
Reflect.ownKeys	返回属性数组	yes	yes	no	yes

The best of the five weapons is Reflect. ownKeys. Whether Symbol or non-enumerable, it is simply the combination of Object. getOwnPropertyNames and Object. getOwnPropertySymbols.

Expand

Object.values

Gets an array of the values of all enumerable properties of the object itself, excluding Symbol types

Listing 7

Object.values(obj).map((val)=>{
    console.log(val);
});
/*
 Own enumerable properties 1
 Own enumerable properties 2
*/

Object.entries

Gets an array of key-value pairs for all enumerable properties of the object itself, excluding Symbol types

Listing 7

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

hasOwnProperty

Detects whether the specified attribute is contained in the attribute of 1 object itself, and returns boolean

Referenced from MDN: JavaScript does not protect the hasOwnProperty attribute name, so it is possible for an object to have an attribute with this attribute name, so use the hasOwnProperty method on the prototype chain directly

Listing 8

for(var attr in obj){
    if(Object.prototype.hasOwnProperty.call(obj,attr)){
        console.log(" Own attributes:: ",attr);
    }else{
        console.log(" Inherited properties: ",attr);
    }
}
/*
 Own attributes::  job1
 Own attributes::  job2
 Inherited properties:  name
*/

propertyIsEnumerable

Detects whether 1 attribute 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 properties: ", attr);
    } else {
        console.log(" Non-enumerable properties:: ", attr);
    }
});
/*
 Enumerable properties:  job1
 Enumerable properties:  job2
 Non-enumerable properties::  address
 Enumerable properties:  Symbol( Own enumerable symbol)
 Non-enumerable properties::  Symbol( Own non-enumerable symbol)
*/

Reference

MDN Object

Summarize