【JavaScript 教程】第六章 数组16—flat() ：递归地将数组展平到指定的深度

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节，我们学习如何使用 JavaScript Array join()方法将数组的所有元素连接成由分隔符分隔的字符串，错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组15—join() ：将所有元素连接成一个字符串》进行学习。

那么，在今天的教程中，我们将一起来学习如何使用 JavaScript Array flat() 方法来展平数组。

JavaScript Array flat() 方法介绍

ES2019 引入了 Array.prototype.flat() 方法，该方法创建一个新数组，其中子数组的所有元素递归连接到指定深度。

下面显示了 flat() 方法的语法：

let newArray = arrayObject.flat([depth])

depth 参数指定该方法使数组结构平坦的深度，它默认为 1。

下面的例子展示了如何扁平化一个数字数组：

const numbers = [1, 2, [3, 4, 5]];
const flatNumbers = numbers.flat();
console.log(flatNumbers);

输出：

[1, 2, 3, 4, 5]

在这个例子中，我们没有将深度参数传递给 flat() 方法，因此深度默认为 1。flat() 方法将嵌套数组 [3,4,5] 的所有元素连接到新数组的元素。

请注意， flat() 方法会创建一个新数组并且不会更改原始数组：

console.log(numbers);

输出：

[ 1, 2, [ 3, 4, 5 ] ]

以下示例将具有两级深度的数组展平：

const numbers = [1, 2, [3, 4, 5, [6, 7]]];
const flatNumbers = numbers.flat(2);
console.log(flatNumbers);

输出：

[1, 2, 3, 4, 5, 6, 7]

当我们不知道深度级别时，可以将 Infinity 传递给 flat() 方法，以递归方式将子数组的所有元素连接到新数组中：

const numbers = [1, 2, [3, 4, 5, [6, 7, [8, 9]]]];
const flatNumbers = numbers.flat(Infinity);
console.log(flatNumbers);

如果一个数组有空槽，我们可以使用 flat() 方法去除空洞，像这样：

const numbers = [1, 2, , 4, , 5];
const sequence = numbers.flat();
console.log(sequence);

输出：

[ 1, 2, 4, 5 ]

总结

使用 Array.prototype.flat() 方法将包含嵌套数组的数组展平。

使用 depth 参数指定嵌套数组应该展平的深度，深度默认为 1。

flat() 还删除了数组中带有空槽的孔。

今天的内容就到这里了。

如果您还想学习更多关于数组的内容，请点击下文链接进行学习。

【JavaScript 教程】第六章 数组14—reduce() ：将数组的元素减少为一个值

【JavaScript 教程】第六章 数组13— forEach() ：遍历数组元素

【JavaScript 教程】第六章 数组12— map() ：转换数组元素

【JavaScript 教程】第六章 数组11— filter() ：过滤数组中的元素

【JavaScript 教程】第六章 数组10— sort() ：对数组中的元素进行排序

【JavaScript 教程】第六章 数组09— some() ：检查数组中是否至少有一个元素通过了测试

【JavaScript 教程】第六章 数组08— every() ：检查数组中的每个元素是否都通过了测试

【JavaScript 教程】第六章 数组07— index() ：在数组中定位一个元素

【JavaScript 教程】第六章 数组06— slice() ：复制数组元素

【JavaScript 教程】第六章 数组05— splice()：删除、插入和替换

【JavaScript 教程】第六章 数组04— JavaScript 队列

【JavaScript 教程】第六章 数组03— Stack ：使用 Array 的push()和pop()方法实现堆栈数据结构

【JavaScript 教程】第六章 数组02— Array Length：如何有效地使用数组的长度属性

【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型

学习更多技能

请点击下方公众号