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

您可能感兴趣的文章:

js判断当前浏览器类型,判断IE浏览器方法
这篇文章主要介绍了js判断当前浏览器类型,判断IE浏览器方法,需要的朋友可以参考下
2014-06-06
一文带你彻底搞定JavaScript中字符串转驼峰问题
前端小伙伴们,有没有被命名规范逼疯过,今天咱们就用5步彻底搞定字符串转驼峰的问题,以后再也不用手动改命名啦,快跟随小编一起学习一下吧
2025-05-05
微信小程序实现多个按钮的颜色状态转换
这篇文章主要为大家详细介绍了微信小程序实现多个按钮的颜色状态转换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
如何在 JavaScript 中更好地利用数组
这篇文章主要介绍了如何在 JavaScript 中更好地使用数组，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
Javascript缓存API
JavaScript ServiceWorker API的好处就是让WEB开发人员轻松的控制缓存。这篇文章主要为大家详细介绍了Javascript缓存API，感兴趣的小伙伴们可以参考一下
2016-06-06
JS实现alert中显示换行的方法
这篇文章主要介绍了JS实现alert中显示换行的方法,实例分析了两种实现alert换行的实现技巧,非常简单实用,需要的朋友可以参考下
2015-12-12
基于JavaScript实现的折半查找算法示例
这篇文章主要介绍了基于JavaScript实现的折半查找算法,结合实例形式分析了折半查找的原理、操作步骤及javascript实现折半查找的相关操作技巧与注意事项,需要的朋友可以参考下
2017-04-04
微信小程序登录获取不到头像和昵称的详细解决办法
相信好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时却获取不到,下面这篇文章主要给大家介绍了关于微信小程序登录获取不到头像和昵称的详细解决办法,需要的朋友可以参考下
2022-12-12
微信/支付宝小程序实现弹窗动画缩放到某个位置的示例代码
本文详细介绍了如何使用HTML、CSS和JavaScript实现动画函数,包括参数设置和动画过程中的状态管理,文章还涉及了如何获取DOM元素、设置动画开始和结束的回调函数,感兴趣的朋友跟随小编一起看看吧
2024-10-10
js canvas实现擦除动画
在移动设备上将某张图片擦掉显示另一张图片，利用canvas来实现这篇文章就为大家详细介绍了js canvas实现擦除动画的相关资料，感兴趣的小伙伴们可以参考一下
2016-07-07