如何在含复杂嵌套数组的JavaScript对象中查找元素

Hey there! I totally get the pain of dealing with nested loops for deep data structures—they get messy fast and don't scale if your nesting depth changes later. Let's break down how to replace those four loops with clean, reusable code that works for any level of nesting.

First, let's assume a sample nested structure similar to what you're working with (you can adjust the children key if your structure uses something else like items):

const nestedData = [
  {
    id: 1,
    name: "Level 1 Item",
    children: [
      {
        id: 11,
        name: "Level 2 Item",
        children: [
          { id: 111, name: "Target Element", value: "foo" },
          { id: 112, name: "Level 3 Item" }
        ]
      }
    ]
  },
  {
    id: 2,
    name: "Another Level 1 Item",
    children: [{ id: 21, name: "Level 2 Item" }]
  }
];

1. Recursive Function to Find a Single Target Element #

If you just need to find the first matching element (like a nested version of Array.find()), a recursive function is perfect. It checks each element, then dives into its nested children if needed:

function findNestedElement(arr, matchCondition) {
  for (const item of arr) {
    // Check if current element matches your criteria
    if (matchCondition(item)) {
      return item;
    }
    // Recursively check children if they exist
    if (item.children && Array.isArray(item.children)) {
      const foundChild = findNestedElement(item.children, matchCondition);
      if (foundChild) return foundChild;
    }
  }
  // Return null if no match is found
  return null;
}

// Usage: Find the element with name "Target Element"
const target = findNestedElement(nestedData, item => item.name === "Target Element");
console.log(target); // { id: 111, name: "Target Element", value: "foo" }

2. Recursive Filter for All Matching Elements #

If you need to collect all elements that match your criteria (like a nested Array.filter()), use this recursive function that accumulates results:

function filterNestedElements(arr, matchCondition) {
  let matches = [];
  for (const item of arr) {
    // Add current item if it matches
    if (matchCondition(item)) {
      matches.push(item);
    }
    // Merge results from nested children
    if (item.children && Array.isArray(item.children)) {
      matches = matches.concat(filterNestedElements(item.children, matchCondition));
    }
  }
  return matches;
}

// Usage: Find all elements with an id greater than 100
const allMatches = filterNestedElements(nestedData, item => item.id > 100);
console.log(allMatches); // [ { id: 111, ... }, { id: 112, ... } ]

Bonus: Functional Style with flatMap #

For a more concise, functional approach, use Array.flatMap() to handle the flattening of nested results automatically:

const filterNestedElements = (arr, matchCondition) =>
  arr.flatMap(item => [
    // Include current item if it matches
    ...(matchCondition(item) ? [item] : []),
    // Recursively process children and include their matches
    ...(item.children ? filterNestedElements(item.children, matchCondition) : [])
  ]);

3. Iterative Approach (Avoid Stack Overflow for Deep Nesting) #

If your data has extremely deep nesting (hundreds/thousands of levels), recursion might hit a stack overflow. In that case, use an iterative approach with a stack to simulate recursion:

function findNestedElementIterative(arr, matchCondition) {
  const stack = [...arr];
  while (stack.length > 0) {
    const item = stack.pop();
    if (matchCondition(item)) {
      return item;
    }
    // Push children to the stack (reverse to maintain original order)
    if (item.children && Array.isArray(item.children)) {
      stack.push(...[...item.children].reverse());
    }
  }
  return null;
}

Why This Is Better Than Nested Loops #

• Scalability: Works for any number of nesting levels—no need to add/remove loops if your data structure changes.
• Reusability: You can reuse these functions across your codebase with different match conditions.
• Readability: The intent is clear (find/filter nested elements) instead of a jumble of nested for loops.

内容的提问来源于stack exchange，提问作者Angus Comber