什么是 Array.prototype.flat() 方法
Array.prototype.flat() 方法是 ES7（ECMAScript2016）中的一个新特性，它可以将多层嵌套的数组转化为单层数组。这个方法非常实用，可以简化很多数组操作的代码。
如何使用 Array.prototype.flat() 方法
Array.prototype.flat() 方法可以接受一个可选的参数，用于指定要展平的嵌套层数。默认参数是 1，表示只展平一层。如果希望展平更多层，可以传入一个大于 1 的整数，或者 Infinity，表示展平全部嵌套层级。
const arr = [1, 2, [3, 4, [5, 6]]]; console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]] console.log(arr.flat(1)); // [1, 2, 3, 4, [5, 6]] console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6] console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6]
Array.prototype.flat() 方法的指导意义
Array.prototype.flat() 方法可以大大简化数组操作的代码。在处理多层嵌套数组时，我们通常会用递归函数或者循环嵌套的方式来展平数组，这种方式比较复杂且容易出错。使用 Array.prototype.flat() 方法可以让代码更加清晰简洁，减少代码量和维护成本。
实际应用示例
下面是一个使用 Array.prototype.flat() 方法的实际应用示例。假设我们有一个数组，里面的元素是一个个点赞过的文章，每个点赞记录包含了用户 ID 和点赞时间。我们希望统计每个用户点赞的文章数，并且按照文章数从多到少排序。
// javascriptcn.com 代码示例
const votes = [
[
{ user: 'A', time: '2022-01-01', articleId: 1 },
{ user: 'B', time: '2022-01-02', articleId: 2 },
],
[
{ user: 'A', time: '2022-01-03', articleId: 3 },
{ user: 'C', time: '2022-01-04', articleId: 4 },
{ user: 'D', time: '2022-01-05', articleId: 4 },
],
[
{ user: 'B', time: '2022-01-06', articleId: 5 },
{ user: 'A', time: '2022-01-07', articleId: 2 },
{ user: 'C', time: '2022-01-08', articleId: 5 },
{ user: 'D', time: '2022-01-09', articleId: 5 },
],
];
const countMap = votes
.flat(Infinity)
.reduce((map, vote) => {
const { user, articleId } = vote;
const key = `${user}.${articleId}`;
map.set(key, (map.get(key) || 0) + 1);
return map;
}, new Map());
const result = Array.from(countMap)
.sort((a, b) => b[1] - a[1])
.map(([key, value]) => ({ user: key.split('.')[0], count: value }));
console.log(result);
// [ { user: 'A', count: 3 },
// { user: 'C', count: 2 },
// { user: 'D', count: 2 },
// { user: 'B', count: 2 } ]在这个示例中，我们使用 flat(Infinity) 方法将 votes 数组展平成一个包含所有点赞记录的数组，然后使用 reduce() 方法将每个用户对每篇文章的点赞次数统计出来，并存入一个 Map 中。最后，使用 Array.from() 方法将 Map 转化为一个二维数组，并根据点赞次数进行排序，得到最终结果。
总结
Array.prototype.flat() 方法是一个非常实用的数组方法，可以将多层嵌套的数组转化为单层数组，大大简化数组操作的代码。在实际开发中，我们可以充分利用这个方法，让代码更加清晰简洁，降低维护成本。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653db3c97d4982a6eb76c5f6