使用 ECMAScript 2016（ES7）的 Array.prototype.flat 和 Array.prototype.flatMap 方法简化数组操作

在前端开发中，经常需要对数组进行操作，例如过滤、映射、拼接等等。ES6 中引入了许多新的数组操作方法，如 filter、map、reduce 等等，这些方法大大简化了数组操作的代码量。而在 ES7 中，又引入了两个新的方法：Array.prototype.flat 和 Array.prototype.flatMap，它们同样可以帮助我们简化数组操作的代码量。

Array.prototype.flat

Array.prototype.flat 方法可以将一个多维数组扁平化为一个一维数组。它接受一个可选的参数，表示要扁平化的层数。

示例代码：

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

const arr2 = [1, [2, [3]]];
const flatArr2 = arr2.flat(2);
console.log(flatArr2); // [1, 2, 3]

在上面的示例中，我们定义了一个多维数组 arr，它包含一个数字和一个嵌套的数组。我们调用了 arr.flat() 方法，将它扁平化为一个一维数组 flatArr。由于嵌套的数组只有一层，因此 flatArr 中仍然包含一个数组。接着我们定义了另一个多维数组 arr2，它包含一个数字和两层嵌套的数组。我们调用了 arr2.flat(2) 方法，将它扁平化为一个一维数组 flatArr2，其中包含所有的数字。

Array.prototype.flatMap

Array.prototype.flatMap 方法可以将一个数组映射为另一个数组，并将结果扁平化为一个一维数组。它接受一个参数，表示要映射的函数。

示例代码：

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

在上面的示例中，我们定义了一个数组 arr，它包含三个数字。我们调用了 arr.flatMap 方法，将它映射为一个新的数组，其中每个数字都乘以了 2。由于映射的结果是一个数组，因此 flatMapArr 中包含了所有的数字。

总结

使用 Array.prototype.flat 和 Array.prototype.flatMap 方法可以大大简化数组操作的代码量，让代码更加简洁和易于维护。需要注意的是，这两个方法都是 ES7 中引入的，因此需要在支持 ES7 的环境下使用。

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