如何在JavaScript中使用Circular Array输出值

Question

我创建了两个按钮，分别调用next和prev。我还创建了一个数组，比如['1'，'2'…'7']。数组中有一个7。当我第一次加载时。它将显示1 2 3 4。如何在类似的圆形数组中显示数组的下一个值

单击"下一步"按钮>2 3 4 5

单击"下一步"按钮>3 4 5 6

单击"下一步"按钮>4 5 6 7

单击"下一步"按钮>5 6 7 1

单击上一步按钮>4 5 6 7

Answer 1

这里有一种方法：

// Elements
const array = [1, 2, 3, 4, 5, 6, 7];
// Size of elements to show
const count = 4;

let currentIndex = 0;
const show = step => {
currentIndex += step;
while(currentIndex < 0) {
currentIndex += array.length;
}  

const result = Array.from({ length: count }, (_, i) => array[(currentIndex + i) % array.length]);

console.log(result.join());
return result;
}
show(0);

<button onclick="show(-1)">prev</button>
<button onclick="show(1)">next</button>

Answer 2

您可以通过查看实际索引位置来对数组进行切片。

const
getNext = (array, n = 4, start = 0) => () => {
const index = start++;
start %= array.length;
return index + n <= array.length
? array.slice(index, index + n)
: [...array.slice(index), ...array.slice(0, index - n + 1)];
},
array = [1, 2, 3, 4, 5, 6, 7],
next = getNext(array);
console.log(...next());
console.log(...next());
console.log(...next());
console.log(...next());
console.log(...next());
console.log(...next());
console.log(...next());
console.log(...next());
console.log(...next());

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

好的，所以你想要的是一个数组的大小作为结果(因此是4(，并且你有一个范围数组(所以是1 - 7(。基本上不需要准备完整的范围数组作为处理的输入，您只需要有一个计数，就可以根据需要准备唯一块大小的结果数组。

Array.from(Array(blockSize).keys(), a => ((a + count) % range) + 1)

这将完成您的工作，这里blockize是4，range是7，您只需要在整个程序中管理count。它将从0开始，您需要相应地执行+1或-1，并记住您的范围。

我只是添加了一个示例程序来轻松管理计数，但您可以通过自己的方式进行管理。好的部分是，你可以一次进入3-4个下一步或前一步(因为下一步和前一步将进入一个积极或消极的步骤(

这是用于管理计数的解决方案的包装器。

function buildBlock(range, blockSize) {
let count = 0,
getVal = () => Array.from(Array(blockSize).keys(), a => ((a + count) % range) + 1),
context = {
next: () => {count++; return getVal()},
prev: () => {count = count -1 + range; return getVal()},
current: getVal
};
return context;
}
let block1 = buildBlock(7, 4);
console.log("Current: ", ...block1.current());
console.log("Next: ", ...block1.next());
console.log("Next: ", ...block1.next());
console.log("Next: ", ...block1.next());
console.log("Next: ", ...block1.next());
console.log("Next: ", ...block1.next());
console.log("Previous: ", ...block1.prev());
console.log("Previous: ", ...block1.prev());
console.log("Previous: ", ...block1.prev());
console.log("Previous: ", ...block1.prev());
console.log("Previous: ", ...block1.prev());
console.log("Previous: ", ...block1.prev());
console.log("Next: ", ...block1.next());

Answer 4

这里有一个：

//Globals
const data = [1, 2, 3, 4, 5, 6, 7];
const viewSize = 4;
let currentIndex = 0;
let [btnNext, btnPrev] = [null, null];
//Functions
const isIndexOuterEdge = (index, length, size) => index >= length - size;
const viewNumbers = (data, { startIndex = 0, size = viewSize } = {}) => {
if(data == null || (size == null && viewSize == null)) return;
else if(data.length < size) return data.join(' ');
else return data.slice(startIndex, size + startIndex).join(' ');
}
const clickNext = (event) => {
if(data == null, currentIndex == null || viewSize == null
|| isIndexOuterEdge(currentIndex, data.length, viewSize)) return;
const index = currentIndex++ + 1;
showOutput(index);
}
const clickPrevious = (event) => {
if(currentIndex == null || currentIndex <= 0) return;
const index = currentIndex-- - 1;
showOutput(index);
}
const showOutput = (index) => {
if(data == null || viewSize == null | viewSize == index || index < 0) return;
//Print result
const output = document.querySelector('#output');
output.textContent = viewNumbers(data, {startIndex: index});
//Disable button
btnPrev.disabled = index <= 0;
btnNext.disabled = isIndexOuterEdge(index, data.length, viewSize);
}
//Setup
const setup = () => {
//Bind Targets
btnNext = document.querySelector('#btn_next'),
btnPrev = document.querySelector('#btn_prev')
//Bind Events
btnNext.addEventListener('click', clickNext);
btnPrev.addEventListener('click', clickPrevious);
//Init
showOutput(currentIndex);
}

//Load
window.addEventListener('load', setup);

<button id="btn_prev">
Prev
</button>
<button id="btn_next">
Next
</button>
<div id="output"></div>