如何在 JavaScript 中合并两个数组而不出现重复的情况
-
JavaScript 在 ECMAScript 6 中使用
Spread 语法
合并数组 -
JavaScript 使用 ECMAScript 5 中的
Array.concat
函数合并数组 -
使用
for
循环从一个数组中删除重复的内容 -
JavaScript 在 ECMAScript 6 中使用
Array.prototype
从一个数组中删除数组重复的内容 -
JavaScript 在 ECMAScript 5 中使用
Object.defineProperty
从数组中删除重复的元素 -
使用
Lo-Dash
或Underscore.js
合并并只保留唯一值 -
在 ECMAScript 6 中使用
Set
合并并只保留唯一值 -
使用
for
循环和Dictionary
进行无重复值的合并,复杂度仅为 O(n)
本教程将学习我们如何在 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 循环。
我们的算法将是这样的。
- 从输入数组
inArray
中创建一个克隆,所以我们不会改变原来的数组。 - 创建一个嵌套循环,用
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
。
我们的算法将是这样的。
- 从数组对象
this.concat()
中创建一个克隆对象,这样我们就不会改变原来的数组。 - 创建一个嵌套循环,查找并删除使用
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) );