JavaScript 递归计数：深度解析嵌套对象和数组的统计方法

理解嵌套数据结构的计数挑战

在 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"],
        }
    ]
};

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

    for (let key in obj) {
        // 确保只处理对象自身的属性，而不是原型链上的属性
        if (!obj.hasOwnProperty(key)) {
            continue;
        }

        // 如果当前属性值不是对象类型，则直接显示其键值对
        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] 确定是普通对象
                console.log(`${indent}Object : ${key} contains ${Object.keys(obj[key]).length} element(s)`);
            }

            // 1. 递增当前层级的直接对象/数组计数
            count++;

            // 2. 递归调用自身，处理嵌套的子对象或数组，并将返回的计数累加到当前 count
            count += countAndDisplay(obj[key], indent + "  ");

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

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

核心机制解析：count++ 与 count += recursiveFunction()

在上述 countAndDisplay 函数中，有两行关键代码用于计数，它们协同工作以实现多层级的累加：

1. count++; 当 obj[key] 被识别为一个对象或数组时，count++ 会立即将当前层级的 count 变量增加 1。这表示我们发现了一个直接嵌套在当前对象下的对象或数组。这个计数是针对当前循环迭代所检测到的“直接子项”。

2. count += countAndDisplay(obj[key], indent + " "); 这是递归的核心所在，也是理解的关键。

   • 递归调用： countAndDisplay(obj[key], indent + " ") 会对当前检测到的子对象或子数组 (obj[key]) 再次调用 countAndDisplay 函数。这意味着一个新的函数执行上下文被创建，它将从头开始遍历 obj[key] 的所有属性，并计算其中包含的对象和数组。
   • 返回值： 这个递归调用最终会返回一个值。这个值是 obj[key] 内部（包括其所有子层级）所包含的所有对象和数组的总数量。
   • 累加 (+=)： count += ... 操作符的作用是将递归调用返回的这个子总数，加到当前层级的 count 变量上。

工作原理示意：

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

想象一下一个俄罗斯套娃：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

• 当你打开最外层的套娃 (主对象) 时，你首先看到里面有一个直接的套娃 (比如 students 数组)。
  • 此时，count++ 记录下这个直接的套娃 (count = 1)。
  • 然后，你拿起这个 students 套娃，把它作为新的“最外层”套娃，开始检查它里面有什么 (countAndDisplay(students, ...) 被调用)。
    • 这个 students 套娃里面有多个小套娃 (比如 student1 对象，student2 对象)。
      • 每发现一个，它自己的 count++ 就会增加。
      • 如果 student1 里面还有更小的套娃 (比如 courses 数组)，它会再次递归调用，并返回 courses 内部的计数。
      • students 套娃会将其内部所有小套娃的计数以及它们各自内部的计数全部累加起来，然后将这个总数返回给它的调用者 (即最初的主对象)。
• 主对象接收到 students 套娃返回的总数后，通过 count += ... 将这个总数加到自己当前的 count 上。

这样，每一层递归都会将自己发现的直接子项数量，加上其所有子项（以及子项的子项...）返回的总数量，层层向上累加，最终最顶层的函数调用就会返回整个数据结构中所有对象和数组的总数。

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

如果只写 countAndDisplay(obj[key], indent + " ") 而没有 count +=，那么递归函数虽然会被执行，并计算出子层级的计数，但这个计算结果会被丢弃。它不会被加到当前层级的 count 变量中，因此最终返回的总数将只包含最顶层直接发现的对象和数组，而不会包含任何嵌套层级中的计数，从而无法得到预期的总计数。

注意事项与最佳实践

1. 处理 null 值： 在 JavaScript 中，typeof null 的结果是 'object'。为了避免将 null 错误地计为对象，应该在判断 typeof obj[key] === "object" 时，同时检查 obj[key] !== null。示例代码中已更新此判断。
2. 原型链属性： 在 for...in 循环中，为了避免遍历到对象原型链上的属性，建议使用 obj.hasOwnProperty(key) 进行过滤，确保只处理对象自身的属性。示例代码中已增加此过滤。
3. 栈溢出： 递归深度过大可能会导致栈溢出（Stack Overflow）错误。虽然对于常见的 JSON 结构，JavaScript 引擎通常能处理相当深的递归，但如果数据结构异常深（例如，数千层嵌套），则需要考虑非递归的迭代方法（如使用栈模拟递归）。
4. 清晰的调试输出： 示例代码中的 console.log(${indent}=> DEBUG TEST COUNT VALUE = ${count}); 是一个很好的调试实践，它能帮助你可视化递归过程中 count 变量的变化，从而更好地理解其累加机制。

总结

通过本文的详细解析，我们理解了在 JavaScript 中使用递归函数统计嵌套对象和数组数量的强大之处。核心在于 count++ 用于记录当前层级的直接子项，而 count += recursiveFunction() 则负责将子层级返回的总数累加到当前层级，通过这种层层累加的方式，最终实现对整个复杂数据结构的全面计数。掌握这种递归累加模式，对于处理各种树形或嵌套数据结构的问题都将大有裨益。

以上就是JavaScript 递归计数：深度解析嵌套对象和数组的统计方法的详细内容，更多请关注php中文网其它相关文章！