JavaScript递归遍历嵌套对象数组方法

本文深入解析了JavaScript中利用递归函数遍历嵌套对象数组的方法，并准确统计对象和数组的总数。通过示例代码，详细阐述了`count++`和`count += recursiveFunction()`两种计数方式在递归调用中的作用与协同，揭示了如何累加子结构返回的计数来实现整体统计。掌握此方法能有效解决复杂数据结构遍历问题，例如处理包含多层嵌套的用户数据、订单信息或文件系统等，为开发者提供高效且优雅的解决方案。同时，文章还强调了处理`null`值、避免循环引用以及优化性能等注意事项，助力开发者更好地理解和应用递归。

本文详细阐述了如何利用 JavaScript 递归函数遍历复杂嵌套对象，并准确统计其中包含的对象和数组总数。通过一个具体的示例代码，深入解析了递归调用中 count++ 和 count += recursiveFunction() 两种计数方式的原理与协同作用，揭示了如何通过累加子结构返回的计数来实现整体统计，从而帮助开发者更好地理解和应用递归解决数据结构遍历问题。

1. 引言：处理复杂嵌套数据结构

在 JavaScript 开发中，我们经常会遇到包含多层嵌套对象和数组的复杂数据结构。例如，一个表示用户、订单或文件系统的对象，其内部可能包含其他对象或数组。对这类数据进行遍历、查找或统计时，传统迭代方法往往难以应对，而递归则是一种优雅且高效的解决方案。

本教程将以一个具体场景为例，演示如何编写一个递归函数来统计一个主对象中所有嵌套的对象和数组的总数量，并深入解析递归过程中计数的累加机制。

2. 示例数据结构与初步需求

假设我们有以下一个 datas 对象，它包含了字符串、数字、以及嵌套的数组和对象：

let datas = {
    name: "Main datas list",
    content: "List of Students and teachers",
    students: [
        {
            name: "John",
            age: 23,
            courses: ["Mathematics", "Computer sciences", "Statistics"]
        },
        {
            name: "William",
            age: 22,
            courses: ["Mathematics", "Computer sciences", "Statistics", "Algorithms"]
        }
    ],
    teachers: [
        {
            name: "Terry",
            courses: ["Mathematics", "Physics"],
        }
    ]
};

我们的目标是编写一个函数，能够遍历 datas 对象及其所有嵌套层级，并统计其中所有类型为“对象”或“数组”的元素的总数。

3. 递归函数的实现与核心逻辑

为了实现上述目标，我们可以设计一个名为 countAndDisplay 的递归函数。该函数不仅会统计数量，还会打印出遍历过程中的结构信息。

function countAndDisplay(obj, indent = "") {
    let count = 0; // 初始化当前层级的计数器

    for (let key in obj) {
        // 1. 处理非对象类型（基本类型值）
        if (typeof obj[key] !== "object" || obj[key] === null) { // 额外处理null，因为typeof null 也是 "object"
            console.log(`${indent}${key} : ${obj[key]}`);
        } else { // 2. 处理对象或数组类型
            if (Array.isArray(obj[key])) {
                console.log(`${indent}Array : ${key} contains ${obj[key].length} element(s)`);
            } else { // 明确是普通对象
                console.log(`${indent}Object : ${key} contains ${Object.keys(obj[key]).length} element(s)`);
            }

            // 3. 核心计数逻辑：当前对象/数组计入总数
            count++; 

            // 4. 递归调用：累加子层级返回的计数
            count += countAndDisplay(obj[key], indent + "  ");

            // 调试输出，用于理解计数过程
            console.log(`${indent}=> DEBUG TEST COUNT VALUE = ${count}`); 
        }
    }
    return count; // 返回当前层级及其子层级的总计数
}

let totalCount = countAndDisplay(datas);
console.log(`datas contains ${totalCount} Objects or Arrays`);

4. 深入解析计数机制：count++ 与 count += recursiveCall()

在上述 countAndDisplay 函数中，有两行代码是理解递归计数累加的关键：

1. count++;
2. count += countAndDisplay(obj[key], indent + " ");

让我们逐一剖析它们的作用。

4.1 count++：统计当前层级的对象/数组

当 for...in 循环遍历到 obj 的一个属性 key，并且 obj[key] 是一个对象或数组时，count++ 会立即执行。这行代码的目的是将当前被检查到的这个对象或数组（即 obj[key] 本身）计入总数。它表示“我刚刚发现了一个符合条件的对象或数组，所以总数加一”。

例如，当函数处理 datas 对象时，它会发现 students 属性是一个数组，此时 count 会加 1。接着它会发现 teachers 属性是一个数组，count 再次加 1。

4.2 count += countAndDisplay(obj[key], indent + " ")：累加子层级的计数

这行代码是递归的核心，它做了两件事：

1. 递归调用: countAndDisplay(obj[key], indent + " ") 会对当前找到的对象或数组 obj[key] 进行一次新的函数调用。这意味着，它会以 obj[key] 作为新的“主对象”，重新开始遍历和计数其内部的所有嵌套对象和数组。
2. 累加返回值: += 运算符至关重要。它将递归调用 countAndDisplay(obj[key], ...) 的返回值添加到当前的 count 变量中。

