如何在 JavaScript 中合併兩個陣列而不出現重複的情況

  2. 貼士文章
  3. JavaScript 貼士
  4. 如何在 JavaScript 中合併兩個陣列而不出現重複的情況
Moataz Farid 2023年10月12日
JavaScript Java Array
  1. JavaScript 在 ECMAScript 6 中使用 Spread 語法 合併陣列
  2. JavaScript 使用 ECMAScript 5 中的 Array.concat 函式合併陣列
  3. 使用 for 迴圈從一個陣列中刪除重複的內容
  4. JavaScript 在 ECMAScript 6 中使用 Array.prototype 從一個陣列中刪除陣列重複的內容
  5. JavaScript 在 ECMAScript 5 中使用 Object.defineProperty 從陣列中刪除重複的元素
  6. 使用 Lo-Dash 或 Underscore.js 合併並只保留唯一值
  7. 在 ECMAScript 6 中使用 Set 合併並只保留唯一值
  8. 使用 for 迴圈和 Dictionary 進行無重複值的合併，複雜度僅為 O(n)
如何在 JavaScript 中合併兩個陣列而不出現重複的情況

本教程將學習我們如何在 JavaScript 中合併兩個陣列而不出現任何重複的值。

首先，我們將展示 ES5 和 ES6 版本中不同的合併方法。

然後，我們將學習如何使用不同的方法刪除重複的內容。

最後，你將學習如何通過編寫自己的函式或使用外部庫，只需一步就能完成操作。

假設我們有兩個陣列 arrayA 和 arrayB，我們想把它們合併到 arrayC 中。

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

JavaScript 在 ECMAScript 6 中使用 Spread 語法 合併陣列

展開語法(...)是用來展開可迭代元素的內容，比如說，在期望有陣列這樣的元素的地方，或者在函式中期望有零或更多引數的地方。

var arr = [2, 4];

function add(x, y) {
  return x + y;
}

console.log(add(...arr));

現在讓我們使用 擴充套件語法 將我們的陣列合併到 arrayC 中。

arrayC = [...arrayA, ...arrayB];
console.log(arrayC);

示例程式碼：

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//merging using the spread syntax
arrayC = [...arrayA,...arrayB];
console.log("Merged Using Spread Syntax >"+arrayC);

輸出：

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Spread Syntax >Java,JavaScript,C#,PHP,Java

JavaScript 使用 ECMAScript 5 中的 Array.concat 函式合併陣列

合併使用 Array.concat 是用來將輸入陣列(arrayB)的內容與源陣列(arrayA)的內容進行連線。

arrayC = arrayA.concat(arrayB);
console.log(arrayC);

如果我們想從結果陣列中刪除重複的內容，我們可以通過多種方法來實現，所以讓我們看看如何實現。

例子:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//merging using Array.concat function in ECMAScript 5
arrayC = arrayA.concat(arrayB);
console.log("Merged Using Array.concat function >"+arrayC);

輸出：

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Array.concat function >Java,JavaScript,C#,PHP,Java

使用 for 迴圈從一個陣列中刪除重複的內容

最簡單的方法就是建立自己的巢狀 for 迴圈。

我們的演算法將是這樣的。

  1. 從輸入陣列 inArray 中建立一個克隆，所以我們不會改變原來的陣列。
  2. 建立一個巢狀迴圈，用 arr.splice() 找到並刪除重複的元素。外層從 n 開始，內部從 n+1 開始。
function removeDuplicates(inArray) {
  var arr =
      inArray
          .concat()  // create a clone from inArray so not to change input array
  // create the first cycle of the loop starting from element 0 or n
  for (var i = 0; i < arr.length; ++i) {
    // create the second cycle of the loop from element n+1
    for (var j = i + 1; j < arr.length; ++j) {
      // if the two elements are equal , then they are duplicate
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);  // remove the duplicated element
      }
    }
  }
  return arr;
}

然後我們就可以像其他函式一樣使用那個 removeDuplicates 函式。

