ECMAScript 2019 中的 flat 和 flatMap 方法常见问题的处理方法

在 ECMAScript 2019 （又称 ES10）中，JavaScript 添加了两个新的数组方法 flat 和 flatMap 。这两个方法都是处理多维嵌套数组的有力工具，能够将多维数组扁平化并转换为一位数组。在日常的前端开发中，这两个方法经常被用来处理数组数据，本文将介绍 flat 和 flatMap 的具体用法、常见问题以及一些处理方法。

flat 方法的用法

flat 方法的主要功能是将多维嵌套数组转换为一维数组，其语法如下：

arr.flat([depth])

其中，arr 表示需要进行扁平化操作的数组，depth 表示扁平化的深度。如果不传入 depth 参数， flat 方法默认执行一次扁平化操作。如果传入的参数 depth 大于嵌套数组的深度，该方法将返回一个新的数组，不进行任何操作。

示例代码如下：

const arr = [1, 2, [3, 4]];

const arrFlat = arr.flat();

console.log(arrFlat); // [ 1, 2, 3, 4 ]

上述代码中，原始数组 arr 包含一个数字和一个嵌套数组。通过执行 flat 方法将其扁平化处理得到 arrFlat 数组。

flat 方法的问题

使用 flat 方法时，有几个常见的问题需要注意：

问题一： flat 方法不兼容低版本浏览器

flat 方法是在 ECMAScript 2019 标准中加入的新方法，因此只有支持 ES10 标准的浏览器才能使用它。对于不支持 ES10 标准的浏览器，我们可以使用 polyfill 或者手动实现扁平化操作。

在 polyfill 方案中，可以使用 core-js 库来实现 flat 方法：

require('core-js/es/array/flat');

通过该语句引入 flat 方法的 polyfill，并且可以在所有浏览器上使用 flat 方法。

问题二： flat 方法只能处理数组类型

flat 方法只能对数组类型进行扁平化操作，如果传入的参数不是数组类型，会抛出 TypeError 异常。

const str = "hello";

const strFlat = str.flat(); // TypeError: str.flat is not a function

上述代码中，参数 str 不是数组类型，因此使用 flat 方法会抛出异常。

针对该问题，我们可以使用 Array.from 方法来转换非数组类型的参数：

const str = "hello";

const strFlat = Array.from(str);

console.log(strFlat); // ["h", "e", "l", "l", "o"]

上述代码中，我们使用 Array.from 方法将字符串参数 str 转换为数组类型，然后再执行 flat 方法进行扁平化操作。

问题三： flat 方法不改变原始数组

flat 方法执行并不会改变原始数组，而是返回一个新的扁平化数组。如果我们需要改变原来的数组，需要手动将扁平化后的数组转换为原始数组。

const arr = [1, 2, [3, 4]];

const arrFlat = arr.flat();

console.log(arr); // [1, 2, [3, 4]]

上述代码中，执行 flat 方法并不会改变原始数组的值，而是将扁平化后的数组赋值给 arrFlat。

为了改变原始数组，我们需要将 arrFlat 赋值给原始数组 arr：

arr = arrFlat;

console.log(arr); // [1, 2, 3, 4]

flatMap 方法的用法

flatMap 方法结合了 map 和 flat 两个方法的功能，可以对数组进行映射，并且支持扁平化操作，其语法如下：

arr.flatMap(callback[, thisArg])

其中，callback 表示用来执行操作的回调函数，thisArg 表示执行回调函数时的上下文环境。

示例代码如下：

const arr = [1, 2, 3];

const arrFlatMap = arr.flatMap(x => [x * 2]);

console.log(arrFlatMap); // [2, 4, 6]

上述代码中，我们使用 flatMap 方法和一个回调函数，将数组内的每个元素乘以 2，再生成一个扁平化的新数组 arrFlatMap。

flatMap 方法的问题

使用 flatMap 方法时，同样有几个常见的问题需要注意：

问题一： flatMap 方法不兼容低版本浏览器

同样，flatMap 方法是在 ECMAScript 2019 标准中加入的新方法，因此只有支持 ES10 标准的浏览器才能使用它。对于不支持 ES10 标准的浏览器，我们可以使用 polyfill 或者手动实现映射和扁平化操作。

polyfill 方案同 flat 方法一样，可以使用 core-js 库来实现 flatMap 方法：

require('core-js/es/array/flatMap');

通过该语句引入 flatMap 方法的 polyfill，并且可以在所有浏览器上使用 flatMap 方法。

问题二： flatMap 方法可能会产生空值和 undefined

flatMap 方法会执行回调函数，如果回调函数返回空值或者 undefined，会在结果数组中产生空值。

const arr = [1, 2, 3];

const arrFlatMap = arr.flatMap(x => x == 2 ? [] : x);

console.log(arrFlatMap); // [1, 3]

上述代码中，回调函数在处理 arr 数组的第二个元素时返回了一个空数组，因此 arrFlatMap 数组中没有包含该元素。

为了避免在结果数组中产生空值，我们可以使用 filter 方法过滤掉空值：

const arr = [1, 2, 3];

const arrFlatMap = arr.flatMap(x => x == 2 ? [] : x).filter(Boolean);

console.log(arrFlatMap); // [1, 3]

上述代码中，使用 filter 方法过滤掉了结果数组中的空值。

问题三： flatMap 方法不改变原始数组

同 flat 方法一样， flatMap 方法执行也会返回一个新的数组，而不会改变原始数组的值。如果需要改变原始数组，可以手动将结果数组赋值给原始数组。

const arr = [1, 2, 3];

const arrFlatMap = arr.flatMap(x => x * 2);

console.log(arr); // [1, 2, 3]

上述代码中，执行 flatMap 方法并不会改变原始数组的值，而是将结果数组赋值给 arrFlatMap。

为了改变原始数组，我们需要将 arrFlatMap 赋值给原始数组 arr：

arr = arrFlatMap;

console.log(arr); // [2, 4, 6]

总结

本文介绍了 ECMAScript 2019 中添加的两个新数组方法 flat 和 flatMap 的用法及常见问题。在使用 flat 和 flatMap 方法时，我们需要注意浏览器兼容性，避免出现空值和 undefined，手动处理结果，并且手动将结果数组赋值给原始数组。对于不支持 ES10 标准的浏览器，我们可以使用 polyfill 或手动处理数组来实现这两个方法的功能，提高代码的兼容性和可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6591a8f8eb4cecbf2d6b72b7