如何从数组中获取下一个和前五个元素？

Question

我有一个包含 n 个元素的数组。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

还有两个按钮 next 和 prev 最初我显示数组的前 5 个元素（在页面加载时） 初始数组[1,2,3,4,5]

如何在 下一个按钮单击 [6、7、8、9、10] 和 上一个按钮单击时显示接下来的五个元素显示 [1, 2, 3, 4, 5]

如果包含 lastIndex 以及数组是否包含第一个元素，还需要检查它是否没有任何下一个元素。

我试过使用 slice 到 arr.slice(begin[ end])

Answer 1

您可以为想要的元素获取索引和大小，然后对数组进行切片。

const
    data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    show = array => document.getElementById('items').innerHTML = array.join(' '),
    next = () => {
        index += size;
        while (index >= data.length) index -= size;
        show(data.slice(index, index + size));
    },
    prev = () => {
        index -= size;
        while (index < 0) index += size;
        show(data.slice(index, index + size));
    },
    size = 5;

let index = 0;

document.getElementById('bprev').addEventListener('click', prev);
document.getElementById('bnext').addEventListener('click', next);

show(data.slice(index, index + size));

<button id="bprev">prev</button> <span id="items"></span> <button id="bnext">next</button>

Answer 2

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
const size = 5
let current = 1

function prev(){
  if(current > 1){
    current--
    let newArr = getNewArr()
    console.log(newArr)
  }
}

function next(){
  if(current >= 1 && current < arr.length/size){
    current++
    let newArr = getNewArr()
    console.log(newArr)
  }
}

function getNewArr(){
  return arr.slice(size*current - size, size*current)
}

<button onclick=prev()>prev</button>
<button onclick=next()>next</button>

Answer 3

目前，我只是在 next 和 previous 中使用硬编码的 pageNumber 创建演示，但您可以根据数组大小使其动态化。

工作演示：

// Input array
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Method which returns the updated array elements based on the pageSize and pageNumber.
const paginate = (array, pageSize, pageNumber) => {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}

// On load initializing 5 elements.
document.getElementById('content').innerHTML =  paginate(arr, 5, 1);

// Next button click event
document.getElementById('next').onclick = function() {
    document.getElementById('content').innerHTML =  paginate(arr, 5, 2);
};

// previous button click event
document.getElementById('previous').onclick = function() {
    document.getElementById('content').innerHTML =  paginate(arr, 5, 1);
};

<button id="previous">Previous</button>
<span id="content"></span>
<button id="next">Next</button>

如何从数组中获取下一个和前五个元素？

How to get next and previous five element of from an array?

javascript

arrays

node.js

ecmascript-6

reactjs