​前端技巧：JavaScript 中如何把数组复制n份合并成一个新数组？

目录

• 前言
• 实现方法
  • 方法一：使用循环和concat
  • 方法二：使用 flatMap
  • 方法三：使用 reduce
  • 方法四：使用扩展运算符 ...和concat
  • 方法五：使用扩展运算符 ...和flat
• 总结

前言

你好，我是喵喵侠。作为一名前端开发，在开发页面的时候，经常需要跟后端工程师进行接口联调。后端工程师会把数据以接口的形式，返回给前端，前端需要拿这些数据，以特定的方式渲染到页面，呈现出精彩纷呈的界面和交互效果。

然而有时候前端页面先行，后端接口后行，亦或是后端返回的数据很少，需要前端Mock大量数据。这种情况前端造数据的方式就有很多了，有专门的第三方库Mock.js，也可以自己造一些写死一些数据做测试。本文就是属于后者的应用之一，当你的数组里面的数据不够多的时候，可以快速构建重复的数据，来解决数据不足的问题，所以也就有了本文标题的内容。

接下来我将会为你介绍，如何在JavaScript中把数组复制n份，并且合并成一个新的数组的几种具体实现方法，以及我会在文章最后，推荐最简洁的一种写法。我们现在一起来看看吧！

实现方法

假设Vue项目某个页面上，有一个table组件，组件需要的数据是一个数组对象dataSourse。原本自己Mock或者后端返回的，只有3条数据，如果你想要*5变成15条，那么把这个数组对象赋值n份合并，再重新赋值给dataSourse，那么这个表格的行就迅速变成了15条。如果需要更多，改变n的值就好了。

假设原数组dataSourse的值如下：

this.dataSourse = [{name: '啊酷', age: 20}, {name: '番茄', age: 18}]

以这个原有的值为基础来做复制，下面是几种不同的实现方法。

方法一：使用循环和concat

let n = 5;  // 要复制的次数
let newDataSource = [];
for (let i = 0; i < n; i++) {
  newDataSource = newDataSource.concat(this.dataSource);
}
this.dataSource = newDataSource;

方法二：使用 flatMap

let n = 5;  // 要复制的次数
this.dataSource = Array(n).fill(this.dataSource).flatMap(x => x);

方法三：使用 reduce

let n = 5;  // 要复制的次数
this.dataSource = Array(n).fill(this.dataSource).reduce((acc, curr) => acc.concat(curr), []);

这些方法都能将 this.dataSource 复制 n 份并合并到一个新的数组中，你可以选择任意一种最适合你代码风格和需求的方法。

方法四：使用扩展运算符 ...和concat

let n = 5;  // 要复制的次数
this.dataSource = [].concat(...Array(n).fill(this.dataSource));

方法五：使用扩展运算符 ...和flat

let n = 5;  // 要复制的次数
this.dataSource = [...Array(5).fill(this.dataSource).flat()];

上面看起来，循环是最好理解的笨办法；reduce高阶函数理解起来要稍微困难一些，如果你用的不是很多的话。我个人最喜欢方法五，因为这个方法一行代码就能搞定，而且代码简化了不少，flat可以很方便的把数组进行扁平化。

需要注意的是，复制多个数组，可以很方便的模拟数据多，页面出现滚动条的情况，但对于表格来说，通常UI框架会要求table组件的每一条数据都有唯一的key作为标识（通常是id），如果你用这种方式扩大n倍，很可能会出现警告或者操作时候报错。所以我个人觉得这个主要是可以用来查看数据量小和数据量大对页面展示效果的影响，具体的情况还需要进行特殊的处理。

总结

通过本文的讲解，希望你对数组的复制和合并操作有了更深的理解。我们探讨了如何使用扩展运算符 ... 和一些数组内置的方法来实现这一需求。如果你对某些数组方法还不太熟悉，不妨多动手尝试一下。掌握这些技巧，不仅能提升你的编码效率，也能让你的代码更加简洁和高效。在实际项目中，善用这些方法可以显著简化操作流程，让代码更具可读性和维护性。有任何疑问，或者想与我探讨的，欢迎在评论区留言。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！