排班工具中实现数组元素循环移位并保留空白元素

需求明确：保留排班数组中的空白元素位置，将非空白员工循环下移一位（最后一位员工移到列表顶部）。以下是兼顾可读性与可维护性的优化实现：

优化后代码 #

// 原始排班数据
const assignedStaff = [
  {periodId: 1, staffName: "Jimbo"},
  {periodId: 1, staffName: ""},
  {periodId: 1, staffName: "Lucy"},
  {periodId: 1, staffName: ""},
  {periodId: 1, staffName: "Claire"}
];

// 提取非空白员工并完成循环移位（最后一位移至首位）
const getRotatedStaff = (staffList) => {
  const nonEmptyStaff = staffList.filter(item => item.staffName !== "");
  // 边界处理：无员工或仅一位员工时无需移位
  if (nonEmptyStaff.length <= 1) return nonEmptyStaff;
  // 解构实现移位，比pop+unshift更直观
  return [nonEmptyStaff.at(-1), ...nonEmptyStaff.slice(0, -1)];
};

// 生成新排班表：保留空白位置，填充移位后的员工
const generateNewRoster = (originalRoster, rotatedStaff) => {
  let staffIndex = 0;
  return originalRoster.map(item => 
    item.staffName !== "" ? rotatedStaff[staffIndex++] : {...item}
  );
};

// 执行生成流程
const newPeriod = generateNewRoster(assignedStaff, getRotatedStaff(assignedStaff));
console.log(newPeriod);

优化说明 #

• 语义化命名：变量与函数名称直接体现功能（如getRotatedStaff负责员工移位，generateNewRoster负责生成新排班），降低理解成本
• 逻辑模块化：将提取员工、移位、生成排班拆分为独立函数，每个函数单一职责，后续修改或扩展（比如调整移位方向）更便捷
• 简化遍历逻辑：用Array.map替代手动for循环，代码更简洁，可读性更强
• 边界情况处理：增加对员工数组为空或仅一人的判断，避免无效操作
• 避免引用污染：对空白元素做浅拷贝{...item}，防止原数组被意外修改
• 直观的移位实现：用数组解构[lastItem, ...rest]替代pop+unshift，逻辑更清晰

原代码存在的小问题：未给populated声明关键字（会成为全局变量），手动循环可读性弱，逻辑未模块化，不利于后续维护。

内容的提问来源于stack exchange，提问作者Jim Jimson