递归地遍历对象(树)

是否有一种方法(在 jQuery 或 JavaScript 中)循环遍历每个对象及其子女和孙辈等?

如果是的话... 我也可以读他们的名字吗?

例如:

foo :{
bar:'',
child:{
grand:{
greatgrand: {
//and so on
}
}
}
}

所以循环应该是这样的。

loop start
if(nameof == 'child'){
//do something
}
if(nameof == 'bar'){
//do something
}
if(nameof =='grand'){
//do something
}
loop end
123244 次浏览

You're looking for the for...in loop:

for (var key in foo)
{
if (key == "child")
// do something...
}

Be aware that for...in loops will iterate over any enumerable properties, including those that are added to the prototype of an object. To avoid acting on these properties, you can use the hasOwnProperty method to check to see if the property belongs only to that object:

for (var key in foo)
{
if (!foo.hasOwnProperty(key))
continue;       // skip this property
if (key == "child")
// do something...
}

Performing the loop recursively can be as simple as writing a recursive function:

// This function handles arrays and objects
function eachRecursive(obj)
{
for (var k in obj)
{
if (typeof obj[k] == "object" && obj[k] !== null)
eachRecursive(obj[k]);
else
// do something...
}
}

If you want to get back a tree of relationships you can use Object.keys recursively.

function paths(item) {
function iter(r, p) {
var keys = Object.keys(r);
if (keys.length) {
return keys.forEach(x => iter(r[x], p.concat(x)));
}
result.push(p);
}
var result = [];
iter(item, []);
return result;
}


var data = {
foo: {
bar: '',
child: {
grand: {
greatgrand: {}
}
}
}
};


console.log(paths(data));

This can be extended to search for values within an object structure that match a function:

function objectSearch(rootItem, matcher) {
const visited = [];
const paths = [];
function iterate(item, path) {
if (visited.includes(item)) {
return;
}
visited.push(item);
if (typeof item === "object" && item !== null) {
var keys = Object.keys(item);
if (keys.length) {
return keys.forEach(key => iterate(item[key], path.concat(key)));
}
}
if (matcher(item)) {
paths.push(path);
}
}
iterate(rootItem, []);
return paths;
}
function searchForNaNs(rootItem) {
return objectSearch(rootItem, (v) => Object.is(NaN, v));
}
var banana = {
foo: {
bar: "",
child: {
grand: {
greatgrand: {},
nanan: "NaN",
nan: NaN,
},
},
},
};
console.log("There's a NaN at", searchForNaNs(banana)[0].join("."), "in this object:", banana);

You can have a recursive function with a parse function built within it.

function parseObjectProperties (obj, parse) {
for (var k in obj) {
if (typeof obj[k] === 'object' && obj[k] !== null) {
parseObjectProperties(obj[k], parse)
} else if (obj.hasOwnProperty(k)) {
parse(k, obj[k])
}
}
}

I use the foo object of the OP, here how it works

var foo = {
bar:'a',
child:{
b: 'b',
grand:{
greatgrand: {
c:'c'
}
}
}
}


// use this recursive function with a parse function
function parseObjectProperties (obj, parse) {
for (var k in obj) {
if (typeof obj[k] === 'object' && obj[k] !== null) {
parseObjectProperties(obj[k], parse)
} else if (obj.hasOwnProperty(k)) {
parse(k, obj[k])
}
}
}
//***


// then apply to the property the task you want, in this case just console
parseObjectProperties(foo, function(k, prop) {
console.log(k + ': ' + prop)
})

Consider using object-scan. It's powerful for data processing once you wrap your head around it.

One great thing is that the items are traversed in "delete safe" order. So if you delete one, it won't mess up the loop. And you have access to lots of other properties like parents etc.

// const objectScan = require('object-scan');


const obj = { foo: { bar: '', child: { grand: { greatgrand: { /* and so on */ } } } } };


objectScan(['**'], {
filterFn: ({ property }) => {
console.log(property);
}
})(obj);
// => greatgrand
// => grand
// => child
// => bar
// => foo
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan@13.8.0"></script>

Disclaimer: I'm the author of object-scan

I would recommend using sindresorhus's map-obj & filter-obj utilities ...