合并两个具有交替值的数组

Question

I would like to merge 2 arrays with a different length:

let array1 = ["a", "b", "c", "d"];
let array2 = [1, 2];

The outcome I would expect is ["a", 1 ,"b", 2, "c", "d"]

What's the best way to do that?

Answer 1

Here's another way you can do it using destructuring assignment -

 const interleave = ([ x, ...xs ], ys = []) => x === undefined ? ys // base: no x : [ x, ...interleave (ys, xs) ] // inductive: some x console.log (interleave ([0, 2, 4, 6], [1, 3, 5])) // [ 0 1 2 3 4 5 6 ] console.log (interleave ([0, 2, 4], [1, 3, 5, 7])) // [ 0 1 2 3 4 5 7 ] console.log (interleave ([0, 2, 4], [])) // [ 0 2 4 ] console.log (interleave ([], [1, 3, 5, 7])) // [ 1 3 5 7 ] console.log (interleave ([], [])) // [ ]

And another variation that supports any number of input arrays -

 const interleave = ([ x, ...xs ], ...rest) => x === undefined ? rest.length === 0 ? [] // base: no x, no rest : interleave (...rest) // inductive: no x, some rest : [ x, ...interleave(...rest, xs) ] // inductive: some x, some rest console.log (interleave ([0, 2, 4, 6], [1, 3, 5])) // [ 0 1 2 3 4 5 6 ] console.log (interleave ([0, 2, 4], [1, 3, 5, 7])) // [ 0 1 2 3 4 5 7 ] console.log (interleave ([0, 2, 4], [])) // [ 0 2 4 ] console.log (interleave ([], [1, 3, 5, 7])) // [ 1 3 5 7 ] console.log (interleave ([], [])) // [ ]

Answer 2

You could iterate the min length of both array and build alternate elements and at the end push the rest.

 var array1 = ["a", "b", "c", "d"], array2 = [1, 2], result = [], i, l = Math.min(array1.length, array2.length); for (i = 0; i < l; i++) { result.push(array1[i], array2[i]); } result.push(...array1.slice(l), ...array2.slice(l)); console.log(result);

Solution for an arbitrary count of arrays with a transposing algorithm and later flattening.

 var array1 = ["a", "b", "c", "d"], array2 = [1, 2], result = [array1, array2] .reduce((r, a) => (a.forEach((a, i) => (r[i] = r[i] || []).push(a)), r), []) .reduce((a, b) => a.concat(b)); console.log(result);

Answer 3

Create an array of tuples. Each tuple contains 1 element from each array, flatten by spreading the array of tuples, and adding the leftover items from the arrays:

 const a1 = ["a", "b", "c", "d"]; const a2 = [1,2]; const l = Math.min(a1.length, a2.length); const merged = [].concat(...Array.from({ length: l }, (_, i) => [a1[i], a2[i]]), a1.slice(l), a2.slice(l)); console.log(merged);

Answer 4

Here's a modern solution that takes any number of arrays:

const braidArrays = (...arrays) => {
  const braided = [];
  for (let i = 0; i < Math.max(...arrays.map(a => a.length)); i++) {
    arrays.forEach((array) => {
      if (array[i] !== undefined) braided.push(array[i]);
    });
  }
  return braided;
};

Note that you could change Math.max to Math.min to only include up to the shortest array.

Here's a sample I/O:

braidArrays(['a','b','c','d'], [1,2,3], [99,98,97,96,95]);
// ['a', 1, 99, 'b', 2, 98, 'c', 3, 97, 'd', 96, 95]

Answer 5

ONELINER : I assume that x=array1 , y=array2 , x and y can be arbitrary arr

[...x,...y].reduce((l,c,i)=>(i<x.length&&l.push(x[i]),i<y.length&&l.push(y[i]),l),[])

working example (for 3 cases)

Answer 6

You can do:

 const array1 = ["a", "b", "c", "d"]; const array2 = [1, 2]; const mergeArrays = (a, b) => (a.length > b.length ? a : b) .reduce((acc, cur, i) => a[i] && b[i] ? [...acc, a[i], b[i]] : [...acc, cur], []); console.log(mergeArrays(array1, array2)); // ["a",1 ,"b", 2, "c", "d"]

Answer 7

This can be done rather simply using a splicing function within reduce :

 function splicer(array, element, index) { array.splice(index * 2, 0, element); return array; } function weave(array1, array2) { return array1.reduce(splicer, array2.slice()); } let array1 = ["a", "b", "c", "d"]; let array2 = [1, 2]; let outcome = weave(array1, array2); console.log(outcome);

Answer 8

A bit verbose solution that lets you choose which array goes first

const a = ['a', 'b', 'c'];
const b = [1, 4];
const combineAlternatingArrays = (a, b) => {
  let combined = [];
  const [shorter, larger] = [a, b].sort((a, b) => a.length -b.length);

  shorter.forEach((item, i) => {
    combined.push(larger[i], item);
  })
  combined.push(...larger.slice(shorter.length));

  return combined;
}
console.log(combineAlternatingArrays(a, b));

It is also possible to use a reduce, but the syntax is less clear in my opinnion.

