JS method to get object key for in, Object.keys, Object.getOwnPropertyNames, Reflect.ownKeys comparison

Table of contents

1. Preliminary summary

1. Add attributes or methods to an object, generally do this

2. Use Object.defineproperty to add properties or methods

2. Comparison of methods for obtaining the key of an object

1.for in

2.Object.keys

3.Object.getOwnPropertyNames

4.Reflect.ownKeys

5.Object.getOwnPropertySymbols

Summarize


1. Preliminary summary

Let’s take a look at Object.defineproperty first.

Object.defineproperty is to directly define a new property on an object, or modify an existing property.

1. Add attributes or methods to an object, generally do this

let params = {};
//新增name属性
params.name="CSDN";
//新增userAction方法
params.userAction=function() {
    console.log("这是新添加的方法");
};
console.log(parmas);
//结果打印{name: 'CSDN', userAction: ƒ}

2. Use Object.defineproperty to add properties or methods

Object.defineproperty(obj, prop, desc  )   

 Parameter 1: obj The current object whose properties need to be defined

 Parameter 2: prop The name of the property that currently needs to be defined

 Parameter 3: desc descriptor is generally an object

let params = {};
Object.defineProperty(params,'name',{
    value:'CSDN'
});
Object.defineProperty(params,'userAction',{
    value:function() {
        console.log("这是新添加的方法");
    }
});
//其它属性如下,此处不做分析
//writable:是否可重写
//value:当前值
//get:读取时内部调用的函数
//set:写入时内部调用的函数
//enumerable:是否可枚举
//configurable:是否可再次修改配置项

2. Comparison of methods for obtaining the key of an object

We define two objects parent and children.

Defined in parent:

parentName: enumerable property

parentAge: non-enumerable property

parentSex attribute

parent's symbol attribute

//定义parent对象
let parent = {};
Object.defineProperty(parent,'parentName',{
    value:'这是parentName',
    enumerable:true,//可枚举
});
Object.defineProperty(parent,'parentAge',{
    value:'这是parentAge',
    enumerable:false,//不可枚举
});
Object.defineProperty(parent,'parentSex',{
    value:Symbol("男性"),
    enumerable:true,
});
let parentIdCard = Symbol('身份证号');
parent[parentIdCard] = parentIdCard;
console.log(parent);


parent prints the results:

 

defined in childeren:

childrenName: enumerable property

childrenAge: non-enumerable property

childrenSex property

symbol attribute of children

//定义children对象
let children = {};
Object.defineProperty(children,'childrenName',{
    value:'这是childrenName',
    enumerable:true,//可枚举
});
Object.defineProperty(children,'childrenName',{
    value:'这是childrenName',
    enumerable:false,//不可枚举
});
Object.defineProperty(children,'childrenSex',{
    value:Symbol("男性"),
    enumerable:true,
});
let childrenIdCard = Symbol('身份证号');
children[childrenIdCard] = childrenIdCard;
console.log(children);

children.__proto__ = parent;

children print results:

 children inherit parent;

 1.for in

for(let p in children) {

        console.log(p);

}

The result is as follows:

 It can be seen that for in traverses all enumerable properties of itself and inheritance; it does not include non-enumerable and Symbol properties.

2.Object.keys

console.log(Object.keys(children));

The result is as follows:

It can be seen that Object.keys will return an array after execution, and only traverses its own enumerable properties; excluding non-enumerable and Symbol properties

3.Object.getOwnPropertyNames

console.log(Object.getOwnPropertyNames(children));

The result is as follows:

 It can be seen that Object.getOwnPropertyNames returns an array after execution, traversing its own enumerable properties and non-enumerable properties; it does not include the Symbol property

4.Reflect.ownKeys

console.log(Reflect.ownKeys(children));

 It can be seen that Reflect.ownKeys returns an array after execution, traversing all its own attributes, including enumerable, non-enumerable, and Symbol attributes.

5.Object.getOwnPropertySymbols

console.log(Object.getOwnPropertySymbols(children));

The result is as follows:

 

It can be seen that Object.getOwnPropertySymbols returns an array after execution, traversing all the Symbol properties of the object itself


Summarize

for in: Traverse all its own and inherited enumerable properties. Excludes non-enumerable properties and Symbol properties

Object.keys(): Returns an array; gets its own (without inheritance) enumerable properties. Excludes non-enumerable properties and Symbol properties

Object.getOwnPropertyNames: Returns an array; gets all its own (excluding inheritance) property names, including non-enumerable properties, excluding Symbol properties

Object.getOwnPropertySymbols: Returns an array that traverses all Symbol properties of the object itself

Reflect.ownKeys: Returns an array; obtains all property names of itself (excluding inheritance), including non-enumerable properties and Symbol. In fact, it is the sum of Object.getOwnPropertyNames and Object.getOwnPropertySymbols

Only for in contains inherited enumerable properties;

Only Object.getOwnPropertySymbols and Reflect.ownKeys can contain Symbol properties;

Only Object.getOwnPropertyNames and Reflect.ownKeys contain non-enumerable properties;

Guess you like

Origin blog.csdn.net/zuhaonuli/article/details/128645197