What is the best way to combine multiple arrays in JavaScript?

Question

What is the best way to combine multiple arrays in JavaScript?

I am working with multiple arrays:

 var array1 = [a,b,c];
 var array2 = [c,d];
 var array3 = [e,f];

I need to combine these arrays into one merged array, with the desired output as follows:

result = [ace, acf, ade, adf, bce, bdf, bde, bdf, cce, ccf, cde, cdf]

Is there a way to achieve this? Keep in mind that the number of input arrays can vary.

javascript arrays

Answer 1

Answer №1

An iterative and recursive method can be utilized in conjunction with a combination algorithm.

function combine(array) {
    function combineParts(part, index) {
        array[index].forEach(function (a) {
            var newPart = part.concat([a]);
            if (newPart.length === array.length) {
                result.push(newPart.join(''));
                return;
            }
            combineParts(newPart, index + 1);
        });
    }

    var result = [];

    combineParts([], 0);
    return result;
}

console.log(combine([['a', 'b', 'c'], ['c', 'd'], ['e', 'f']]));
console.log(combine([['a', 'b', 'c'], ['d', 'e'], ['f', 'g'], ['h', 'i', 'j']]));

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

Answer 2

An iterative and recursive method can be utilized in conjunction with a combination algorithm.

function combine(array) {
    function combineParts(part, index) {
        array[index].forEach(function (a) {
            var newPart = part.concat([a]);
            if (newPart.length === array.length) {
                result.push(newPart.join(''));
                return;
            }
            combineParts(newPart, index + 1);
        });
    }

    var result = [];

    combineParts([], 0);
    return result;
}

console.log(combine([['a', 'b', 'c'], ['c', 'd'], ['e', 'f']]));
console.log(combine([['a', 'b', 'c'], ['d', 'e'], ['f', 'g'], ['h', 'i', 'j']]));

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

Answer 3

Answer №2

Optimize your code with nested loops Check out the Jsfiddle example here

var array1 = ["a", "b", "c"];
var array2 = ["c", "d"];
var array3 = ["e", "f"];
var result = [], pushresult = 0;

for (var i = 0; i < array1.length; i++) {
  for (var j = 0; j < array2.length; j++) {
    for (var k = 0; k < array3.length; k++) {
      pushresult = array1[i] + array2[j] + array3[k];
      result.push(pushresult);
    }
  }
}

console.log(result);

Answer 4

Optimize your code with nested loops Check out the Jsfiddle example here

var array1 = ["a", "b", "c"];
var array2 = ["c", "d"];
var array3 = ["e", "f"];
var result = [], pushresult = 0;

for (var i = 0; i < array1.length; i++) {
  for (var j = 0; j < array2.length; j++) {
    for (var k = 0; k < array3.length; k++) {
      pushresult = array1[i] + array2[j] + array3[k];
      result.push(pushresult);
    }
  }
}

console.log(result);

Answer 5

Answer №3

It appears that you are attempting to generate the Cartesian product from multiple arrays or sets.
Here is a solution in ES6 utilizing Array.concat, Array.reduce, and Array.map functions:

const flatten = (arr) => [].concat.apply([], arr);
const product = (...sets) =>
    sets.reduce((acc, set) =>
            flatten(acc.map(x => set.map(y => [ ...x, y ]))),
    [[]]);

var array1 = ['a', 'b', 'c'],
    array2 = ['c','d'],
    array3 = ['e','f'];

result = product(array1, array2, array3);

console.log(JSON.stringify(result));

Answer 6

It appears that you are attempting to generate the Cartesian product from multiple arrays or sets.
Here is a solution in ES6 utilizing Array.concat, Array.reduce, and Array.map functions:

const flatten = (arr) => [].concat.apply([], arr);
const product = (...sets) =>
    sets.reduce((acc, set) =>
            flatten(acc.map(x => set.map(y => [ ...x, y ]))),
    [[]]);

var array1 = ['a', 'b', 'c'],
    array2 = ['c','d'],
    array3 = ['e','f'];

