JS实现数组扁平化的8种方式总结

更新时间：2023年08月07日 09:55:53 作者：一花一world

数组扁平化指的是将一个多层嵌套的数组，处理成只有一层的数组，本文为大家整理了8个常用的JS实现数组扁平化的方法，希望对大家有所帮助

八种数组扁平化方法的使用场景和优缺点

以下是八种数组扁平化方法的使用场景和优缺点：

1. 使用递归

使用场景：当需要对任意层级的嵌套数组进行扁平化时，递归是一种简单且通用的方法。

优点：简单易懂，适用于任意层级的嵌套数组。

缺点：可能存在性能问题，对于非常大的数组或多层嵌套的数组，递归可能导致堆栈溢出。

2. 使用 reduce 方法

使用场景：当需要对数组进行一系列操作，并将结果累积到一个新数组时，reduce 方法是一种常用的选择。

优点：代码简洁，可以直接在 reduce 方法中处理扁平化逻辑。

缺点：对于非常大的数组或多层嵌套的数组，reduce 方法可能导致性能问题。

3. 使用扩展运算符

使用场景：当需要快速将多层嵌套的数组扁平化为一维数组时，扩展运算符是一种简单且直观的方法。

优点：代码简洁，易于理解和使用。

缺点：对于非常大的数组或多层嵌套的数组，扩展运算符可能导致性能问题。

4. 使用 flat 方法（ES2019）

使用场景：当在支持 ES2019 的环境中，可以使用 flat 方法来扁平化数组。

优点：代码简洁，使用内置方法，性能较好。

缺点：不适用于不支持 ES2019 的环境。

5. 使用 toString 和 split 方法

使用场景：当需要将多层嵌套的数组转换为字符串，并使用字符串方法进行处理时，可以使用 toString 和 split 方法。

优点：简单易懂，适用于简单的扁平化需求。

缺点：对于包含对象或字符串元素的数组，可能会出现不符合预期的结果。

6. 使用正则表达式和 JSON 方法

使用场景：当需要将数组转换为字符串，然后使用正则表达式和 JSON 方法进行处理时，可以使用该方法。

优点：适用于简单的扁平化需求。

缺点：对于包含对象或字符串元素的数组，可能会出现不符合预期的结果。

7. 使用堆栈

使用场景：当需要手动控制数组元素的处理顺序时，可以使用堆栈方法。

优点：可以灵活控制处理顺序，适用于需要自定义处理逻辑的情况。

缺点：相对复杂，需要手动处理堆栈和结果数组。

8. 使用扩展运算符和递归

使用场景：当需要结合扩展运算符和递归来处理多层嵌套的数组时，可以使用该方法。

优点：代码简洁，结合了扩展运算符和递归的优点。

缺点：对于非常大的数组或多层嵌套的数组，递归可能导致堆栈溢出。

根据具体的需求和代码环境，选择适合的方法来实现数组扁平化。考虑性能、代码复杂度和可读性等因素，选择最适合的方法进行实现。

具体实现

以下是实现数组扁平化的8种方式：

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数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript 最佳实践：帮你提升代码质量
在本篇教程中，我将指出一些重要的 JavaScript 最佳实践，让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧
2016-12-12
webpack中的模式(mode)使用详解
这篇文章主要介绍了webpack中的模式(mode)使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
这篇文章主要介绍了js实现的鼠标滚轮滚动切换页面效果,类似360默认页面滚动切换效果.涉及JavaScript响应鼠标事件动态变换页面元素的相关技巧,需要的朋友可以参考下
2016-01-01
javascript实现禁止鼠标滚轮事件
这篇文章主要介绍了javascript实现禁止鼠标滚轮事件的相关资料,需要的朋友可以参考下
2015-07-07
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
KnockoutJS是一个JavaScript实现的MVVM框架。通过本文给大家介绍BootstrapTable与KnockoutJS相结合实现增删改查功能【一】，感兴趣的朋友一起学习吧
2016-05-05
JS获取iframe中marginHeight和marginWidth属性的方法
这篇文章主要介绍了JS获取iframe中marginHeight和marginWidth属性的方法,涉及javascript操作iframe属性的技巧,并分析了marginHeight和marginWidth属性的功能,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JavaScript图片处理与合成总结
这篇文章主要介绍了JavaScript图片处理与合成的相关知识点以及相关实例代码分析，有兴趣的朋友学习下。
2018-03-03
echarts展示区域地图添加纹理图片操作指南
这篇文章主要给大家介绍了关于echarts展示区域地图添加纹理图片操作的相关资料,ECharts地图组件支持使用图片作为地图区域的填充纹理,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
基于JavaScript实现在线网页烟花效果
这篇文章主要为大家详细介绍了如何利用JavaScript实现简单的在线网页烟花效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-02-02
three.js响应式设计实例详解
响应式网站设计(Responsive Web design)是一种网络页面设计布局,是目前比较流行的一种网页设计,下面这篇文章主要给大家介绍了关于three.js响应式设计的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04