迹忆客 专注技术分享

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >
Vue React JavaScript Angular CSS HTML

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

作者：迹忆客 最近更新：2024/03/23 浏览次数：

本教程将学习我们如何在 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) );

上一篇：在 JavaScript 中更改页面标题

下一篇：没有了

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

相关文章

在 JavaScript 中闪烁文本

发布时间：2024/03/22 浏览次数：119 分类：JavaScript

本文将介绍如何通过窗口对象加载函数、onload 属性和使用 JavaScript 的 jQuery 约定来执行文本闪烁。

在 JavaScript 中高亮显示文本

发布时间：2024/03/22 浏览次数：103 分类：JavaScript

本教程向我们展示了如何使用 JavaScript 高亮显示文本。将用于此目的的方法是 searchPrompt 方法和标记标记方法，将使用代码段详细说明。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

Mysql Jquery Javascript Angular Flask Python Django CSharp C# Batch Linux Bash C++ arduino Numpy powershell R Rust Ruby Matlab git Cpp C Java
扫码一下
查看教程更方便