result = product(array1, array2, array3);

console.log(JSON.stringify(result));

Answer 7

Answer №4

When dealing with a fixed number of arrays (not elements within the array), you have the option to implement the following JavaScript code:

<script>
var firstArray = ["apple", "banana", "cherry"];
var secondArray = ["cherry", "date"];
var thirdArray = ["elderberry", "fig"];
var combinedArray = [];

for (i in firstArray) {
    for (j in secondArray) {
        for (k in thirdArray) {
            combinedArray.push(firstArray[i] + secondArray[j] + thirdArray[k]);
        }
    }
}

alert(combinedArray);
</script>

Answer 8

When dealing with a fixed number of arrays (not elements within the array), you have the option to implement the following JavaScript code:

<script>
var firstArray = ["apple", "banana", "cherry"];
var secondArray = ["cherry", "date"];
var thirdArray = ["elderberry", "fig"];
var combinedArray = [];

for (i in firstArray) {
    for (j in secondArray) {
        for (k in thirdArray) {
            combinedArray.push(firstArray[i] + secondArray[j] + thirdArray[k]);
        }
    }
}

alert(combinedArray);
</script>

Answer 9

Answer №5

Looking for a solution to find the cross-product of an unknown number of arrays? Here's how you can achieve it:

Array.prototype.cartesian = function(...a){
  return a.length ? this.reduce((p,c) => (p.push(...a[0].cartesian(...a.slice(1)).map(e => a.length > 1 ? [c,...e] : [c,e])),p),[])
                  : this;
};

var arr1 = ["a","b","c"],
    arr2 = ["c","d"],
    arr3 = ["e","f"],
  result = arr1.cartesian(arr2,arr3);
console.log(JSON.stringify(result));

Answer 10

Looking for a solution to find the cross-product of an unknown number of arrays? Here's how you can achieve it:

Array.prototype.cartesian = function(...a){
  return a.length ? this.reduce((p,c) => (p.push(...a[0].cartesian(...a.slice(1)).map(e => a.length > 1 ? [c,...e] : [c,e])),p),[])
                  : this;
};

var arr1 = ["a","b","c"],
    arr2 = ["c","d"],
    arr3 = ["e","f"],
  result = arr1.cartesian(arr2,arr3);
console.log(JSON.stringify(result));

Answer 11

Answer №6

Utilizing the List applicative and monad makes this task a breeze

// Implementing Array Applicative  
Array.prototype.ap = function ( ...args )
  {
    const loop = ( acc , [ x , ...xs ] ) =>
      x === undefined
        ? [ this [ 0 ] ( ...acc ) ]
        : x.chain ( a =>
            loop ( acc.concat ( [ a ] ) , xs ) )
    return loop ( [] , args )
  }
 
// Implementing Array Monad
Array.prototype.chain = function chain (f)
  {
    return this.reduce ( ( acc , x ) =>
      acc.concat ( f (x) ), [] )
  }

// Utilizing the implemented functions
const combinations = ( ...xxs ) =>
  [ ( ...xs ) => xs ] .ap ( ...xxs )

console.log ( combinations ( array1 , array2 , array3 ) )
// [ [ 'a1', 'a2', 'a3' ],
//   [ 'a1', 'a2', 'b3' ],
//   [ 'a1', 'a2', 'c3' ],
//   [ 'a1', 'b2', 'a3' ],
//   [ 'a1', 'b2', 'b3' ],
//   [ 'a1', 'b2', 'c3' ],
//   [ 'b1', 'a2', 'a3' ],
//   [ 'b1', 'a2', 'b3' ],
//   [ 'b1', 'a2', 'c3' ],
//   [ 'b1', 'b2', 'a3' ],
//   [ 'b1', 'b2', 'b3' ],
//   [ 'b1', 'b2', 'c3' ],
//   [ 'c1', 'a2', 'a3' ],
//   [ 'c1', 'a2', 'b3' ],
//   [ 'c1', 'a2', 'c3' ],
//   [ 'c1', 'b2', 'a3' ],
//   [ 'c1', 'b2', 'b3' ],
//   [ 'c1', 'b2', 'c3' ],
//   [ 'd1', 'a2', 'a3' ],
//   [ 'd1', 'a2', 'b3' ],
//   [ 'd1', 'a2', 'c3' ],
//   [ 'd1', 'b2', 'a3' ],
//   [ 'd1', 'b2', 'b3' ],
//   [ 'd1', 'b2', 'c3' ] ]

