数组合并的四种方法的区别

数组合并是我们日常中通常使用的方法，那么，什么条件下用什么方法？方法的区别是什么呢？
随我一起，我来告诉你。

1.数组合并的4种方法

先考验一下大家，数组合并有几种方法，分别是什么？

这不是面试，所以，我的答案也不一定准确哦，我一般会使用到4种方法。

• new Set() 方法
• concat()方法
• push()方法
• 扩展操作符...

怎么样？各位。
在我说出这四种方法的时候，你们想到他们的使用方法、使用场景和优缺点了吗？

如果抱着都能用的思想，那任何的方法都是一样的，如果你想优化你的代码，减少内存消耗，那你就得考虑一下使用场景了。

2.使用方法

如果你都不会使用，那么，无所谓场景。所以，首先，一起来看看，这4个方法都是如何使用的吧！

const array1 = [1,2,3];
const array2 = [2,3,4];
const array3 = [7,8,9,10];

2.1 new Set() 方法

作用：合并数组并去重。

const arraySet = [...new Set([...array1, ...array2, ...array3])];
console.log(arraySet)
//输出：[1,2,3,4,7,8,9,10]

为什么new set 这样写，大家具体的可以考古的的另一篇文章：
《new Set与…new Set()区别》

2.2 concat()方法

作用：合并两个或多个数组。它不修改现有数组，而是返回一个新数组。

const arrayConcat = array1.concat(array2, array3);
console.log(arrayConcat)
//输出：[1,2,3,2,3,4,7,8,9,10]

2.3 push()方法

作用：向一个数组的尾部添加一个或多个元素，并返回新数组长度。

//两种写法
//写法一：返回新的数组长度
const arrayPush = array1.push(...array2, ...array3);
console.log(arrayPush);
//输出：10

//写法二：不要这个无用的长度
array1.push(...array2, ...array3);
console.log(array1)
//输出：[1,2,3,2,3,4,7,8,9,10]

2.4 扩展操作符...

作用：合并数组

const array4 = [...array1,...array2,...array3];
console.log(array4);
//输出： [1, 2, 3, 2, 3, 4, 7, 8, 9, 10]

3.优缺点

从上述的写法，相信一些机智的小伙伴已经看出了端倪。
那就由我来揭开它们神秘的面纱吧！

接下来，我会从是否生成新数组，时间复杂度、以及内存占用三方面来分析。

• new Set()
  • 是否生成新数组：是
  • 时间复杂度：
    • 合并多个数组时，我们首先使用扩展操作符 … 将它们展开，然后将展开后的结果传递给 Set 构造函数。这个过程的时间复杂度是 O(n)，其中 n 是多个数组中所有元素的总长度。
    • 使用 Set 进行去重的过程的时间复杂度是 O(m)，其中 m 是合并后的数组的长度。
    • 所以总的时间复杂度是 O(n + m)，以上述例子，则时间复杂度是O(10+8)
  • 内存占用：Set 存储的是唯一值，因此如果合并的数组中存在重复元素，Set 将只保留其中的一个副本，从而节省内存。
• concat()
  • 是否生成新数组：是
  • 时间复杂度：
    • 它需要创建一个新数组，并将所有元素复制到其中，时间复杂度为 O(n)，其中 n 是所有数组的总长度。
    • 以上述例子，则时间复杂度是O(10)
  • 内存占用：concat 方法会创建一个新数组，在合并数组时可能会导致额外的内存开销。
• push()
  • 是否生成新数组：否
  • 时间复杂度：
    • push 方法在数组末尾添加元素的时间复杂度为 O(1)。但在将一个数组的元素添加到另一个数组末尾时，需要将所有元素复制到新数组中，时间复杂度为 O(m)，其中 m 是被添加的数组的长度。
    • 以上述例子，则时间复杂度是O(7)
  • 内存占用：push 方法会修改原始数组，在合并数组时可能会导致额外的内存开销。
• 扩展操作符...
  • 是否生成新数组：是
  • 时间复杂度：
    • 使用扩展操作符 … 将它们展开，然后将展开后的结果传递给数组。这个过程的时间复杂度是 O(n)，其中 n 是多个数组中所有元素的总长度。
    • 以上述例子，则时间复杂度是O(10)
  • 内存占用：concat 方法会创建一个新数组，在合并数组时可能会导致额外的内存开销。

通过实验发现，这四种方法，各有利弊

• 优点：
  • new Set()：可以在合并数组的同时进行去重。
  • concat()：是复制粘贴操作，不会改变原数组。
  • push()：如果是将小数组合并给大数组，push的时间复杂度最低。
  • 扩展操作符...：不改变原数组，操作比较简洁，不需要编写额外的逻辑。
• 缺点
  • new Set()：顺序不保证。Set 不保证元素的顺序，即合并后的数组的顺序可能与原始数组的顺序不同。如果您需要保留原始数组的顺序，则可能不适合使用 Set。
  • concat()：在合并大型数组时,由于生成新数组，性能会慢。
  • push() ：方法会直接修改原始数组，而不是创建一个新的数组。这可能会导致意外的副作用，特别是在多个地方共享相同的数组时。
  • 扩展操作符...： 在合并大型数组时，操作符的性能可能会比较差。

结论：

综合考虑，
如果需要去除重复值，并且不关心元素的顺序，则可以使用 new Set()。
如果希望简洁地合并数组，并且不改变原始数组，可以考虑使用 concat() 方法或操作符 …。
如果性能很重要，或者希望原地修改原始数组，则 push() 方法可能更适合。

日拱一卒，不断前行。