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

  2. 貼士文章
  3. JavaScript 貼士
  4. 如何在 JavaScript 中合併兩個陣列而不出現重複的情況
Moataz Farid 2023年1月30日 2020年11月24日
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