ES7 中新增的 Array.prototype.flat() 和 Array.prototype.flatMap()

在 ES7 中，新增了两个数组方法 Array.prototype.flat() 和 Array.prototype.flatMap()。这两个方法可以帮助我们更方便地操作数组，提高代码的可读性和效率。

Array.prototype.flat()

Array.prototype.flat() 方法用于将多维数组转换成一维数组。该方法接受一个可选参数，表示要展开的维度，默认为 1。

下面是一个示例代码：

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

在上面的代码中，arr 是一个多维数组，包含了三个元素，其中第三个元素又是一个嵌套的数组。调用 arr.flat() 方法后，将所有元素展开到一维数组中，得到了 [1, 2, 3, 4, [5, 6]]。

如果要展开全部维度，可以传入一个大于等于数组维度的值。例如：

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

在上面的代码中，传入了 Infinity 参数，表示展开全部维度。最终得到了 [1, 2, 3, 4, 5, 6]。

Array.prototype.flatMap()

Array.prototype.flatMap() 方法将一个数组映射成另一个数组，并将结果展开成一维数组。该方法接受两个参数，第一个参数是一个回调函数，用于对数组元素进行处理，第二个参数是一个可选的 this 值，表示回调函数中的 this 对象。

下面是一个示例代码：

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

在上面的代码中，arr 是一个数组，包含了三个元素。调用 arr.flatMap() 方法后，将每个元素乘以 2 得到了一个新的数组 [2, 4, 6]。

与 Array.prototype.map() 方法不同的是，Array.prototype.flatMap() 方法会将返回的数组展开成一维数组。如果返回的是一个嵌套的数组，则会将其展开到一维数组中。例如：

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

在上面的代码中，回调函数返回了一个嵌套的数组 [[item * 2]]，调用 arr.flatMap() 方法后，将其展开到一维数组中，得到了 [[2], [4], [6]]。

总结

Array.prototype.flat() 和 Array.prototype.flatMap() 方法是 ES7 中新增的数组方法，可以帮助我们更方便地操作数组，提高代码的可读性和效率。Array.prototype.flat() 方法用于将多维数组转换成一维数组，Array.prototype.flatMap() 方法将一个数组映射成另一个数组，并将结果展开成一维数组。在使用这两个方法的时候，需要注意传入的参数及回调函数的返回值，以避免出现意外的结果。

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