const a = ['a', 'b', 'c'];
const b = [1, 4];
const combineAlternatingArrays = (a, b) => {
  const [shorter, larger] = [a, b].sort((a, b) => a.length -b.length);

  return shorter.reduce(
    (combined, next, i, shorter) => {
      return (i === (shorter.length -1)) ? [...combined, larger[i], next, ...larger.slice(shorter.length)] : [...combined, larger[i], next];
    },
    []
  );
}
console.log(combineAlternatingArrays(a, b));

Answer 9

Using ES6 generator functions this can be implemented generically for any amount of arrays of any lengths. The key is going through all arrays regardless of length in order and then adding each of the values they have into a single merged array.

By using the iterator protocol of arrays we can uniformly proceed through the items in each array.

When producing some sequence of alternating values of other sequences, that is frequently called an interleave . Sometimes also called a Faro shuffle - it's more widely known with playing cards - a perfect Faro shuffle combines two piles of cards in such a way that cards from each pile alternate. However, this is an example of an interleave sequence and mathematicians also use the term to describe the process of interleaving.

 //go through all arrays and produce their values function* parallelWalkAllArrays(...arrays) { //get iterator for each array const iterators = arrays.map(arr => arr[Symbol.iterator]()); let values; //loop until complete while (true) { values = iterators .map(it => it.next()) //addvance iterators .filter(({done}) => !done) //keep anything that is not finished .map(({value}) => value); //get the values //quit if all are exhausted if (values.length === 0) return; //yield a tuple of all values yield values; } } function interleaveMergeArrays(...arrays) { //start a generator function const sequence = parallelWalkAllArrays(...arrays); let merged = []; //flatten each result into a single array for (const result of sequence) { merged.push(...result) } return merged; } const array1 = [1, 2, 3, 4, 5]; const array2 = ['a', 'b', 'c', 'd', 'e']; console.log( interleaveMergeArrays(array1, array2) ); const shortArray = ["apple", "banana"]; console.log( interleaveMergeArrays(array1, shortArray) ); console.log( interleaveMergeArrays(shortArray, array2) ); console.log( interleaveMergeArrays(array1, shortArray, array2) );

Alternatively, you can take a very similar approach but directly produce a flat sequence from the generator. That way you can consume it immediately.

 //go through all arrays and produce their values function* walkAllArrays(...arrays) { //get iterator for each array const iterators = arrays.map(arr => arr[Symbol.iterator]()); let values; //loop until complete while (true) { values = iterators .map(it => it.next()) //addvance iterators .filter(({done}) => !done) //keep anything that is not finished .map(({value}) => value); //get the values //quit if all are exhausted if (values.length === 0) return; //yield each value for (const value of values) yield value; } } const array1 = [1, 2, 3, 4, 5]; const array2 = ['a', 'b', 'c', 'd', 'e']; console.log(Array.from( walkAllArrays(array1, array2) )); const shortArray = ["apple", "banana"]; console.log(Array.from( walkAllArrays(array1, shortArray) )); console.log(Array.from( walkAllArrays(shortArray, array2) )); console.log(Array.from( walkAllArrays(array1, shortArray, array2) ));

I personally find the latter approach less flexible, as it only solves this problem. Doing a parallel sequential walk through all arrays can be re-used for other things such as zipping arrays, so having a helper function consume the output of that seems like it can leave more options open. On the other hand having a single function makes it a bit more straightforward to see how it's implemented.

Answer 10

I generally use nullish coalescing operator (??) for such a scenario:

 var mergeAlternately = (a, b) => { const maxLength = Math.max(a.length, b.length); let result = []; for (let i = 0; i < maxLength; i++) { result.push( (a[i] ?? '') , (b[i] ?? '')); } // Remove empty array values return result.filter(item => item); }; let array1 = ["a", "b", "c", "d"]; let array2 = [1, 2]; console.log(mergeAlternately(array1, array2))

Answer 11

More modern, efficient and shorter way:

 const arr1 = ["a", "b", "c", "d"] const arr2 = [1, 2] const res = (arr1.length > arr2.length ? arr1 : arr2) // you can replace it with just arr1, if you know its always longer .flatMap((e, idx) => arr2[idx] ? [e, arr2[idx]] : [e]) console.log(res)

Answer 12

using an iterator:

function *gen(arr1, arr2){
    for(let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
        if (arr1[i]) yield arr1[i];
        if (arr2[i]) yield arr2[i];
    }
}
const x = gen(['a','b','c','d'], [1,2]);
const result = [...x];

gives

Array(6) [ "a", 1, "b", 2, "c", "d" ]

Answer 13

Another ONELINER :

const merge = (arr1, arr2) => ((arr1.length > arr2.length) ? arr1 : arr2).map((_,i)=>[arr1[i],arr2[i]]).flat().filter(Boolean);

explanation:

1. Take the longest array with the ternary conditional operator
2. Use map to create for each index a pair of elements from each array
3. Flatten the result
4. Remove the undefined

Answer 14

In case someone is looking for a performance comparison i have done a file which compares some of the above functions.

The test was to merge two arrays with lengths 200 and 500. For each method the test was run 1000 times.

Here are the results ordered by the fastest (time):

1. 6.7ms
2. 9.8ms
3. 16.7ms
4. 23.3ms
5. 24.2ms
6. 151.7ms
7. 297.8ms
8. 1.15s

Link to the file