Combining Two Arrays with Order: A Guide

The function initially spreads the argument arrays into a new array of arrays. To achieve the opposite effect, it flattens the array into an array of values using the Array.flat method. Alternatively, it removes duplicates from the array and returns an Iterable using the Set method. For the first approach, the original array is flattened by applying a new array as its argument. Snippets for both approaches are available at http://jsfiddle.net/briosheje/y03osape/2/ and http://jsfiddle.net/briosheje/y03osape/4/. Another approach involves looping over arrays using only ES5 safe functions, as tried by the author.


Question:

I possess multiple arrays that require merging, while maintaining their sequence intact. For instance:

var js_files = [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery.cookie/jquery.cookie.js',
'bower_components/jquery-placeholder/jquery-placeholder.js',
'bower_components/foundation-sites/dist/foundation.js',
'bower_components/Swiper/dist/js/swiper.jquery.min.js',
'assets/scripts/**/*.js'
];

and:

var js_files = [
'bower_components/jquery/dist/jquery.js',
'parnet/bower_components/jquery/dist/jquery.js',
'parent/bower_components/jquery.cookie/jquery.cookie.js'
];

My goal is to merge the two arrays and ensure that the first array retains its position while excluding
duplicate values
.

expected outotput:

['bower_components/jquery/dist/jquery.js',
'bower_components/jquery.cookie/jquery.cookie.js',
'bower_components/jquery-placeholder/jquery-placeholder.js',
'bower_components/foundation-sites/dist/foundation.js',
'bower_components/Swiper/dist/js/swiper.jquery.min.js',
'assets/scripts/**/*.js',
'parnet/bower_components/jquery/dist/jquery.js',
'parent/bower_components/jquery.cookie/jquery.cookie.js']

Is it possible to achieve this task through the utilization of _.union? Alternatively, do you have any other suggestions?


Solution 1:

To obtain unique items in the desired order for
original sort
, you may combine

Set

and the spread syntax

...

.

var js_files1 = [
    'abc',
    'def',
    'bower_components/jquery/dist/jquery.js',
    'bower_components/jquery.cookie/jquery.cookie.js',
    'bower_components/jquery-placeholder/jquery-placeholder.js',
    'bower_components/foundation-sites/dist/foundation.js',
    'bower_components/Swiper/dist/js/swiper.jquery.min.js',
    'assets/scripts/**/*.js'
  ],
  js_files2 = [
    'def',
    'ghi',
    'bower_components/jquery/dist/jquery.js',
    'parnet/bower_components/jquery/dist/jquery.js',
    'parent/bower_components/jquery.cookie/jquery.cookie.js'
  ],
  uniqueFiles = [...new Set([...js_files1, ...js_files2])];

console.log(uniqueFiles);

.as-console-wrapper { max-height: 100% !important; top: 0; }


Solution 2:


One way to achieve this is by using the ES5 approach, which involves utilizing the Array.prototype.slice method.

const first = [1,2,3,4];
const second = [5,6,7,8];
const results = [].concat(first.slice(), second.slice());

Alternatively, one can utilize “destructuring” in the ESNext style.

const first = [1,2,3,4];
const second = [5,6,7,8];
const result = [...first, ...second];

My apologies for overlooking the fact that you require unique values.

Upon concatenating the information, the duplicates will be eliminated from the results.

const distinctResults = results.filter(function removeDuplicates(item, index){
  return results.indexOf(item) === index;
});


Solution 3:

var a = [1,2,3];
var b = [4,5,6];

var Joined = [...a,...b];

Similarly can do for your code.


Solution 4:

Utilize the method “Array.prototype.concat” instead.

var js_files1 = [
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery.cookie/jquery.cookie.js',
'bower_components/jquery-placeholder/jquery-placeholder.js',
'bower_components/foundation-sites/dist/foundation.js',
'bower_components/Swiper/dist/js/swiper.jquery.min.js',
'assets/scripts/**/*.js'
];
var js_files2 = [
'parnet/bower_components/jquery/dist/jquery.js',
'parent/bower_components/jquery.cookie/jquery.cookie.js'
];
var res = js_files1.concat(js_files2);
console.log(res);

Frequently Asked Questions