动态遍历未知深度键的对象

Question

I have kind of a strange question -- possibly a stupid question -- that requires some explanation, so please bear with me. Basically, I'm wondering if there is a way to traverse an object of unknown depth in JavaScript without using recursion.

For example, let's say I have an object of unknown depth. It can look like this:

let obj_depth2 = {
  male:
    { short: 0, tall: 0 },
  female:
    { short: 0, tall: 0 }
  }

or maybe like this:

let obj_depth3 = {
  male: {
    short:
      { basketball: 0, soccer: 0 },
    tall:
      { basketball: 0, soccer: 0 }
  },
  female: {
    short:
      { basketball: 0, soccer: 0 },
    tall:
      { basketball: 0, soccer: 0 }
  }
}

The obj may be deeper as well. I will not know its depth ahead of time.

Let's assume further that I will have an arr that looks something like this, and will match the depth of the obj in length.

let arr_depth2 = ["male", "short"];

or

let arr_depth3 = ["male", "tall", "basketball"];

I will have a loop in which I generate, say, 1,000, of these arr s that I will then use to add 1 to the obj of unknown depth. All the arr s will be the same length (2 or 3, or more) and will always match the depth of the obj . But the depth will change and I want to write a single function to cover all situations.

To be clear, I will NOT have a situation where I have an obj of depth 2 and an arr of length 3. The depths and lengths will always match for all 1,000 iterations at a time.

My question is this. Is there a way to traverse the obj to add 1 to the value of the "deepest" key-value pair I need to reach without using recursion?

Can I build something like this?

obj["male"]["short"] += 1;

Although I know I can use recursion to reach the bottom depth of the obj , add 1 to the proper value , and return it, rebuilding the obj as the recursive function continues to return , this means I would have to rebuild the obj for every single value every time and override the obj I would have just built on the previous iteration, just to add 1 to one part of the obj . It just seems bad, but maybe it doesn't matter.

Thank you in advance.

Answer 1

You can do this with .reduce() to traverse down your object, where the accumulator keeps track of your current object in your traversal. When your reduce is complete, it will have the inner-most nested object in your path, which you can then use the last element in your array as a key to modify the value. As you said, there is no need for recursion if you're happy with simply mutating the original object:

 const obj = {male:{short:{basketball:0,soccer:0},tall:{basketball:0,soccer:0}},female:{short:{basketball:0,soccer:0},tall:{basketball:0,soccer:0}}} const arr = ["male", "tall", "basketball"]; const modify = (obj, [...keys]) => { const last_key = keys.pop(); const last_obj = keys.reduce((o, k) => o[k], obj); last_obj[last_key] += 1; } modify(obj, arr); console.log(obj);

Answer 2

If you're trying to modify the object in place, you can essentially use a pointer to traverse the object to the point you get to the last key and then set it.

 const obj_depth3 = { male: { short: { basketball: 0, soccer: 0 }, tall: { basketball: 0, soccer: 0 } }, female: { short: { basketball: 0, soccer: 0 }, tall: { basketball: 0, soccer: 0 } } } const addOneTo = (obj, path) => { const finalProp = path.pop(); const pointer = path.reduce((pointer, key) => pointer[key], obj); pointer[finalProp]++; } addOneTo(obj_depth3, ["male", "short", "soccer"]) console.log(obj_depth3);

Answer 3

You can safely access a nested object in your described case using the reduce function:

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

Then you can access your desired ['male']['short'] object in a similar fashion:

let shortMale = getNestedObject(obj_depth3, ['male', 'short'])

And you can perform your desired operation on the object:

shortMale.basketball += 1

For more information on the getNestedObject function, see: https://hackernoon.com/accessing-nested-objects-in-javascript-f02f1bd6387f

Answer 4

Here's a formula to get all parts of an unknown sized thing once u can call the folder name in JavaScript Object.entries(yourObject) This returns an array of all the data of your object so you can easily iterate through it. I would return your data in the example to show you how the Object.entries works

 const obj_depth3 = { male: { short: { basketball: 0, soccer: 0 }, tall: { basketball: 0, soccer: 0 } }, female: { short: { basketball: 0, soccer: 0 }, tall: { basketball: 0, soccer: 0 } } } console.log(Object.entries(obj_depth3)); //you might still want to use another console like inspect element's own to see how the array works, but it has all the depth and stuff :)