JavaScript object traversal

introduction

Traverse the object is a very common operation usually work almost daily operations, but traverse the object really is a very easy thing to it, obviously it is not.

Common way

for...in

for (variable in object) {...}

This is a very common usage, I believe that everyone can easily write. But there is a need to define the main section of this traversal

for ... in statement in any order, you walk through a proprietary, inheritance, enumerable, non-Symbol properties. For each different attributes, the statement will be executed.

A word to pull it.

Object own

If the object is a key owned then it can obj.hasOwnProperty (prop) to determine the return value

Inherited

This is also well understood, such as the following example

var parent = {a: 1};

function child() {
  this.b = 'b';
}

child.prototype = parent;

var obj = new child();
复制代码

At this time, since the prototype chain obj inherits the parent, so in fact there is a property of obj. In other words for in the properties on the object will traverse the prototype chain

Enumerable

What are the details can look at the enumerable this link is first divided into two properties of the object, attribute data such as a [ 'b'] = 1 , this is the attribute data, and the other is to visit properties, that is, we with the getter. Both properties have a characteristic [[Enumerable]], the Boolean value represents whether this property can be enumerated. If an object attribute is set to non-enumerable, for in it is not to be traversed. Enumerable of propertyIsEnumerable can be determined.

Non-Symbol

Symbol here is what not to proceed with said proposal does not look familiar ES6 symbol symbol can be used to make an object of private property, and if the property value is a symbol of the type is not so for in traversal.

summary

In summary you can clearly know what in the end properties of the object can be used to traverse out for in the pit and on the basis of points enumerable. We will traverse the array to use for in a natural, but if you thought about it, the array is an object, then why do we not time for in the length of the array, length as an attribute to traverse it, because that is the length property In fact, it is a non-enumerated attribute

Object.keys

Object.keys () method returns an array of a given object itself may be enumerated attributes, the attribute names in the array and the order used for ... in time sequence returns to loop through the same objects.

Precautions for in here and there is a big difference, is this the return of the object itself can enumerate the attributes of an array does not include inheritance

var parent = {a: 1};

function child() {
  this.b = 'b';
}

child.prototype = parent;

var obj = new child();
Object.keys(obj);  //['b']
复制代码

getOwnPropertyNames(obj)与getOwnPropertySymbols(obj)

getOwnPropertyNames a method returns all the property names specified by the object attribute itself (not including but not enumerated attribute as the attribute name Symbol value) of an array. getOwnPropertySymbols Symbol method returns an array of all the properties of a given object itself. Key words, all of its own. These two methods are not enumerable whether to limit property, but only to return itself, so Object.getOwnPropertyNames return value must be included in the return value Object.keys

Reflect.ownKeys(obj)

Reflect.ownKeys method returns an array of the target object's own properties bond. It is equivalent to the return value Object.getOwnPropertyNames (target) .concat (Object.getOwnPropertySymbols (target)).

for...of

Then talk about another traversal scheme. for of of is to create for in different iterations is for on objects (including Array, Map, Set, String, TypedArray, arguments objects, etc.) iteration of a loop, call a custom iteration hook, and for each different attributes the value of the statement is executed. Below or enter keywords to pull stage

Iterables

What is iterables? Can follow the object has become the iteration iterable agreement, the employer is saying that if there is an object [Symbol.iterator], then he is iterable. Symbol.iterator is es6 provides a built-in Symbol value. iterator simply is a there is a next function that the implementation of the return value must be an object, the object has two properties marked done iteration is completed, value mark this iteration of the resulting value.

How to traverse the object for ... of

That sum to you to traverse the object on it to add a Symbol.iterator

Expand the operator

In addition to the above said, would like to add one kind of traversal of the scene, the object of expanding operator, then the object is to expand the operator exactly what attributes can be assigned. Own, enumerable. You can see two examples

var obj = {}
Object.defineProperty(obj, 'key', {
	enumerable: false,
  	configurable: true,
  	writable: true,
  value: "a"
});
b = {...obj};
console.log(b); //{}
复制代码

Can be seen in the deconstruction of the assignment can not be enumerated attribute is not being assigned.

var parent = {a: 1};

function child() {
  this.b = 'b';
}

child.prototype = parent;

var obj = new child();
var b = {...obj};  
console.log(b);//{b: 'b'}
复制代码

Can be seen in the deconstruction of the inherited property is the assignment can not be assigned.

to sum up

The method of object traversing many, but to traverse to select the most appropriate program specific application scenario according to the characteristics and properties of the object, as well as compatibility.