Javascript合并数组合并

Question

I have two arrays:

const sizes = ['large', 'medium']
const colors = ['blue', 'red', 'orange']

I need to create a final array that combines the array's with all possible values like so:

const final = ['blue large', 'red large', 'orange large', 'blue medium', 'red medium', 'orange medium']

Both sizes and colors can be empty.

I prefer to do this with lodash and I've tried forEach looping like so:

sizes.forEach((size) => {
  colors.forEach((color) => {
    actualVariants.push(`${size} ${color}`)
  })
})

colors.forEach((size) => {
  sizes.forEach((color) => {
    actualVariants.push(`${color} ${size}`)
  })
})

Now that did work, however: it contains duplicates and I want to make sure I do it in the most efficient way possible.

This also doesn't work when the arrays are empty.

Answer 1

Just remove you first block :

Example here: https://jsbin.com/qovojacuci/edit?js,console

 const sizes = ['large', 'medium'] const colors = ['blue', 'red', 'orange'] let actualVariants = [] colors.forEach((size) => { sizes.forEach((color) => { actualVariants.push(`${color} ${size}`) }); }); console.log(actualVariants); 

If you want your array sorted like you final constant, change the loop order:

 const sizes = ['large', 'medium'] const colors = ['blue', 'red', 'orange'] let actualVariants = [] sizes.forEach((size) => { colors.forEach((color) => { actualVariants.push(`${color} ${size}`) }); }); console.log(actualVariants); 

Answer 2

And a solution via for loop:

 const sizes = ['large', 'medium']; const colors = ['blue', 'red', 'orange']; var final=new Array(); for(var i=0;i<sizes.length;i++){ for(var z=0;z<colors.length;z++){ final.push(colors[z]+' '+sizes[i]); } } console.log(final); 

Answer 3

I'd define a general purpose combine method that can combine two arrays in to one.

The method will always loop arr1.length * arr2.length times to be able to produce all valid results. So, for ['a', 'b', 'c'] and [1, 2] you'll get 3 x 2 = 6 combine calls and an array of length 6 .

A benefit of writing it as a function that takes two arrays and returns one, and supports empty arrays, is that you can use it inside reduce to combine any number of arrays !

 // `combiner` is a function that combines an element from `xs` // and one from `ys` in to one value const combine = combiner => (xs, ys) => { if (!xs || !xs.length) return ys; if (!ys || !ys.length) return xs; // Note, this can still be done using two forEach loops // in some cases, `concat` might be too slow... return xs.reduce( (acc, x) => acc.concat(ys.map(combiner(x))), [] ); } // Example use: // Make different combiners: const combineWithSpace = combine(x => y => `${x} ${y}`); const combineWithDot = combine(x => y => `${x}.${y}`); const prefix = ["a", "b", "c"]; const suffix = [1, 2]; // Now you can do: log("Prefix Suffix:", combineWithSpace(prefix, suffix)); // Support for empty arrays: log("One empty array:", combineWithSpace(prefix, [])); // But you can also use it as a reducer: log("Custom:", [prefix, suffix, ["i", "ii", "iii"]].reduce(combineWithDot) ); function log(label, arr) { console.log(label, JSON.stringify(arr)) };