ES8 - 数组方法 flat 和 flatMap

在 ES8（ECMAScript 2017）中，新增了两个数组方法：flat 和 flatMap，它们有助于简化数组操作，提高代码的可读性和可维护性。

flat

flat 方法可以将一个多维数组变成一个一维数组，其用法如下：

array.flat([depth])

其中，array 为要操作的数组，depth 为选填参数，代表将数组展开的深度，默认值为 1。

例如，对于一个数组 arr = [1, [2, 3], [4, [5, 6]]]，我们可以使用 flat 方法将其展开为一维数组：

const arr = [1, [2, 3], [4, [5, 6]]];
const flattenArr = arr.flat();
console.log(flattenArr); // [1, 2, 3, 4, [5, 6]]

上述代码会将 arr 数组展开为 [1, 2, 3, 4, [5, 6]]，[5, 6] 这个数组的层数并没有受到影响，因为默认情况下 depth 只展开一层。

如果我们希望展开所有层数，可以将 depth 设置为一个足够大的值（如 Infinity）：

const arr = [1, [2, 3], [4, [5, 6]]];
const flattenArr = arr.flat(Infinity);
console.log(flattenArr); // [1, 2, 3, 4, 5, 6]

上述代码将 arr 中所有元素展开为一维数组。

flat 方法不会改变原数组，而是返回一个新数组。

flatMap

flatMap 方法可以同时执行 map 和 flat 操作，其用法如下：

array.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，array 为要操作的数组，callback 为对数组每个元素执行的函数，函数返回的结果会被展开为一维数组，thisArg 为可选的执行上下文。

例如，对于一个数组 arr = [1, 2, 3]，我们可以使用 flatMap 方法将每个元素乘以 2 并展开为一维数组：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [x * 2]);
console.log(flatMapArr); // [2, 4, 6]

上述代码相当于执行了以下操作：

const arr = [1, 2, 3];
const mapArr = arr.map(x => x * 2);
const flatMapArr = mapArr.flat();
console.log(flatMapArr); // [2, 4, 6]

flatMap 方法同样不会改变原数组，而是返回一个新数组。

总结

flat 和 flatMap 方法可以帮助我们简化数组操作，提升代码的可读性和可维护性。需要注意的是，在使用过程中要清楚 depth 和 callback 函数的影响，确保得到正确的结果。

const arr = [1, [2, 3], [4, [5, 6]]];
const flattenArr = arr.flat(Infinity);
console.log(flattenArr); // [1, 2, 3, 4, 5, 6]

const arr2 = [1, 2, 3];
const flatMapArr = arr2.flatMap(x => [x * 2]);
console.log(flatMapArr); // [2, 4, 6]

以上就是 flat 和 flatMap 方法的详细介绍和示例代码，希望能对读者学习前端类相关知识有所帮助。

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