Using JavaScript, combine two arrays of varying lengths in an alternating fashion

Question

Using JavaScript, combine two arrays of varying lengths in an alternating fashion

Seeking a method to alternate between joining two arrays of different lengths.

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const result = array1.reduce((arr, v, i) => arr.concat(v, array2[i]), []);

Upon running this code, the output is ['a', 1, 'b', 2, 'c', 3, 'd', 4]

I am aiming for

['a', 1, 'b', 2, 'c', 3, 'd', 4, 5, 6, 7, 8, 9]

const array1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
const array2 = [1, 2, 3, 4];
const result = array1.reduce((arr, v, i) => arr.concat(v, array2[i]), []);

When executing this code, we get

['a', 1, 'b', 2, 'c', 3, 'd', 4,'e',undefined,'f',undefined,'g',undefined]

My intended outcome is

['a', 1, 'b', 2, 'c', 3, 'd', 4, 'e', 'f', 'g']

There are two scenarios present here:

If array 1 is shorter, certain values from array 2 will be missing.

In case array 1 is longer, undefined elements will be inserted in between the merged arrays.

Looking for a solution to merge two arrays alternately regardless of their lengths.

While dealing with Swift, simply using zip2sequence provides an easy fix. Is there something similar in JavaScript?

javascript arrays

Answer 1

Answer №1

It is advisable to utilize a for loop instead of reduce, as it allows you to avoid being restricted by the length of either array.

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const len = Math.max(array1.length, array2.length);
const result = [];
for (let i = 0; i < len; i++) {
  if (array1[i] !== undefined) {
    result.push(array1[i]);
  }
  if (array2[i] !== undefined) {
    result.push(array2[i]);
  }
}
console.log(result);

Answer 2

It is advisable to utilize a for loop instead of reduce, as it allows you to avoid being restricted by the length of either array.

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const len = Math.max(array1.length, array2.length);
const result = [];
for (let i = 0; i < len; i++) {
  if (array1[i] !== undefined) {
    result.push(array1[i]);
  }
  if (array2[i] !== undefined) {
    result.push(array2[i]);
  }
}
console.log(result);

Answer 3

Answer №2

Utilizing Recursion for a Creative Solution

function mergeArrays(arr1, arr2) {
  const interleavedArray = ([x, ...xs], ys) => 
    x ? [x, ...interleavedArray(ys, xs)] : ys;
  
  console.log(interleavedArray(arr1, arr2));
}

const array1 = ['apple', 'banana', 'cherry', 'date'];
const array2 = ['orange', 'pear', 'grape', 'kiwi', 'mango'];

mergeArrays(array1, array2);
mergeArrays(array2, array1);

Answer 4

Utilizing Recursion for a Creative Solution

function mergeArrays(arr1, arr2) {
  const interleavedArray = ([x, ...xs], ys) => 
    x ? [x, ...interleavedArray(ys, xs)] : ys;
  
  console.log(interleavedArray(arr1, arr2));
}

const array1 = ['apple', 'banana', 'cherry', 'date'];
const array2 = ['orange', 'pear', 'grape', 'kiwi', 'mango'];

mergeArrays(array1, array2);
mergeArrays(array2, array1);

Answer 5

Answer №3

To tackle this issue, you can also utilize the Array.reduce method by determining which array is longer initially:

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let merge = (a,b) => {
  let short, long
  a.length > b.length ? (long=a, short=b) : (long=b, short=a)
  return long.reduce((r,c,i) => {
    short[i] ? r.push(short[i]) : 0
    return r.push(c) && r
  }, [])
}

console.log(merge(array1,array2))
console.log(merge(array2,array1))

A more concise solution using only Array.forEach would be:

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let merge = (a,b) => {
  let short, long, r=[]
  a.length > b.length ? (long=a, short=b) : (long=b, short=a)
  long.forEach((x,i) => short[i] ? r.push(short[i], x) : r.push(x))
  return r
}

console.log(merge(array1,array2))
console.log(merge(array2,array1))

If you opt to use lodash, the code would resemble something like this:

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let merge = (a,b) => _.compact(_.flatten(_.zip(a,b)))

console.log(merge(array1,array2))
console.log(merge(array2,array1))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

This approach involves using _.zip, _.flatten, and _.compact

Answer 6

To tackle this issue, you can also utilize the Array.reduce method by determining which array is longer initially:

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let merge = (a,b) => {
  let short, long
  a.length > b.length ? (long=a, short=b) : (long=b, short=a)
  return long.reduce((r,c,i) => {
    short[i] ? r.push(short[i]) : 0
    return r.push(c) && r
  }, [])
}

console.log(merge(array1,array2))
console.log(merge(array2,array1))

A more concise solution using only Array.forEach would be:

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let merge = (a,b) => {
  let short, long, r=[]
  a.length > b.length ? (long=a, short=b) : (long=b, short=a)
  long.forEach((x,i) => short[i] ? r.push(short[i], x) : r.push(x))
  return r
}

console.log(merge(array1,array2))
console.log(merge(array2,array1))

If you opt to use lodash, the code would resemble something like this:

const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let merge = (a,b) => _.compact(_.flatten(_.zip(a,b)))

console.log(merge(array1,array2))
console.log(merge(array2,array1))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

This approach involves using _.zip, _.flatten, and _.compact

Using JavaScript, combine two arrays of varying lengths in an alternating fashion

Answer №1

Answer №2

Utilizing Recursion for a Creative Solution

Answer №3

Similar questions

The C# [WebMethod] will not trigger if the Content-Type "application/Json" is missing

JavaScript - Asynchronous JavaScript and XML

The OnClick function seems to be unresponsive, however, there are no error messages displaying in

ng-if directive does not show data in AngularJS

plan for grid-based data representation

Activate JavaScript validation

Node.js Middleware Design Pattern: Connectivity Approach

Analyzing the pixel coordinates in a randomly generated array for processing

Tips for utilizing $scope in an AngularJS service

Retrieve information from Django and pass it to the Vue template

Unable to insert form and view upon file upload click

What is the most effective method for appending elements to an array using a Svelte store subscription?

The size of table cells unexpectedly shifts following a click event

Troubleshooting React hooks: Child component dispatches not triggering updates in parent component

Utilize jQuery to run a script once everything is prepared and loaded

What could be causing my Vuex state to remain unchanged even after the nuxtServerInit commit?

What is the purpose of calling Array.prototype.slice on an array with 0 as the starting index?

Incompatibility issue between metadata versions for Angular 4 and @ng-bootstrap libraries

Listening to events in controllers to update the view in AngularJS

Adding a condition prior to inserting rows into a table using jQuery