理解这一点需要深入思考递归的“回溯”过程：

• 当 countAndDisplay 函数被调用时，它会初始化自己的 count 为 0。
• 它遍历其参数 obj 的属性。
• 每当遇到一个嵌套的对象或数组时，它首先用 count++ 计入自身。
• 然后，它会调用自身（递归），处理这个嵌套对象/数组的内部结构。
• 这个内部的递归调用会执行相同的逻辑，最终也会返回一个 count 值，这个值代表了该嵌套对象/数组内部所有符合条件的对象和数组的总数。
• 当内部递归调用返回时，+= 操作符将这个返回的子计数添加到父层级的 count 中。

示例流程：

1. countAndDisplay(datas) 被调用。
   • count 初始化为 0。
   • 遇到 students 数组：
     • count 变为 1 (students 自身)。
     • 递归调用 countAndDisplay(datas.students, " ")。
       • count 初始化为 0。
       • 遇到 datas.students[0] 对象（John）：
         • count 变为 1 (datas.students[0] 自身)。
         • 递归调用 countAndDisplay(datas.students[0], " ")。
           • count 初始化为 0。
           • 遇到 courses 数组：
             • count 变为 1 (courses 自身)。
             • 递归调用 countAndDisplay(datas.students[0].courses, " ")。
               • count 初始化为 0。
               • courses 数组内没有对象或数组，循环结束。
               • 返回 0。
             • count 变为 1 + 0 = 1。
           • datas.students[0] 内没有其他对象或数组，循环结束。
           • 返回 1。
         • count 变为 1 + 1 = 2。
       • 遇到 datas.students[1] 对象（William）：
         • count 变为 2 + 1 = 3 (datas.students[1] 自身)。
         • 递归调用 countAndDisplay(datas.students[1], " ")。
           • count 初始化为 0。
           • 遇到 courses 数组：
             • count 变为 1 (courses 自身)。
             • 递归调用 countAndDisplay(datas.students[1].courses, " ")。
               • 返回 0。
             • count 变为 1 + 0 = 1。
           • 返回 1。
         • count 变为 3 + 1 = 4。
       • datas.students 数组内没有其他对象或数组，循环结束。
       • 返回 4。
     • count 变为 1 + 4 = 5。
   • 遇到 teachers 数组：
     • count 变为 5 + 1 = 6 (teachers 自身)。
     • 递归调用 countAndDisplay(datas.teachers, " ")。
       • count 初始化为 0。
       • 遇到 datas.teachers[0] 对象（Terry）：
         • count 变为 1 (datas.teachers[0] 自身)。
         • 递归调用 countAndDisplay(datas.teachers[0], " ")。
           • count 初始化为 0。
           • 遇到 courses 数组：
             • count 变为 1 (courses 自身)。
             • 递归调用 countAndDisplay(datas.teachers[0].courses, " ")。
               • 返回 0。
             • count 变为 1 + 0 = 1。
           • 返回 1。
         • count 变为 1 + 1 = 2。
       • 返回 2。
     • count 变为 6 + 2 = 8。
   • datas 对象内没有其他对象或数组，循环结束。
   • 返回 8。

最终，totalCount 将得到 8。

4.3 为什么不能简单地调用 countAndDisplay(obj[key], ...)？

如果将 count += countAndDisplay(obj[key], indent + " ") 改为简单的函数调用 countAndDisplay(obj[key], indent + " ")，那么递归函数虽然会执行，但其返回值会被丢弃。这意味着子层级计算出的对象和数组数量将无法被累加到父层级的 count 变量中。最终，最外层的 countAndDisplay(datas) 函数将只统计其直接子属性中的对象/数组，而不会包含更深层嵌套的结构，导致结果不准确。

5. 注意事项与总结

• null 的处理: 在 JavaScript 中，typeof null 的结果是 "object"。为了避免将 null 计入对象或数组，我们应在判断条件中明确排除 null，例如 typeof obj[key] !== "object" || obj[key] === null。
• 循环引用: 如果数据结构中存在循环引用（即对象 A 引用了对象 B，而对象 B 又引用了对象 A），不加处理的递归会导致无限循环和栈溢出。在生产环境中，通常需要添加一个已访问对象的集合来避免重复处理。
• 性能: 对于极其庞大和深层嵌套的数据结构，递归可能会导致栈溢出。在这些情况下，可以考虑使用迭代方式（如广度优先或深度优先遍历）配合栈或队列来模拟递归。

通过本教程，我们深入理解了如何利用 JavaScript 递归函数来遍历和统计复杂数据结构中的嵌套对象和数组。核心在于 count++ 用于计入当前发现的结构，而 count += recursiveCall() 则负责累加所有子层级返回的计数。掌握这一模式对于处理树形或图状数据结构至关重要。

今天关于《JavaScript递归遍历嵌套对象数组方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！