Javascript:将多个整数和整数范围的元素添加到数组中，而不添加范围本身

Question

GOAL：将整数数组和数组中的所有元素相加，每个子数组是一组2个整数，表示一个范围的开始和结束。

HTML调用：

<div class="block" onclick="test([33,88,[1,5],[8,13],[22,25]]);">click</div>
<div id="paper"></div>

我有以下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>

当我调用onclick JavaScript时，输出为：

33
88
1,5
1
2
3
4
5
8,13
8
9
10
11
12
13
22,25
22
23
24
25

传递的范围和range()函数构建的元素都被添加到最终数组中，但我只想要元素，而不是范围，所以输出应该是：

33
88
1
2
3
4
5
8
9
10
11
12
13
22
23
24
25

Answer 1

以下是如何处理数字和范围。

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>

Answer 2

您可以使用一个简单的reduce()操作：

const test = (array) => array.reduce((a, [s, e]) => {
while(s <= e) a.push(s++);
return a;
}, []);
const result = test([[1,5],[8,13],[22,25]]);
console.log(result);

Answer 3

使用内联事件处理程序通常不是一个好主意。下面是一个使用Event Delegation的片段，以及一个单行缩减器(test)，用于从包含范围值(两个值或一个范围)的字符串中创建范围

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>