Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js-JS Tutorial-php.cn

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

不言

Release： 2018-08-15 11:56:57

Original

60412 people have browsed it

This article brings you a summary of the methods of traversing objects (5 types) and traversing arrays (6 types) in js. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

1. Traversal object method

1.for...in
Traversal output are the properties of the object itself and the enumerable properties on the prototype chain (excluding Symbol properties). The final output of the properties on the prototype chain shows that the enumerable properties of the object itself are traversed first, and then

on the prototype chain is traversed.

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {};//在原型链上添加属性
Object.defineProperty(obj, 'country', {
  Enumerable: true //可枚举
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
for (var index in obj) {
  console.log('key=', index, 'value=', obj[index])
}

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

##2.Object.keys() Traversing the object returns an array containing the enumerable properties of the object itself (excluding the Symbol property).

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.keys(obj).forEach(function(index) {
  console.log(index, obj[index])
});

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

3.Objcet.getOwnPropertyNames() Outputs an array of enumerable and non-enumerable properties of the object itself, and does not output properties on the prototype chain

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.getOwnPropertyNames(obj).forEach(function(index) {
  console.log(index, obj[index])
});

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

##4.Reflect.ownKeys() Returns all properties of the object itself, regardless of whether the property name is a Symbol or a string, or whether it is enumerable.

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Reflect.ownKeys(obj).forEach(function(index) {
  console.log(index, obj[index])
});

Copy after login

Return results:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

5. _.keys Using the traversal method of the underscore plug-in can only traverse the enumerable attributes of the object itself

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
console.log(_.keys(obj));

Copy after login

Output results :

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js 2. Array traversal method

1.forEach

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
  console.log('value=', value, 'index=', index);
})

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

##2.map

can be traversed Each item is processed accordingly and an array composed of the results of each function call is returned.

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
  console.log(item, index);
})

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

3.for loop traversal

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

4.for...in

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
  console.log('index:', i, 'value:', arr[i])
}

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js

5.for...of

(es6)Only traverses the value, not the subscript, but can traverse the attributes of the Symbol data type. This method is used to traverse all data structures. The unified method

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
  console.log('value', value)
}

Copy after login

Output results:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js ##6.Use the underscore plug-in

eg:
var arr = ['a', 'b', 'c', 'd'];
var _ = require('underscore');
_.each(arr, function(value, index, arr) {
  console.log(value, index, arr)

})

Copy after login

Output result:

Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js Related recommendations:

JS traverse arrays and objects Detailed explanation of the difference and methods of recursively traversing objects, arrays, and properties

js code for traversing the properties of objects

Two ways to traverse arrays in js

The above is the detailed content of Summary of methods for traversing objects (5 types) and traversing arrays (6 types) in js. For more information, please follow other related articles on the PHP Chinese website!