当前位置：首页 > article >正文

JS实现数据循环顺位获取元素，数组元素不足时，能够从头开始顺位取元素以补足

article 2024/12/3 4:59:28

因为需要实现一个功能：指定数组中每次顺位取出3个元素，用于循环显示于前端。

平时可以这样实现，但是 数组元素不足时会出现空：

//指定数组顺位获取元素
function getArr(){

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; //数组
let totalNum = 7; // 总共循环7次
let everyNum= 3; // 每次取3个元素

for (let i = 0; i < totalNum ; i++) {  //循环7次

    // 计算每次循环的起始索引和结束索引
    let startIndex = i * everyNum;
    let endIndex = startIndex + everyNum;
    // 使用slice方法获取当前循环的3个元素（或更少的元素，如果数组不够长）
    let currentElements = arr.slice(startIndex, endIndex);
    // 输出当前循环获取的元素
    console.log(currentElements);

  }

}


//结果
[1, 2, 3]
[4, 5, 6]
[7, 8, 9]
[10]         // 注意这里只有1个元素，因为数组已经不够3个了
[]       // 空数组，因为已经没有更多元素可以取了
[]       // 
[]       //

我们需要的时它能一直有数据，并且数组元素不足时，能够从头开始顺位取元素以补足

以下实现：

//指定数组顺位获取元素
function getArr(){

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let totalNum = 7;
let everyNum = 3;

for (let i = 0; i < totalNum; i++) {

    let currentElements = [];

    for (let j = 0; j < everyNum; j++) {
        // 使用取模操作确保索引在数组范围内循环
        let index = (i * everyNum + j) % arr.length;
        currentElements.push(arr[index]);
    }

    console.log(currentElements); //
 }

}

//结果：
[1, 2, 3]
[4, 5, 6]
[7, 8, 9]
[10, 1, 2]
[3, 4, 5]
[6, 7, 8]
[9, 10, 1]