数组扁平化是将多维数组转化为一维数组的过程，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()
。
来画数字人直播
来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。
0 查看详情
在实际应用中，如果数组嵌套深度已知，使用指定深度的
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如何实现数组扁平化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/339504.html
微信扫一扫 
支付宝扫一扫 
