ReactJS自定义滑块：实现指定参数的数组子集生成函数

我正在ReactJS中开发自定义滑块，需要编写一个函数生成符合要求的数组子集。该函数接收三个参数：

• sliderItems：待处理的数组列表
• spliceCount：滑块一次显示的元素数量
• slideBy：每次滑动的步长

现有函数的输出不符合预期，以下是示例代码、当前输出及期望输出：

示例代码与当前输出 #

const list = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
const spliceCount = 3;
const slideBy = 2;

function getSubsetOfArray(array, splice, slide) {
  const arrayList = [...array];
  const subsetList = [];
  while(arrayList.length > 0) {
    subsetList.push(arrayList.splice(0, splice));
  }
  return subsetList;
}

console.log(getSubsetOfArray(list, spliceCount, slideBy));

当前输出 #

[['A', 'B', 'C'], ['D', 'E', 'F'], ['G', 'H', 'I'], ['J', 'K']]

期望输出 #

[['A', 'B', 'C'], ['C', 'D', 'E'], ['E', 'F', 'G'], ['G', 'H', 'I'], ['I', 'J', 'K'], ['K']]

修复后的函数 #

const list = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
const spliceCount = 3;
const slideBy = 2;

function getSubsetOfArray(array, spliceCount, slideBy) {
  const subsetList = [];
  let currentIndex = 0;
  const totalLength = array.length;

  while (currentIndex < totalLength) {
    // 截取当前索引开始的指定数量元素，超出数组长度则取到末尾
    const subset = array.slice(currentIndex, currentIndex + spliceCount);
    subsetList.push(subset);
    
    // 若当前子集长度不足显示数量，说明已到最后一组，终止循环
    if (subset.length < spliceCount) {
      break;
    }
    
    // 滑动指定步长
    currentIndex += slideBy;
  }

  return subsetList;
}

console.log(getSubsetOfArray(list, spliceCount, slideBy));

逻辑说明 #

• 改用slice替代splice：slice不会修改原数组，仅返回新的子数组，避免破坏原始数据
• 通过currentIndex跟踪每次截取的起始位置，每次滑动后增加指定步长
• 当截取的子集长度小于spliceCount时，说明已处理到数组末尾，直接终止循环
• 自动处理最后一组不足显示数量的情况，包括仅剩余单个元素的场景

内容的提问来源于stack exchange，提问作者krishna amarghade