js如何实现数组扁平化-js教程-PHP中文网

js如何实现数组扁平化

月夜之吻

发布： 2025-08-13 10:17:01

原创

910人浏览过

数组扁平化是将多维数组转化为一维数组的过程，1. 可通过递归遍历并拼接元素实现；2. 使用reduce方法结合递归累积结果；3. 利用...扩展运算符与some方法循环展开数组；4. 调用es2019新增的flat()方法并传入深度参数（如infinity完全扁平化）；5. 处理空值时默认保留null和undefined，需额外使用filter方法移除；6. flat()方法性能最优，尤其适合已知深度的场景；7. 所有方法均支持字符串、对象等非数字类型，但对象仍为引用类型；8. 可通过flat(depth)控制扁平化层级，实现部分降维，适用于结构化数据处理，最终应根据兼容性与性能需求选择合适方案。

js如何实现数组扁平化

数组扁平化，简单来说，就是把一个多维数组降维，变成一个一维数组。实现方式有很多，关键在于如何处理嵌套的数组。

解决方案

实现数组扁平化，可以使用递归、

reduce

登录后复制

方法、

...

登录后复制

扩展运算符，或者更现代的

flat()

登录后复制

方法。

递归方法： 这种方式最直观，遍历数组，如果遇到数组就递归调用自身，否则就将元素添加到结果数组中。

function flatten(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i])); // 递归调用
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flatten(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

登录后复制

reduce
登录后复制
方法：
```
reduce
```
登录后复制
可以迭代数组，并累积结果。结合递归，可以优雅地实现扁平化。

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

const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flattenWithReduce(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

登录后复制

...
登录后复制
扩展运算符：结合
```
some
```
登录后复制
方法，可以简洁地实现扁平化。

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

const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flattenWithSpread(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

登录后复制

flat()
登录后复制
方法：这是ES2019引入的官方方法，最简单直接。可以传入一个参数，指定扁平化的深度。如果传入
```
Infinity
```
登录后复制
，则完全扁平化。

const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = nestedArray.flat(Infinity);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

登录后复制

如何处理数组中包含空值的情况？

空值，比如

null

登录后复制

、

undefined

登录后复制

，在扁平化过程中需要特别处理。默认情况下，上述方法都会保留这些空值。如果需要移除它们，可以在扁平化后进行过滤。

const nestedArrayWithNull = [1, [2, null, [3, 4], undefined, 5], 6];
const flatArrayWithNull = nestedArrayWithNull.flat(Infinity);
console.log(flatArrayWithNull); // 输出: [1, 2, null, 3, 4, undefined, 5, 6]

// 移除空值
const flatArrayWithoutNull = flatArrayWithNull.filter(val => val !== null && val !== undefined);
console.log(flatArrayWithoutNull); // 输出: [1, 2, 3, 4, 5, 6]

登录后复制

性能比较：哪种方法效率最高？

flat()

登录后复制

方法通常是最快的，因为它是由浏览器引擎优化的。递归方法在处理深度嵌套的数组时可能会有性能问题，因为会产生大量的函数调用。

reduce

登录后复制

方法的性能也取决于数组的结构和大小。

...

登录后复制

扩展运算符的性能也相当不错，但不如

flat()

登录后复制

。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

在实际应用中，如果数组嵌套深度已知，使用指定深度的

flat()

登录后复制

方法是最佳选择。如果深度未知，且需要考虑兼容性，可以考虑使用循环结合

...

登录后复制

扩展运算符。

如何处理数组中包含非数字类型的情况？

数组扁平化不仅仅适用于数字数组，也可以处理包含字符串、对象等其他类型的数组。上述方法都能正确处理这些情况，不会因为类型不匹配而报错。

const mixedArray = [1, "hello", [2, { name: "world" }, 3], 4];
const flatMixedArray = mixedArray.flat(Infinity);
console.log(flatMixedArray); // 输出: [1, "hello", 2, { name: "world" }, 3, 4]

登录后复制

需要注意的是，如果数组中包含对象，扁平化后对象仍然是引用类型，修改扁平化后的对象会影响原始数组中的对象。

扁平化特定深度的数组

有时候我们并不需要完全扁平化数组，而是只需要扁平化到特定的深度。

flat()

登录后复制

方法可以接受一个可选的深度参数，用于指定扁平化的层数。

const nestedArray = [1, [2, [3, [4, 5]]]];
const flatArrayDepth1 = nestedArray.flat(1);
console.log(flatArrayDepth1); // 输出: [1, 2, [3, [4, 5]]]

const flatArrayDepth2 = nestedArray.flat(2);
console.log(flatArrayDepth2); // 输出: [1, 2, 3, [4, 5]]

登录后复制

这个特性在处理层级结构的数据时非常有用，可以根据实际需求控制扁平化的程度。

以上就是js如何实现数组扁平化的详细内容，更多请关注php中文网其它相关文章！