Tengo dos arreglos ordenados y listos así:
const mains = [1, 5, 6, 8 , 12]; const secondaries = [1, 6, 12]; Quiero crear un div con múltiples spans de forma dinámica en función de las matrices anteriores como estas:
<span class="main">${unit}</span> <span class="secondary">${unit}</span>El problema es que no puedo encontrar una solución adecuada para ordenar ambas matrices y crear esos tramos.
En las matrices dadas, el resultado debería ser este:
<span class="main"> 1 </span> <span class="secondary"> 1 </span> <span class="main"> 5 </span> <span class="main"> 6 </span> <span class="secondary"> 6 </span> <span class="main"> 8 </span> <span class="main"> 12 </span> <span class="secondary"> 12 </span>Recorra la matriz mains y verifique si hay un elemento correspondiente en secondaries :
html = ''; mains.foreach(main => { html += `<span class="main"> {$main} </span>`; if (secondaries.includes(main) { html += `<span class="secondary"> {$main} </span>`; } }); Si las matrices son grandes, debe convertir secondaries en un Set y usar secondaries.has(main) en lugar de secondaries.includes(main) .
const mains = [1, 5, 6, 8 , 12]; const secondaries = [1, 6, 12]; const min = Math.min(...mains, ...secondaries); const max = Math.max(...mains, ...secondaries); for (let i=min; i<=max; i++){ if (mains.includes(i)) console.log(`<span class="main">${i}</span>`); if (secondaries.includes(i)) console.log(`<span class="secondaries">${i}</span>`); }Puede fusionarlos y, a medida que los fusiona, crear el lapso:
function span(val, class){ console.log(`<span class=${class}>${val}</span>`); function mergeAndSpan(main, secondary){ let i = 0, j = 0; while(i < main.length && j < secondary.length){ if(main[i] < secondary[j]){ span(main[i], 'main') i++; } else { span(secondary[j], 'secondary') j++; } } while(i < main.length){ span(main[i], 'main') i++; } while(j < secondary.length){ span(secondary[j], 'secondary') j++; } } mergeAndSpan(mains, secondaries);Esta es efectivamente la parte de fusión de mergesort, ligeramente modificada para crear intervalos en lugar de colocar los elementos en una matriz. Lo que hace es iterar a través de ambos, creando un lapso para el elemento inferior e incrementando su variable. Luego, una vez que una de las matrices está vacía, itera a través de la otra matriz y crea el intervalo para cada uno de sus elementos.
Y, debido a que está realizando una operación en todos los n elementos, toma O(n) tiempo.