I want to alternatively join 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]), []);

When run this code As a result, ['a', 1, 'b', 2, 'c', 3, 'd', 4]

i want ['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 run this code As a result, ['a', 1, 'b', 2, 'c', 3, 'd', 4,'e',undefined,'f',undefined,'g',undefined]

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

There are two cases.

If array 1 is short, some values in array 2 are missing.

If array 1 is long, undefined will be inserted between the merged arrays.

How can I merge two arrays alternatively regardless of length?

When I use Swift, using zip2sequence is a simple solution. Does JavaScript have something similar?

I want to alternatively join 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]), []);

When run this code As a result, ['a', 1, 'b', 2, 'c', 3, 'd', 4]

i want ['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 run this code As a result, ['a', 1, 'b', 2, 'c', 3, 'd', 4,'e',undefined,'f',undefined,'g',undefined]

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

There are two cases.

If array 1 is short, some values in array 2 are missing.

If array 1 is long, undefined will be inserted between the merged arrays.

How can I merge two arrays alternatively regardless of length?

When I use Swift, using zip2sequence is a simple solution. Does JavaScript have something similar?

• javascript
• arrays

3 Answers 3

Use a for loop rather than reduce, so you won't be limited by either array's length.

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);

Here's a solution that uses recursion

const interleave = ([x, ...xs], ys) =>
  x ? [x, ...interleave(ys, xs)] : ys
  
const array1 = ['a', 'b', 'c', 'd'];
const array2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

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

You could also solve this with Array.reduce by simply first figuring out which one of the arrays is the longer one:

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))

Somewhat simpler solution with just one 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 were to use lodash that would be something like:

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

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

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

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

Using _.zip, _.flatten and _.pact