随着 ES9 的到来，数组中的一些新方法已经成为了前端主流开发技术。其中，Array.prototype.flat() 和 Array.prototype.flatMap() 这两个方法在现代的前端开发中已经得到了广泛的应用。然而，在实际的使用过程中，我们也会遇到一些问题。本文将从实际情况出发，深入剖析这些问题，告诉读者如何解决这些问题，并通过示例代码来演示解决思路。希望本文能为前端开发者带来一些帮助。
Array.prototype.flat() 的问题
Array.prototype.flat() 可以将嵌套的数组“展开”，变成一个平面的数组。例如：
const arr = [1, [2, 3], [4, [5, 6]], 7]; const flatArr = arr.flat(); // [1, 2, 3, 4, 5, 6, 7]
然而，在实际的使用中，我们可能会遇到一些问题。例如，如果我们使用 flat() 方法将一个嵌套数组展开，然后使用 map() 方法对其中的每个元素进行操作，那么可能会出现 undefined 的情况。例如：
-- -------------------- ---- -------
----- --- - -
--- -- ---
--- -- ---
--- -- ---
--
----- ------- - -----------
----- --------- - ----------------- -- -
-- ---- - - --- -- -
------ --- - --
-
---
-----------------------在这个示例代码中，我们首先定义了一个嵌套数组，然后使用 flat() 方法将其展开。接着，我们使用 map() 方法对其中的每个元素进行操作。然而，由于原数组中的每个子数组长度不一致，展开后的数组中就会有一些 undefined 元素。在例子中，就出现了 undefined 的情况，导致我们得到了一个错误的结果。
为了解决这个问题，我们需要使用 flat() 方法的一个可选参数，它指定了展开的深度。如果我们把这个参数设置为一个大于等于原数组嵌套层数的数值，那么 undefined 的元素就会被去除。例如：
-- -------------------- ---- -------
----- --- - -
--- -- ---
--- -- ---
--- -- ---
--
----- ------- - -------------------
----- --------- - ----------------- -- -
-- ---- - - --- -- -
------ --- - --
-
---
-----------------------在这个示例代码中，我们在 flat() 方法中传入了 Infinity，即展开所有嵌套层数。这样一来，flatArr 数组中就没有 undefined 的元素了，然后我们就可以得到正确的结果。原数组中没有的 undefined 元素就不会在后续的 map() 操作中造成问题了。
Array.prototype.flatMap() 的问题
Array.prototype.flatMap() 可以把数组“平铺”，类似于 flat() 方法，但 flatMap() 能同时对每个元素进行映射和展开。例如：
const arr = [1, 2, 3]; const flatMappedArr = arr.flatMap((num) => [num, num * 2]); // [1, 2, 2, 4, 3, 6]
这个例子中，我们把每个元素映射成了一个数组，其中包括原元素和原元素的两倍，然后使用 flatMap() 方法把这些数组展开到一个平面的数组中。
然而，在实际的使用中，我们也会遇到一些问题。例如，如果我们使用 flatMap() 方法进行数组平铺和映射，但映射函数返回的不是数组，而是一个字符串，那么就会出现 TypeError 的错误。例如：
const arr = ["apple", "banana", "orange"];
const flatMappedArr = arr.flatMap((fruit) => fruit.split(""));
// ["a", "p", "p", "l", "e", "b", "a", "n", "a", "n", "a", "o", "r", "a", "n", "g", "e"]
const flatMappedArr2 = arr.flatMap((fruit) => fruit.toUpperCase());
// TypeError: fruit.split is not a function在这个示例代码中，我们首先定义了一个包含三个字符串的数组，然后使用 flatMap() 方法把这个数组展开成一个平面的数组，其中每个元素是原数组中的某个字符串的一个字符。这个操作可以正确地执行。但如果我们改变映射函数，把 fruit.split("") 改成 fruit.toUpperCase()，那么就会出现 TypeError 的错误。这是因为，toUpperCase() 方法返回的不是一个数组，而是一个字符串，然后在展开字符串的过程中遇到了 TypeError 的错误。
为了解决这个问题，我们可以在映射函数中把字符串转换成数组，然后在 flatMap() 方法中返回这个数组。例如：
const arr = ["apple", "banana", "orange"];
const flatMappedArr = arr.flatMap((fruit) => fruit.split(""));
// ["a", "p", "p", "l", "e", "b", "a", "n", "a", "n", "a", "o", "r", "a", "n", "g", "e"]
const flatMappedArr2 = arr.flatMap((fruit) => Array.from(fruit.toUpperCase()));
// ["A", "P", "P", "L", "E", "B", "A", "N", "A", "N", "A", "O", "R", "A", "N", "G", "E"]在这个示例代码中，我们在映射函数中使用了 Array.from() 方法，把 fruit.toUpperCase() 转换成了一个数组。这样一来，即使 fruit.toUpperCase() 返回的是一个字符串，由于这个字符串被转换成了一个数组，所以在 flatMap() 方法中就不会出现 TypeError 的错误了。
总结
在今天的前端开发中，增强型的数组方法已经成为了主流的开发技术。而 Array.prototype.flat() 和 Array.prototype.flatMap() 也成为了这个领域中的佼佼者。尽管在实际应用中，我们可能会遇到一些问题。但掌握一些解决问题的方法，我们也更能够发挥这些方法的优越性。本文为读者提供了一些解决问题的思路，并通过具体的示例代码来演示这些思路。希望读者能够通过这些内容，掌握这些方法在实际开发中的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64950b0748841e989425219e