如何使用 JavaScript 合并/组合数组？

JavaScript 中有很多合并数组的方法。我们将讨论合并数组中经常遇到的两个问题陈述：

1. 合并而不删除重复元素。
2. 删除重复元素后合并。

合并而不删除重复元素：我们将首先从三个数组开始并合并它们。稍后，我们将把它推广到不定数量的数组。

三个数组说明如下：
let nums1 = [1, 2, 3, 4]
let nums2 = [3, 4, 5, 6]
let nums3 = [5, 6, 7, 8]

我们必须合并它们，以便我们的新数组变为：

combinedNums = [1, 2, 3, 4, 3, 4, 5, 6, 5, 6, 7, 8]

1. 使用 concat() 方法： concat() 方法接受数组作为参数并返回合并后的数组。

     
       // Elements of nums2 and nums3 concatenated
       // with elements of nums1 and returns the 
       // combined array - combinedSum array
       let combinedNums = nums1.concat(nums2, nums3);
     
       // More readable form
       let combinedNums = [].concat(nums1, nums2, nums3);
     
       console.log(combinedNums);

   输出：

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

2. 使用扩展运算符：扩展运算符将数组的值扩展为其组成元素。

       let combinedNums = [...nums1, ...nums2, ...nums3];
     
       console.log(combinedNums);

   输出：

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

3. 使用 push() 方法： push() 方法与扩展运算符一起使用，将数组的元素推送到现有数组中。当我们需要将值附加到现有数组并且不需要返回新数组时，它特别有用。

   注意：如果不使用扩展运算符，则附加整个数组。

       nums1.push(...nums2, ...nums3);
       console.log(nums1);
     
       // If spread operator is not used
       nums1.push(nums2, nums3);
       console.log(nums1);

   输出：

   first log: [1, 2, 3, 4, 3, 4, 5, 6, 5, 6, 7, 8]
   second log: [1, 2, 3, 4, [3, 4, 5, 6], [5, 6, 7, 8]]
   

我们现在将其推广到合并不定数量的数组：
我们的函数mergeArrays接受任意数量的数组作为参数（剩余运算符）。我们将使用 forEach 循环遍历每个数组并将其添加到我们的最终数组中： mergedArray 。

下面是使用 concat、spread 运算符和 push 方法的实现：

1. 使用 array.concat() 方法：

       let nums1 = [1, 2, 3, 4];
       let nums2 = [3, 4, 5, 6];
         
       function mergeArrays(...arrays) {
           let mergedArray = [];
     
           arrays.forEach(array => {
               mergedArray = mergedArray.concat(array)
           });
     
           return mergedArray;
       }
     
       console.log(mergeArrays(nums1, nums2));

   输出：

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

2. 使用扩展运算符：

       let nums1 = [1, 2, 3, 4];
       let nums2 = [3, 4, 5, 6];
         
       function mergeArrays(...arrays) {
           let mergedArray = [];
     
           arrays.forEach(array => {
               mergedArray = [...mergedArray, ...array]
           });
     
           return mergedArray;
       }
     
       console.log(mergeArrays(nums1, nums2));

   输出：

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

3. 使用 Array.push() 方法：

       let nums1 = [1, 2, 3, 4];
       let nums2 = [3, 4, 5, 6];
         
       function mergeArrays(...arrays) {
           let mergedArray = [];
     
           arrays.forEach(array => {
               mergedArray.push(...array)
           });
     
           return mergedArray;
       }
     
       console.log(mergeArrays(nums1, nums2));

   输出：

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

   合并和删除重复元素：考虑以下三种方法：

   1. 使用 set() 方法：在这里，我们将 mergeArray 元素传播到我们的集合中。 Set 存储唯一的项目并删除重复项。然后，我们将集合中的元素展开到一个新数组中，并返回具有合并非重复元素的数组。

          let nums1 = [1, 2, 3, 4];
          let nums2 = [3, 4, 5, 6];
          let nums3 = [5, 6, 7, 8];
           
          function mergeNoDuplicates(...arrays) {
              let mergedArray = [];
        
              arrays.forEach(array => {
                  mergedArray = [...mergedArray, ...array]
              });
        
              return [...new Set([...mergedArray])];
          }
        
          console.log(mergeNoDuplicates(nums1, nums2, nums3));

      输出：

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

   2. 使用 filter() 方法：在这种方法中，我们根据元素在数组中的第一次出现来过滤掉mergedArray 的元素。我们通过 indexOf 方法获取它的第一个索引来检查项目是否首先出现。

          let nums1 = [1, 2, 3, 4];
          let nums2 = [3, 4, 5, 6];
          let nums3 = [5, 6, 7, 8];
            
          function mergeNoDuplicates(...arrays) {
              let mergedArray = [];
        
              arrays.forEach(array => {
                  mergedArray = [...mergedArray, ...array]
              });
        
              const mergedUnique = mergedArray
                  .filter((item, index) => 
                      mergedArray.indexOf(item) === index);
              return mergedUnique;
          }
        
          console.log(mergeNoDuplicates(nums1, nums2, nums3));

      输出：

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

   3. 使用 Array reduce() 方法：在这种方法中，我们将 noDuplicates 数组作为累加器。如果 noDuplicates 数组中尚不存在一个项目，则将其附加到此数组中。如果一个项目已经存在，我们只需返回当前数组进行下一次迭代。

          let nums1 = [1, 2, 3, 4];
          let nums2 = [3, 4, 5, 6];
          let nums3 = [5, 6, 7, 8];
            
          function mergeNoDuplicates(...arrays) {
              let mergedArray = [];
        
              arrays.forEach(array => {
                  mergedArray = [...mergedArray, ...array]
              });
        
              const mergedUnique = mergedArray
                 .reduce((noDuplicates, item) => {
                  if (noDuplicates.includes(item)) {
                      return noDuplicates;
                  }
        
                  else {
                      return [...noDuplicates, item];
                  }
              }, [])
        
              return mergedUnique;
          }
        
          console.log(mergeNoDuplicates(nums1, nums2, nums3));

      输出：

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