如何实现数组的扁平化？请考虑多维数组的情况。

推荐答案

// www.javascriptcn.com code example
function flattenArray(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenArray(arr[i])); // 递归调用处理嵌套数组
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}


// 示例
const nestedArray = [1, [2, [3, 4], 5], 6, [7, 8]];
const flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]


function flattenArrayUsingReduce(arr) {
    return arr.reduce((acc, current) => {
        return acc.concat(Array.isArray(current) ? flattenArrayUsingReduce(current) : current);
    }, []);
}

// 示例
const nestedArray2 = [1, [2, [3, 4], 5], 6, [7, 8]];
const flattenedArray2 = flattenArrayUsingReduce(nestedArray2);
console.log(flattenedArray2); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]


function flattenArrayUsingStack(arr) {
  const stack = [...arr];
  const result = [];

  while (stack.length) {
    const current = stack.pop();
    if (Array.isArray(current)) {
        stack.push(...current);
    } else {
        result.unshift(current);
    }
  }
  return result;
}

// 示例
const nestedArray3 = [1, [2, [3, 4], 5], 6, [7, 8]];
const flattenedArray3 = flattenArrayUsingStack(nestedArray3);
console.log(flattenedArray3); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]

本题详细解读

什么是数组扁平化

数组扁平化是指将一个多维数组转换为一个一维数组的过程。例如，将 [1, [2, [3, 4], 5], 6] 转换为 [1, 2, 3, 4, 5, 6]。 数组扁平化是前端面试中常见的一个问题，考察候选人对递归、迭代和数组操作的理解。

解题思路

1. 递归方法 (flattenArray)

   • 基本思想: 递归遍历数组，如果当前元素是数组，则递归调用自身进行扁平化处理，否则将当前元素添加到结果数组中。
   • 实现:
     • 创建一个空数组 result 用于存储扁平化后的元素。
     • 遍历输入数组 arr。
     • 如果当前元素 arr[i] 是一个数组，则递归调用 flattenArray(arr[i])，并将返回的扁平化数组与 result 连接起来 (使用 concat)。
     • 如果当前元素 arr[i] 不是数组，则直接将其添加到 result 中。
     • 返回最终的 result 数组。

2. reduce方法 (flattenArrayUsingReduce)

   • 基本思想: 使用 reduce 方法迭代数组，对于每个元素，判断是否为数组，是则递归调用，否则直接添加到累加器。
   • 实现:
     • 使用 arr.reduce() 方法，初始累加器 acc 是一个空数组 []。
     • 遍历输入数组的每个元素 current。
     • 判断 current 是否为数组，如果是，则递归调用 flattenArrayUsingReduce(current) 并将结果与累加器 acc 连接。
     • 否则直接将 current 追加到累加器 acc。
     • 返回最终的累加器 acc。

3. 栈方法 (flattenArrayUsingStack)

   • 基本思想: 使用栈来模拟递归过程，避免深度过大的递归导致栈溢出。
   • 实现:
     • 初始化一个栈 stack，将输入数组 arr 中的所有元素复制到栈中。
     • 初始化一个空数组 result 用于存放扁平化结果。
     • 当栈不为空时，循环执行：
       • 从栈顶弹出一个元素 current。
       • 如果 current 是一个数组，将 current 中的元素依次压入栈顶（反向，保证顺序）。
       • 如果 current 不是数组，将其添加到 result 数组的头部（使用 unshift）。

   - 返回最终的 `result` 数组。

考虑多维数组

以上三种方法都可以正确处理多维数组，因为递归方法会逐层深入到嵌套数组中，而迭代方法和栈方法则通过循环逐步处理嵌套的数组。

性能考虑

• 递归方法简单易懂，但可能会因为递归深度过大而出现栈溢出的问题，且函数调用会有一定的开销。
• reduce 方法可以实现递归的扁平化操作，逻辑更紧凑，在现代 JavaScript 引擎中优化得较好，也存在递归深度过大的问题。
• 栈方法使用迭代替代递归，避免了栈溢出的风险，性能更好，也更不容易爆栈，实际工作中推荐使用栈方法进行多维数组扁平化。

总结

以上三种方法均可实现多维数组的扁平化，可以根据实际情况选择合适的方法。如果需要处理深度不确定的多维数组，栈方法是更稳妥的选择。