var arrayWithoutDuplicates = removeDuplicates(arrayC);
console.log(arrayWithoutDuplicates);

例子: removeDuplicates 函式

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//removing duplicates from an array using nested for loop

function removeDuplicates(inArray){
    var arr = inArray.concat() // create a clone from inArray so not to change input array
    //create the first cycle of the loop starting from element 0 or n
    for(var i=0; i<arr.length; ++i) {
        //create the second cycle of the loop from element n+1
        for(var j=i+1; j<arr.length; ++j) {
            //if the two elements are equal , then they are duplicate
            if(arr[i] === arr[j]) {
                arr.splice(j, 1); //remove the duplicated element 
            }
        }
    }
    return arr;
}
arrayC = arrayA.concat(arrayB);
console.log("Merged arrayC > "+ arrayC );
console.log("Removing duplicates using removeDuplicates > "+ removeDuplicates(arrayC) );

輸出：

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged arrayC > Java,JavaScript,C#,PHP,Java
Removing duplicates using removeDuplicates > Java,JavaScript,C#,PHP

JavaScript 在 ECMAScript 6 中使用 Array.prototype 從一個陣列中刪除陣列重複的內容

我們還可以使用 Array.prototype 刪除重複的內容，以防我們可以使用 ECMAScript 6。

甚至 prototype 是什麼意思？prototype 就像 JavaScript 中所有函式和物件相關聯的物件。

讓我們看看如何使用 Array.prototype。

我們的演算法將是這樣的。

  1. 從陣列物件 this.concat() 中建立一個克隆物件，這樣我們就不會改變原來的陣列。
  2. 建立一個巢狀迴圈，查詢並刪除使用 arr.splice() 找到的重複元素。外層從 n 開始，內部從 n+1 開始。
Array.prototype.removeDuplicates = function() {
  var arr = this.concat();  // create a clone from the input so not to change
                            // the source
  // create the first cycle of the loop starting from element 0 or n
  for (var i = 0; i < arr.length; ++i) {
    // create the second cycle of the loop from element n+1
    for (var j = i + 1; j < arr.length; ++j) {
      // if the two elements are equal , then they are duplicate
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);  // remove the duplicated element
      }
    }
  }
  return arr;
}

那麼呼叫該原型可以是這樣的。

var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);

例子：JavaScript 從陣列中刪除重複元素

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);


//removing duplicates from an array using Array.prototype in ECMAScript 6
Array.prototype.removeDuplicatesPrototype = function() {
   var arr = this.concat(); // get the input array
   //create the first cycle of the loop starting from element 0 or n
   for(var i=0; i<arr.length; ++i) {
       //create the second cycle of the loop from element n+1
       for(var j=i+1; j<arr.length; ++j) {
           //if the two elements are equal , then they are duplicate
           if(arr[i] === arr[j]) {
               arr.splice(j, 1); //remove the duplicated element 
           }
       }
   }
   return arr;
}
console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesPrototype > "+arrayC.removeDuplicatesPrototype());

JavaScript 在 ECMAScript 5 中使用 Object.defineProperty 從陣列中刪除重複的元素

如果我們只能使用 ECMAScript 5，我們可以使用 Object.defineProperty 來建立我們自己的屬性，這樣我們就可以從所有 Array 型別的元素中刪除重複的內容。

這裡我們通過鍵入 Array.prototype 來定義屬性型別為陣列原型。屬性的名稱應該作為下一個引數 removeDuplicates 插入。

讓我們看看它是如何正確寫的。

Object.defineProperty(Array.prototype, 'removeDuplicates', {
  // defining the type and name of the property
  enumerable: false,
  configurable: false,
  writable: false,
  value: function() {
    var arr = this.concat();  // get the input array
    // create the first cycle of the loop starting from element 0 or n
    for (var i = 0; i < arr.length; ++i) {
      // create the second cycle of the loop from element n+1
      for (var j = i + 1; j < arr.length; ++j) {
        // if the two elements are equal , then they are duplicate
        if (arr[i] === arr[j]) {
          arr.splice(j, 1);  // remove the duplicated element
        }
      }
    }
    return arr;
  }
});

