JS数组扁平化5种实用方法

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JS数组扁平化方法大全》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

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

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

解决方案

实现数组扁平化，可以使用递归、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()。

在实际应用中，如果数组嵌套深度已知，使用指定深度的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数组扁平化5种实用方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！