ES10 之 Array.prototype.flat() 你真使用对了吗？-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 技术的不断发展，ES10 中新增的 Array.prototype.flat() 方法逐渐崭露头角，成为前端开发者必须了解并且掌握的知识点之一。用途广泛、灵活多变，可以让我们轻松地处理多维数组以及拍平数组等操作，提高代码质量和效率。但是，你真正掌握了这个方法吗？接下来，就让我们一起来深入探究一下。

一、什么是 Array.prototype.flat()

Array.prototype.flat() 方法是 ES10 中新增的一个数组方法，用于将嵌套的数组“拍平”，变成一维数组，并且可以控制扁平化的深度。该方法会返回一个新的一维数组，原数组不会改变。

Array.prototype.flat() 方法的语法如下：

array.flat([depth])

其中，depth 是可选参数，表示想要拍平的深度，默认为 1。当 depth 为 Infinity 的时候，将会拍平所有嵌套数组。

二、如何正确使用 Array.prototype.flat()

正如我们所了解到的，Array.prototype.flat() 方法能够帮助我们处理多维数组以及拍平数组，提高我们代码的效率和可读性。接下来，我将为大家提供一些实例和注意事项。

1. 将多维数组扁平化

我们可以使用 Array.prototype.flat() 方法将多维数组扁平化为一维数组。例如，将一个数组 [1, 2, [3, 4]] 扁平化为 [1, 2, 3, 4]，可以使用如下代码实现：

const arr = [1, 2, [3, 4]];
const flatArr = arr.flat();

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

2. 控制拍平深度

在使用 Array.prototype.flat() 方法时，我们可以控制扁平化的深度。例如，我们可以将一个深度为 2 的多维数组拍平为一维数组：

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

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

3. 忽略空数组

在嵌套数组中，如果存在空数组 [] 或者含有空数组的数组 [1, [ , 2]]，使用 flat() 方法默认会将空数组删除，因此我们可以使用 filter 方法或者设置 depth 参数来避免意外删除我们的数据。

4. 嵌套数组展开

我们可以使用 Array.prototype.flat() 方法在展开多维嵌套的数组中，例如：

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

5. flat() 与 map() 搭配使用

我们也可以使用 Array.prototype.flatMap() 方法展开嵌套数组，例如：

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

但是，当我们想要将嵌套数组中的每个元素进行修改，然后再进行拍平时，我们也可以使用 map() 方法搭配 flat() 方法使用，例如：

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

三、注意事项

在使用 Array.prototype.flat() 方法时，我们需要注意以下事项：

若 depth 太大，会占用过多的内存；
注意空数组的处理；
若不是对数组中所有的值进行操作，考虑使用 flatMap() 方法。

四、结语

Array.prototype.flat() 方法是 ES10 中的一个重要新特性，能够处理多维数组以及拍平数组等操作，用途广泛。当然，我们在使用过程中还需要注意一些问题，这样才能更好地发挥它的功能，提高代码质量和效率。我希望本文可以帮助大家更深入地理解和掌握这个方法，从而在实际的开发过程中更加得心应手。

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

ES10 之 Array.prototype.flat() 你真使用对了吗？