数组扁平化方法

最新推荐文章于 2025-06-08 21:35:46 发布

南城旧时

最新推荐文章于 2025-06-08 21:35:46 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52006046/article/details/128378546

本文详细介绍了四种将多维数组转化为一维数组的方法：递归函数、reduce、正则表达式和Array.prototype.flat()。这些方法通过不同的逻辑实现数组的扁平化，适用于JavaScript开发中处理复杂数据结构的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要知道什么是数组扁平化。
数组扁平化就是指将一个多维数组变为一个一维数组如下例

  // 转化成[1,2,3,4,5,6,7,8]

方法1：函数递归

  const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
  const newArr = []
  const fn = arr => {
    for (let i = 0; i < arr.length; i++) {
      // 用Array.isArray() 判断传递的值是否是一个Array
      if (Array.isArray(arr[i])) {
        // 若是Array递归，再判断arr[i]
        fn(arr[i]);
      } else {
        // 否就添加到新数组
        newArr.push(arr[i]);
      }
    }
  }
  // 调用函数
  fn(arr)
  console.log(newArr)//[1,2,3,4,5,6,7,8]
</script>

方法2：reduce

const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
// 原理还是利用Array.isArray判断，进行函数递归
// 代码用的箭头函数省略了2个{}和return
// concat是合并多个数组  三元通过Array.isArray判断item是否为Array，是就递归，反之合并
const fn = arr => arr.reduce((sum, item) => sum.concat(Array.isArray(item) ? fn(item) : item)
  , [])
// []为reduce的第二个参数(第一次执行因为没有上一次的计算结果所以需要一个空数组左初始值)
console.log(fn(arr))// [1,2,3,4,5,6,7,8]
</script>

方法3：正则表达式

  const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
  // JSON.stringify将数组转为JSON字符串 
  // replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串
  // split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组
  console.log(JSON.stringify(arr).replace(/\[|\]/g, '').split(','))//[1,2,3,4,5,6,7,8]
</script>

方法4：flat（）

  const arr = [1, [2, [3, [4, 5, 6], 7]], 8]
  //  flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
  // 全局属性 Infinity 是一个数值，表示无穷大。
  console.log(arr.flat(Infinity))//[1,2,3,4,5,6,7,8]
</script>