然後我們就可以直接呼叫這個屬性。

var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);

例子

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);

//removing duplicates from an array using defineProperty in ECMAScript 5
Object.defineProperty(Array.prototype, 'removeDuplicatesProperty', { //defining the type and name of the property
    enumerable: false,
    configurable: false,
    writable: false,
    value: function() {
        var arr = this.concat(); // get the input array
        //create the first cycle of the loop starting from element 0 or n
        for(var i=0; i<arr.length; ++i) {
            //create the second cycle of the loop from element n+1
            for(var j=i+1; j<arr.length; ++j) {
                //if the two elements are equal , then they are duplicate
                if(arr[i] === arr[j]) {
                    arr.splice(j, 1); //remove the duplicated element 
                }
            }
        }
        return arr;
    }
});

console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesProperty > "+arrayC.removeDuplicatesProperty() );

使用 Lo-Dash 或 Underscore.js 合併並只保留唯一值

如果目標是要從兩個或多個陣列中獲取一個新的唯一值陣列，並使用外部檔案，我們可以使用 Lo-Dash 庫來實現。

首先，我們需要在 HTML 模板裡面使用 Cloudflare CDN 匯入該庫。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

然後，我們使用像庫。

arrayC = _.union(arrayA, arrayB);

例子：

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];

console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);

// merging arrayA and arrayB keeping only unique values using Lo-Dash library
//  don't forget to import the script using <script
//  src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

console.log(
    'Merging arrayA and arrayB keeping only unique values using Lo-Dash Lib. > ' +
    _.union(arrayA, arrayB));

在 ECMAScript 6 中使用 Set 合併並只保留唯一值

如果我們可以使用 ECMAScript 6，並且我們的目標只是多個陣列的唯一值，那麼 Set 可以是一個非常好的選擇。

我們可以像下面的例子一樣使用 Spear 語法。

arrayC = [...new Set([...arrayA, ...arrayB])];

或者我們可以這樣使用

arrayC = Array.from(new Set(arrayA.concat(arrayB)));

例子:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];

console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);

// merging arrayA and arrayB keeping unique values using Set in ECMAScript 6

console.log(
    'Merging arrayA and arrayB keeping only unique values using Set > ' +
    Array.from(new Set(arrayA.concat(arrayB))));

console.log(
    'Merging arrayA and arrayB keeping only unique values using Set with spread syntax > ' +
    [...new Set([...arrayA, ...arrayB])]);

使用 for 迴圈和 Dictionary 進行無重複值的合併，複雜度僅為 O(n)

另一種合併兩個陣列並得到沒有重複值的結果的方法是使用 JavaScript 中 字典 的概念，我們不能有兩個重複的值。

function mergeAndGetUnique(arrayA, arrayB) {
  var hash = {};
  var x;

  for (x = 0; i < arrayA.length; i++) {
    hash[arrayA[i]] = true;
  }
  for (x = 0; i < arrayB.length; i++) {
    hash[arrayB[i]] = true;
  }
  return Object.keys(hash);
}

然後我們就可以使用我們的函式。

arrayC = mergeAndGetUnique(arrayA, arrayB);

例如：

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);

//merging arrayA and arrayB keeping unique values using dictionary with O(n) complexity

function mergeAndGetUnique(arrayA, arrayB) {
  var hash = {};
  var x;
  
  for (x = 0; x < arrayA.length; x++) {
    hash[arrayA[x]] = true;
  }
  for (x = 0; x < arrayB.length; x++) {
    hash[arrayB[x]] = true;
  }
  return Object.keys(hash);
}

console.log("Merging arrayA and arrayB keeping only unique values using Set with spread syntax > "+ mergeAndGetUnique(arrayA, arrayB) );

相關文章 - Java Array