前言
在 Web 前端开发中，经常要对多维数组进行操作。ES11 中提供了 Array.flat 方法，可以将多维数组变成一维数组。但是，在使用 Array.flat 方法时，我们可能会遇到一些问题，本文将介绍如何解决使用 Array.flat 方法时遇到的 bug。
问题描述
考虑一个二维数组：
const arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
我们可以使用 Array.flat 方法将它变成一维数组：
const flatArr = arr.flat(); console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
现在，我们再考虑一个三维数组：
const arr3d = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];
同样可以使用 Array.flat 方法将它变成一维数组：
const flatArr3d = arr3d.flat(); console.log(flatArr3d); // [1, 2, 3, 4, 5, 6, 7, 8]
看起来一切都很正常。但是，如果我们考虑一个情况，在三维数组中有 null 或 undefined 的情况，例如：
const arr3d = [[[1, 2], null, [3, 4]], [[5, 6], [7, 8], undefined]];
使用 Array.flat 方法变成一维数组：
const flatArr3d = arr3d.flat(); console.log(flatArr3d); // [1, 2, null, 3, 4, 5, 6, 7, 8, undefined]
可以看到，null 和 undefined 都被保留在了数组中，这并不是我们想要的结果。
解决方法
为了解决这个问题，我们可以使用递归的方式，手动实现 flat 方法。
-- -------------------- ---- -------
-------- --------- -
--- ------ - ---
--- ---- - - -- - - ----------- ---- -
-- ----------------------- -
------ - ----------------------------
- ---- -- ------- --- ---- -- ------ --- ---------- -
--------------------
-
-
------ -------
-如果我们应用这个新的 flat 方法到上面的三维数组中，就可以得到正确的结果：
const arr3d = [[[1, 2], null, [4, 5]], [[6, 7], [8, 9], undefined]]; const flatArr3d = flat(arr3d); console.log(flatArr3d); // [1, 2, 4, 5, 6, 7, 8, 9]
总结
使用 ES11 中 Array.flat 方法时，需要注意数组中可能存在 null 和 undefined 的情况。手动实现 flat 方法，使用递归方式，可以解决这个问题。在开发过程中，我们需要注意数据类型和数据结构的特殊情况，以避免代码中的 bug。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bae7448841e9894874ade