OBJETIVO : agregue todos los elementos de una matriz de enteros y matrices , cada matriz secundaria es un conjunto de 2 enteros que indican el inicio y el final de un rango.
invocación HTML :
<div class="block" onclick="test([33,88,[1,5],[8,13],[22,25]]);">click</div> <div id="paper"></div>Tengo el siguiente JavaScript :
<script> function test(clickArray) { let theArray = []; for (i = 0; i < clickArray.length; i++) { theArray.push(clickArray[i]); if (clickArray[i].length > 1) { range(clickArray[i][0], clickArray[i][1], theArray); } } writeArray(theArray); } function writeArray(anArray) { let pencilArray = []; for (let i = 0; i < anArray.length; i++) { pencilArray.push(); } document.getElementById("paper").innerHTML = pencilArray.join("<br>"); } function range(start, end, rangeArray) { for (let i = start; i <= end; i++) { rangeArray.push(i); } return rangeArray; } </script>Cuando invoco el JavaScript onclick, el resultado es:
33 88 1,5 1 2 3 4 5 8,13 8 9 10 11 12 13 22,25 22 23 24 25Tanto el rango pasado como los elementos construidos por la función range() se agregan a la matriz final , pero solo quiero los elementos , no los rangos, por lo que la salida debería ser:
33 88 1 2 3 4 5 8 9 10 11 12 13 22 23 24 25Por lo general , no es una buena idea usar controladores de eventos en línea. Aquí hay un fragmento que usa Event Delegation y un reductor de una línea ( test ) para crear los rangos a partir de una cadena que contiene valores de rango (dos valores o un solo rango)
document.addEventListener(`click`, handle); // reducer here const test = array => array.reduce( (acc, [s, e]) => acc.concat( [...Array(e + 1 - s)].map( (v, i) => i + s) ), [] ); function handle(evt) { if (evt.target.dataset.ranges) { // make sure a range contains two values. This allows single numbers const createRawRange = val => val.length < 2 ? [val, val] : val; // create ranges array from dataset, convert strings to Number const ranges = evt.target.dataset.ranges.split(";") .reduce( (acc, val) => [...acc, createRawRange(val.split(`,`)).map(Number)], [] ); // apply reducer (test) and print document.querySelector(`pre`).textContent = JSON.stringify(test(ranges)); } } Add ranges <button data-ranges="88;1,5;8,13;22,25;33;43,47"> <!-- ^ single value --> 88; 1-5; 8-13; 22-25; 33; 43-47 </button> <pre></pre>Así es como puede manejar números junto con rangos.
const test = (arr) => { const allNumbers = arr.reduce((acc, el) => { if (Array.isArray(el)) { const [start, end] = el; for (let i = start; i <= end; i++) { acc.push(i) } } else if (!Number.isNaN(el)) { acc.push(el) } return acc }, []) document.getElementById('paper').innerHTML = allNumbers.join('<br />'); } <div class="block" onclick="test([[1,5],[8,13],[22,25], 99]);">click</div> <div id="paper"></div>