Answer 12

Utilizing the List applicative and monad makes this task a breeze

// Implementing Array Applicative  
Array.prototype.ap = function ( ...args )
  {
    const loop = ( acc , [ x , ...xs ] ) =>
      x === undefined
        ? [ this [ 0 ] ( ...acc ) ]
        : x.chain ( a =>
            loop ( acc.concat ( [ a ] ) , xs ) )
    return loop ( [] , args )
  }
 
// Implementing Array Monad
Array.prototype.chain = function chain (f)
  {
    return this.reduce ( ( acc , x ) =>
      acc.concat ( f (x) ), [] )
  }

// Utilizing the implemented functions
const combinations = ( ...xxs ) =>
  [ ( ...xs ) => xs ] .ap ( ...xxs )

console.log ( combinations ( array1 , array2 , array3 ) )
// [ [ 'a1', 'a2', 'a3' ],
//   [ 'a1', 'a2', 'b3' ],
//   [ 'a1', 'a2', 'c3' ],
//   [ 'a1', 'b2', 'a3' ],
//   [ 'a1', 'b2', 'b3' ],
//   [ 'a1', 'b2', 'c3' ],
//   [ 'b1', 'a2', 'a3' ],
//   [ 'b1', 'a2', 'b3' ],
//   [ 'b1', 'a2', 'c3' ],
//   [ 'b1', 'b2', 'a3' ],
//   [ 'b1', 'b2', 'b3' ],
//   [ 'b1', 'b2', 'c3' ],
//   [ 'c1', 'a2', 'a3' ],
//   [ 'c1', 'a2', 'b3' ],
//   [ 'c1', 'a2', 'c3' ],
//   [ 'c1', 'b2', 'a3' ],
//   [ 'c1', 'b2', 'b3' ],
//   [ 'c1', 'b2', 'c3' ],
//   [ 'd1', 'a2', 'a3' ],
//   [ 'd1', 'a2', 'b3' ],
//   [ 'd1', 'a2', 'c3' ],
//   [ 'd1', 'b2', 'a3' ],
//   [ 'd1', 'b2', 'b3' ],
//   [ 'd1', 'b2', 'c3' ] ]

What is the best way to combine multiple arrays in JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Receiving a blank request payload despite implementing a body parsing middleware

Encountering issues with reading undefined properties while working with react-chartjs-2 and chart js

Storing binary data uploaded via AJAX in PHP on the server is essential for maintaining

AngularJS view fails to reflect updates in the model

Instructions on allowing the user to enter text for searching through an array of objects, and displaying a message if a match is found. Use only pure JavaScript

Two DIV elements are merging together with a cool zooming effect

Implementing form validations using JavaScript for a form that is created dynamically

Calling Functions in JavaScript Through Events: A Beginner's Guide

The SEMrush API is not displaying an 'Access-Control-Allow-Origin' header on the requested resource

Issue: ui-route failing to function properly when the href attribute is utilized

Utilize Devextreme's dxDataGrid component to transmit the selected RowData to a function upon clicking a button within that particular row

store the id of each li element dynamically into an array

Unable to locate the AngularJS controller after attempting to paste the code

When attempting to start a new React Native project using npx, I encountered an error stating "react-native: command not found"

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Creating SVG paths using coordinates for THREE.js

Find the element that was not included in the array

Why was the express.js boilerplate code created?

Receiving encoded characters in the response

Is there a way to substitute the HOC with a single call and solely modify the prop?