使用递归函数统计JavaScript嵌套对象与数组数量的教程

引言：处理复杂嵌套数据结构的需求

在JavaScript开发中，我们经常会遇到包含多层嵌套对象和数组的复杂数据结构。例如，一个表示产品目录、用户权限或学生信息的JSON对象，可能内部包含多个子对象或数组。有时，我们需要统计这些嵌套结构（无论是对象还是数组）的总数量，以便进行数据分析、结构验证或性能优化。手动遍历这些深层结构既繁琐又容易出错，而递归函数正是解决这类问题的优雅方案。

递归计数的核心机制

为了说明如何使用递归来统计嵌套对象和数组，我们来看一个具体的JavaScript函数示例。这个函数不仅能统计数量，还能在控制台输出其结构，帮助我们更好地理解数据层次。

示例数据结构

假设我们有以下一个包含学生和教师信息的复杂对象：

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对象中所有作为“对象”或“数组”的数据结构的总数量。

立即学习“Java免费学习笔记（深入）”；

递归计数函数 countAndDisplay

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

    for (let key in obj) {
        // 忽略非对象类型的值，直接输出
        if (typeof obj[key] !== "object" || obj[key] === null) { // 增加对 null 的判断，因为 typeof null 也是 "object"
            console.log(`${indent}${key} : ${obj[key]}`);
        } else {
            // 如果是对象或数组
            if (Array.isArray(obj[key])) {
                console.log(`${indent}Array : ${key} contains ${obj[key].length} element(s)`);
            } else { // 此时 obj[key] 必然是对象 (非null且非数组)
                console.log(`${indent}Object : ${key} contains ${Object.keys(obj[key]).length} element(s)`);
            }

            // 1. 计数当前遇到的对象或数组本身
            count++; 

            // 2. 递归调用，并累加子层级的计数
            // 这一行是理解递归累加的关键
            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`);

深入解析关键代码行

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

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

许多开发者可能会对这两行连续的count操作感到困惑。让我们逐一剖析。

1. count++;：计数当前层级的结构

当if (typeof obj[key] === "object" && obj[key] !== null)条件成立时，表示obj[key]是一个对象或数组（非null）。此时，我们首先执行count++;。

作用： 这一行代码的目的是将当前正在遍历的obj[key]这个结构本身计入总数。无论它是一个对象还是一个数组，它都是我们想要统计的一个目标。

例如，当我们第一次调用countAndDisplay(datas)时，它会遍历datas的属性。当遇到students属性时，students是一个数组，此时count会因为students这个数组本身而加1。同样，当遇到teachers属性时，teachers是一个数组，count也会加1。

CodiumAI

AI代码测试工具，在IDE中获得重要的测试建议

下载

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

在count++之后，我们紧接着调用了count += countAndDisplay(obj[key], indent + " ");。

作用： 这一行代码实现了两个核心功能：

• 递归调用： countAndDisplay(obj[key], indent + " ")会以obj[key]作为新的根对象，发起一次全新的函数调用。这意味着函数会深入到obj[key]内部，继续遍历其属性，并对其中的嵌套对象和数组进行计数。
• 结果累加： 递归调用的countAndDisplay(obj[key], ...)会返回它在其子树中找到的所有对象和数组的总数量。+=运算符的作用就是将这个子树返回的总数量，累加到当前层级的count变量中。

工作原理：

想象一下，countAndDisplay函数就像一个探险家。当它进入一个房间（当前对象）时，它会：

1. 清点房间里所有的“箱子”（对象或数组），每发现一个箱子，就把它计入自己的小本子（count++）。
2. 对于每一个箱子，它会派出一个小助手（递归调用）进入箱子内部，让小助手去清点箱子里的所有子箱子。
3. 当小助手完成清点并返回时，它会告诉探险家它在箱子里找到了多少个子箱子。探险家会将这个数字加到自己的小本子上（count += ...）。
4. 当探险家清点完当前房间及所有箱子里的内容后，它会把自己的小本子上的最终数字告诉它的上级（return count）。

为什么不能只调用 countAndDisplay(obj[key], ...)？

如果我们将代码改为 countAndDisplay(obj[key], indent + " "); 而不使用 +=，那么递归调用虽然会执行，并且它内部也会计算出子层级的数量并返回。但是，这个返回的数值会被直接丢弃，不会被加到当前层级的count变量中。因此，最终的totalCount将只包含最顶层直接子对象的计数，而不会包含深层嵌套的计数，导致结果不正确。+=确保了子树的计数能够“冒泡”到父级，最终汇聚成一个总数。

完整执行流程示例

让我们以datas对象为例，简单追踪一下count的累加过程：

1. countAndDisplay(datas) (初始调用)
   • count = 0
   • 遍历datas：
     • name (非对象)
     • content (非对象)
     • students (数组)
       • count 变为 1 (为students数组本身计数)
       • 递归调用 countAndDisplay(datas.students, " ")
         • countAndDisplay(datas.students, " ")
           • count = 0
           • 遍历datas.students (一个数组，包含两个对象)
             • datas.students[0] (对象)
               • count 变为 1 (为John对象计数)
               • 递归调用 countAndDisplay(datas.students[0], " ")
                 • countAndDisplay(datas.students[0], " ")
                   • count = 0
                   • 遍历John对象：
                     • name, age (非对象)
                     • courses (数组)
                       • count 变为 1 (为John的courses数组计数)
                       • 递归调用 countAndDisplay(John.courses, " ") (此调用返回0，因为courses数组内部没有对象或数组)
                       • count += 0; (count仍为1)
                   • 返回 1 (John对象内部有1个对象/数组)
                 • count += 1; (count变为 1 + 1 = 2) (累加John对象内部的计数)
             • datas.students[1] (对象)
               • count 变为 3 (为William对象计数，2 + 1 = 3)
               • 递归调用 countAndDisplay(datas.students[1], " ") (类似John，返回1)
               • count += 1; (count变为 3 + 1 = 4) (累加William对象内部的计数)
           • 返回 4 (students数组内部有4个对象/数组)
         • count += 4; (count变为 1 + 4 = 5) (累加students数组内部的计数)
     • teachers (数组)
       • count 变为 6 (为teachers数组本身计数，5 + 1 = 6)
       • 递归调用 countAndDisplay(datas.teachers, " ") (类似students，返回2)
       • count += 2; (count变为 6 + 2 = 8) (累加teachers数组内部的计数)
   • 返回 8

最终totalCount将是8。这个数字代表了datas对象中所有嵌套的对象和数组（students数组，John对象，John的courses数组，William对象，William的courses数组，teachers数组，Terry对象，Terry的courses数组）的总和。

注意事项与总结

1. 递归终止条件： 在这个例子中，递归的终止条件是当typeof obj[key]不是"object"（或者obj[key]是null）时，函数不再进行递归调用，而是直接处理非对象值。每个递归调用最终都会返回一个数字，这个数字会逐层向上累加。
2. null的特殊处理： typeof null 的结果是 "object"。在实际应用中，如果不想把null也计为对象，需要额外添加obj[key] !== null的判断，正如我们修改后的代码所示。
3. 性能考虑： 对于非常深层或庞大的嵌套结构，递归可能会导致栈溢出（Stack Overflow）错误。在处理极其复杂的数据时，可能需要考虑迭代（如使用队列进行广度优先遍历）或其他优化方案。
4. 清晰的命名： 保持函数名和变量名具有描述性，有助于理解递归逻辑。
5. 调试技巧： 像示例中那样，在递归函数内部添加console.log语句（尤其是在count变量变化的地方），可以帮助你追踪函数的执行路径和变量值的变化，从而更好地理解递归过程。

通过理解count++和count += recursiveCall()的协同作用，我们能够有效地利用递归函数来解决JavaScript中复杂嵌套数据结构的计数问题。这种模式不仅适用于计数，也适用于其他需要聚合子树结果的递归操作。