最近前端是不是好起来了？笛卡尔积是啥？

白哥学前端
1,972 阅读5分钟

最近好像前端童稚们面试多起来了啊，有没有人讲两句？说什么今年前端缺口十几万人？

1. 问题分析

假设有一个二维数组 arr ，现在要生成一个数组，包含所有可能的组合，其中每个组合由 arr 的每个子数组中的一个元素组成。

// 输入
let arr = [ [1, 2], [3, 4], [5, 6] ];

// 输出
[ [1, 3, 5], [1, 3, 6], [1, 4, 5], [1, 4, 6], [2, 3, 5], [2, 3, 6], [2, 4, 5], [2, 4, 6] ]

这是一个求笛卡尔积的问题。给定多个数组，需要找出所有可能的组合方式。每个组合包含从每个子数组中选择的一个元素。

2. 解题思路

  1. 可以使用递归的方式来解决
  2. 也可以使用循环的方式来解决
  3. 这里我们采用递归的解法，因为递归更容易理解和实现

递归思路：

  1. 从第一个数组开始，依次取出每个元素
  2. 对剩余的数组递归执行相同的操作
  3. 将当前元素与递归返回的结果组合
  4. 基线条件：当处理到最后一个数组时，将其元素转换为单元素数组返回

3. 代码实现

3.1. 递归

function combine(arr) {
    // 基线条件：如果数组为空，返回空数组
    if (arr.length === 0) return [[]];
    
    // 取出第一个数组
    const first = arr[0];
    // 获取剩余的数组
    const rest = arr.slice(1);
    
    // 递归处理剩余的数组
    const combinesWithoutFirst = combine(rest);
    
    // 存储所有组合结果
    const result = [];
    
    // 遍历第一个数组的每个元素
    for (let item of first) {
        // 将当前元素与递归返回的每个组合进行组合
        for (let combination of combinesWithoutFirst) {
            result.push([item, ...combination]);
        }
    }
    
    return result;
}

// 测试代码
const arr = [[1, 2], [3, 4], [5, 6]];
console.log(combine(arr));

接下来逐步分析一下代码的执行过程：

  1. 基线条件：

    • 当输入数组为空时，返回包含空数组的数组 [[]]
    • 这是递归的终止条件

  2. 递归步骤：

    • first：获取第一个子数组
    • rest：获取剩余的子数组
    • combinesWithoutFirst：递归处理剩余数组，获取所有可能的组合

  3. 组合过程：

    • 外层循环遍历第一个数组的每个元素
    • 内层循环遍历递归返回的组合
    • 将当前元素与每个组合合并，形成新的组合

  4. 时间复杂度：

    • 假设有n个数组，每个数组平均有m个元素
    • 总的组合数是m^n
    • 时间复杂度为O(m^n)

3.2. 回溯法实现

回溯法的核心思想是通过递归的方式，在每一层选择一个元素，然后继续处理下一层。

function backtrackCombine(arr) {
    const result = [];
    
    // 回溯函数
    function backtrack(current, depth) {
        // 当收集到的元素个数等于数组长度时，将结果加入
        if (depth === arr.length) {
            result.push([...current]);
            return;
        }
        
        // 遍历当前层的所有可能选择
        for (let num of arr[depth]) {
            // 选择当前元素
            current.push(num);
            // 继续处理下一层
            backtrack(current, depth + 1);
            // 撤销选择，回溯
            current.pop();
        }
    }
    
    backtrack([], 0);
    return result;
}

// 测试代码
const arr = [[1, 2], [3, 4], [5, 6]];
console.log('回溯法结果：', backtrackCombine(arr));

3.3. 动态规划实现

动态规划的思路是从底向上，逐步构建结果。我们可以先处理前两个数组的组合，然后再依次与后面的数组组合。

function dpCombine(arr) {
    // 如果数组为空，返回空数组
    if (arr.length === 0) return [[]];
    
    // 从第一个数组开始，逐步构建结果
    let result = arr[0].map(item => [item]);
    
    // 遍历剩余的数组
    for (let i = 1; i < arr.length; i++) {
        const temp = [];
        // 对于当前的每个组合
        for (let combination of result) {
            // 与当前数组的每个元素组合
            for (let num of arr[i]) {
                temp.push([...combination, num]);
            }
        }
        result = temp;
    }
    
    return result;
}

// 测试代码
const arr2 = [[1, 2], [3, 4], [5, 6]];
console.log('动态规划结果：', dpCombine(arr2));

以输入 [[1, 2], [3, 4], [5, 6]] 为例，让我们逐步分析执行过程：

  1. 初始化阶段：

    • result = [[1], [2]]
    • 将第一个数组 [1, 2] 的元素转换为单元素数组

  2. 第一次迭代 (i = 1)：

    • 处理数组 [3, 4]
    • 对于 [1]：
      • 与 3 组合：[1, 3]
      • 与 4 组合：[1, 4]
    • 对于 [2]：
      • 与 3 组合：[2, 3]
      • 与 4 组合：[2, 4]
    • 此时 result = [[1,3], [1,4], [2,3], [2,4]]

  3. 第二次迭代 (i = 2)：

    • 处理数组 [5, 6]
    • 对于每个现有组合，都与 5 和 6 组合
    • 最终得到所有可能的组合

4. 回溯法和动态规划比较

  1. 回溯法：

    • 优点：
      • 思路直观，容易理解
      • 代码结构清晰
      • 适合处理需要穷举所有可能性的问题
    • 缺点：
      • 空间复杂度较高，需要递归栈空间
      • 对于大规模数据可能会有性能问题

  2. 动态规划：

    • 优点：
      • 避免了递归调用，减少了栈空间的使用
      • 自底向上构建结果，效率较高
      • 空间利用更加高效
    • 缺点：
      • 代码可能不如回溯法直观
      • 需要额外的空间存储中间结果

5. 时间复杂度分析

假设有n个数组，每个数组平均有m个元素：

  • 回溯法：O(m^n)
  • 动态规划：O(m^n)

虽然两种方法的时间复杂度相同，但动态规划的实际运行效率通常会更高，因为它避免了递归调用的开销。

6. 空间复杂度分析

  • 回溯法：O(n) + O(m^n)，其中O(n)是递归栈的空间
  • 动态规划：O(m^n)，用于存储结果

7. 使用场景建议

  1. 当数据规模较小，且需要清晰的代码结构时，可以使用回溯法
  2. 当数据规模较大，且对性能要求较高时，建议使用动态规划
  3. 如果需要在生成过程中进行剪枝或添加其他条件，回溯法会更加灵活

8. 类似题型总结

这类组合问题在算法中很常见，类似的题型包括：

  1. 全排列问题：

    • 给定一个数组，求所有可能的排列顺序
    • 与本题的区别是元素的顺序也会影响结果

  2. 子集问题：

    • 给定一个数组，求所有可能的子集
    • 每个元素只有选择和不选择两种状态

  3. 组合问题：

    • 从n个数中选择k个数的所有可能组合
    • 通常使用回溯法解决

解决这类问题的常用方法：

  1. 递归
  2. 回溯
  3. 动态规划

关键是要根据具体问题选择合适的解决方案，并注意处理边界条件。

avatar
文章
阅读
粉丝