[Solved-6 Solutions] Merge two arrays in Javascript - javascript tutorial
Problem:
How to merge two arrays in Javascript and de-duplicate items ?
Solution 1:
Here We can use a greedy approach to go through each array and track the smallest element, each time adding it to a new merged array.
function mergeTwo(arr1, arr2) {
let merged = [];
let index1 = 0;
let index2 = 0;
let current = 0;
while (current < (arr1.length + arr2.length)) {
let unmerged1 = arr1[index1];
let unmerged2 = arr2[index2];
// if next comes from arr1
if (unmerged1 < unmerged2) {
merged[current] = unmerged1;
index1++;
// if next comes from arr2
} else {
merged[current] = unmerged2;
index2++;
}
current++;
}
return merged;
}
mergeTwo(arr1, arr2);
// [1, 2, 3, 5, 6, 7, 8, 10, 11, 15, 19, undefined]This solution works but we have undefined at the end which will always happen since one of our arrays ran out of elements before we finished merging.
Greedy Approach (with edge cases)
To fix this bug, we need to handle the situation where one array is depleted but the other still has elements. In other words, add the current item in arr1 to merged only if arr1 is not depleted and either arr2 is depleted or the current item in arr1 is less than the current item in arr2.
function mergeTwo(arr1, arr2) {
let merged = [];
let index1 = 0;
let index2 = 0;
let current = 0;
while (current < (arr1.length + arr2.length)) {
let isArr1Depleted = index1 >= arr1.length;
let isArr2Depleted = index2 >= arr2.length;
if (!isArr1Depleted && (isArr2Depleted || (arr1[index1] > arr2[index2]))) {
merged[current] = arr1[index1];
index1++;
} else {
merged[current] = arr2[index2];
index2++;
}
current++;
}
return merged;
}
mergeTwo(arr1, arr2);
// [1, 2, 3, 5, 6, 7, 8, 10, 11, 15, 19, 20]Solution 2:
We have two JavaScript arrays:
var array1 = ["Wiki","Techy"];
var array2 = ["Techy", "Wikitechy"];The output look like this:
var array3 = ["Wiki","Techy","Wikitechy"];The output array should have repeated words removed.
Solution 3:
Merge the arrays (without removing duplicates) use Array.concat:
var array1 = ["Wiki","Techy"];
var array2 = ["Techy", "Wikitechy"];
var array3 = array1.concat(array2); // Merges both arrays
// [ 'Wiki', 'Techy', 'Techy', 'Wikitechy' ]Since there is no 'built in' way to remove duplicate (ECMA-262 actually has Array.forEach which would be great solution for this):
Array.prototype.unique = function() {
var a = this.concat();
for(var i=0; i<a.length; ++i) {
for(var j=i+1; j<a.length; ++j) {
if(a[i] === a[j])
a.splice(j--, 1);
}
}
return a;
};Then, to use it:
var array1 = ["Wiki","Techy"];
var array2 = ["Techy", "Wikitechy"];
// Merges both arrays and gets unique items
var array3 = array1.concat(array2).unique(); Solution 4:
function arrayUnique(array) {
var a = array.concat();
for(var i=0; i<a.length; ++i) {
for(var j=i+1; j<a.length; ++j) {
if(a[i] === a[j])
a.splice(j--, 1);
}
}
return a;
}
var array1 = ["Wiki","Techy"];
var array2 = ["Techy", "Wikitechy"];
// Merges both arrays and gets unique items
var array3 = arrayUnique(array1.concat(array2));
For those who are fortunate enough to work with progressive browsers where ES5 is available, you can use Object.defineProperty like this:
Object.defineProperty(Array.prototype, 'unique', {
enumerable: false,
configurable: false,
writable: false,
value: function() {
var a = this.concat();
for(var i=0; i<a.length; ++i) {
for(var j=i+1; j<a.length; ++j) {
if(a[i] === a[j])
a.splice(j--, 1);
}
}
return a;
}
});Read Also
Insert an array item into specific indexSolution 5:
var a = [1, 2, 3], b = [101, 2, 1, 10];
var c = a.concat(b);
var d = c.filter(function (item, pos) {return c.indexOf(item) == pos});
// d is [1,2,3,101,10]Solution 6:
// Input: [ [1, 2, 3], [101, 2, 1, 10], [2, 1] ]
// Output: [1, 2, 3, 101, 10]
function mergeDedupe( arr )
{
return [ ...new Set( [].concat( ...arr ) ) ];
}