AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

如何在 JavaScript 中合并两个数组而不出现重复的情况

2023-07-20 100
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如何在 JavaScript 中合并两个数组而不出现重复的情况

目录

  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)]

假设我们有两个数组 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() 中创建一个克隆对象，这样我们就不会改变原来的数组。


  4. 创建一个嵌套循环，查找并删除使用 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 > "+ mergeAndG
文章标签：
JavaScript
前端开发
CDN
算法
关键词：
JavaScript数组
JavaScript合并
JavaScript合并数组
小柴没吃饱
目录
相关文章
chnjames
|
25天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南：20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧，涵盖了从基本的添加、移除元素，到数组转换和去重等高级操作。强调了不可变性的重要性，提供了清晰的代码示例，帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者，这些技巧都将显著提升您的编码能力，使您在项目中更具竞争力。
chnjames
17 2
神明木佑
|
28天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
神明木佑
20 3
神明木佑
|
30天前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
神明木佑
34 4
邹荣乐
|
28天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
邹荣乐
29 1
小强在此
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
23 5
Li370234940
|
1月前
|
JavaScript 前端开发 索引
探索JavaScript数组：基础
探索JavaScript数组：基础
Li370234940
17 3
Li370234940
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素（ 5种方法 ）
JS 删除数组元素（ 5种方法 ）
Li370234940
31 1
神明木佑
|
28天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
神明木佑
13 0
邹荣乐
|
28天前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍（一）
JavaScript中数组、对象等循环遍历的常用方法介绍（一）
邹荣乐
17 0
java冯坚持
|
30天前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结，包括插入，删除，更新，反转，排序等，如map、splice等
JavaScript数组的常用高阶函数，包括遍历、插入、删除、更新、反转和排序等操作，如map、splice、push、pop、reverse等。
java冯坚持
17 0