JavaScript实现数组扁平化的8种方法详解与对比

作者：拾光时间：2026-10-30 22:38:31浏览：166

本文总结JavaScript中实现数组扁平化的8种常用方法，包括递归、reduce、扩展运算符、ES2019 flat、toString/split、正则+JSON、堆栈及组合递归。详细分析各方法的使用场景、优缺点及性能表现，帮助开发者根据实际需求选择最优方案，兼顾代码简洁性与运行效率。

本文汇总了八种实现数组扁平化的技术方案，并分析其适用场景与优劣。

下文将逐一介绍这八种方法的具体应用场景及各自的优缺点。

1. 递归实现

适用场景：当面对任意层级的嵌套数组时，递归是一种直观且通用的处理手段。

优势：逻辑简单清晰，能够处理任意深度的嵌套结构。

劣势：在数组规模极大或嵌套层级极深时，递归调用可能导致调用栈溢出，影响性能。

2. reduce方法实现

适用场景：适用于需要遍历数组并将元素累积合并到新数组的场景，reduce是常见选择。

优势：代码结构紧凑，扁平化逻辑可直接嵌入reduce回调中。

劣势：面对大规模数据或深层嵌套时，递归与reduce结合可能导致性能瓶颈。

3. 扩展运算符实现

适用场景：适用于希望快速将多层嵌套数组展平为一维数组的场景，该方法直观且简便。

优势：代码量少，易于阅读和理解。

劣势：对于超大数组或多层嵌套，反复展开可能导致性能问题。

4. flat方法（ES2019标准）

适用场景：在支持ES2019标准的运行环境中，可直接调用flat方法进行扁平化。

优势：代码简洁，利用原生内置方法，通常具有较好的执行性能。

劣势：在不支持ES2019的旧版浏览器或环境中无法使用。

5. toString与split方法

适用场景：适用于需要将嵌套数组转换为字符串，并通过字符串处理手段进行展平的场景。

优势：实现简单，适用于对结果格式要求不高的基础扁平化需求。

劣势：若数组中包含对象或字符串元素，转换结果可能不符合预期，例如数字被转为字符串。

6. 正则表达式与JSON方法

适用场景：适用于将数组序列化为字符串后，通过正则替换括号并重新解析为JSON的场景。

优势：适用于简单的扁平化场景，实现思路独特。

劣势：同样存在处理对象或字符串元素时结果异常的风险，且JSON序列化开销较大。

7. 堆栈实现

适用场景：适用于需要手动控制元素处理顺序或自定义扁平化逻辑的场景。

优势：灵活性高，可精确控制遍历和处理流程。

劣势：实现相对复杂，需手动管理堆栈与结果数组的状态。

8. 扩展运算符与递归结合

适用场景：适用于希望结合扩展运算符的简洁性与递归的深度处理能力，处理多层嵌套数组的场景。

优势：代码相对简洁，兼顾了两种技术的优点。

劣势：在深层嵌套或大数据量下，递归部分仍可能导致堆栈溢出风险。

实际开发中，应根据具体业务需求、运行环境及性能要求，综合考量代码复杂度与可读性，选择最合适的实现方式。

具体代码实现

以下是上述八种方法的JavaScript代码示例：

1. 递归实现

function flatten(arr) {
  let result = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
}

2. reduce方法实现

function flatten(arr) {
  return arr.reduce((result, item) => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
    return result;
  }, []);
}

3. 扩展运算符实现

function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}

4. flat方法（ES2019）

function flatten(arr) {
  return arr.flat(Infinity);
}

5. toString与split方法

function flatten(arr) {
  return arr.toString().split(',').map(item => +item);
}

6. 正则表达式与JSON方法

function flatten(arr) {
  return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
}

7. 堆栈实现

function flatten(arr) {
  const stack = [...arr];
  const result = [];
  while (stack.length) {
    const next = stack.pop();
    if (Array.isArray(next)) {
      stack.push(...next);
    } else {
      result.unshift(next);
    }
  }
  return result;
}

8. 扩展运算符与递归结合

function flatten(arr) {
  return [].concat(...arr.map(item => Array.isArray(item) ? flatten(item) : item));
}

上述所有方法均能将多层嵌套数组转换为一维数组，具体选用哪种方式取决于项目需求及运行环境兼容性。

函数封装示例

以下示例将八种方法分别封装为独立函数，并展示调用方式：

// 1. 使用递归
function flattenByRecursion(arr) {
  let result = [];
  function flattenHelper(arr) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        flattenHelper(arr[i]);
      } else {
        result.push(arr[i]);
      }
    }
  }
  flattenHelper(arr);
  return result;
}
// 2. 使用 reduce 方法
function flattenByReduce(arr) {
  return arr.reduce((acc, cur) => {
    return Array.isArray(cur) ? acc.concat(flattenByReduce(cur)) : acc.concat(cur);
  }, []);
}
// 3. 使用扩展运算符
function flattenBySpreadOperator(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}
// 4. 使用 flat 方法（ES2019）
function flattenByFlat(arr) {
  return arr.flat(Infinity);
}
// 5. 使用 toString 和 split 方法
function flattenByToString(arr) {
  return arr.toString().split(",").map(item => +item);
}
// 6. 使用正则表达式和 JSON 方法
function flattenByRegexAndJSON(arr) {
  return JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]");
}
// 7. 使用堆栈
function flattenByStack(arr) {
  let result = [];
  let stack = [...arr];
  while (stack.length) {
    let next = stack.pop();
    if (Array.isArray(next)) {
      stack.push(...next);
    } else {
      result.unshift(next);
    }
  }
  return result;
}
// 8. 使用扩展运算符和递归
function flattenBySpreadOperatorAndRecursion(arr) {
  return arr.reduce((acc, cur) => {
    return Array.isArray(cur) ? [...acc, ...flattenBySpreadOperatorAndRecursion(cur)] : [...acc, cur];
  }, []);
}
// 调用示例
let nestedArray = [1, [2, [3, 4], 5], 6, [7]];
console.log(flattenByRecursion(nestedArray));
console.log(flattenByReduce(nestedArray));
console.log(flattenBySpreadOperator(nestedArray));
console.log(flattenByFlat(nestedArray));
console.log(flattenByToString(nestedArray));
console.log(flattenByRegexAndJSON(nestedArray));
console.log(flattenByStack(nestedArray));
console.log(flattenBySpreadOperatorAndRecursion(nestedArray));

开发者可根据实际需求选择调用特定函数，或在此基础上进行进一步优化与修改。

本文关于JS实现数组扁平化的8种方式总结到此结束，更多相关JS数组扁平化内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58