TypeScript实现循环获取排除指定元素的有序数组切片

核心规则 #

实现的getSlice方法需要满足以下要求：

• 支持任意长度的输入数组
• 返回结果排除传入的指定目标元素
• 剩余元素保持原有相对顺序，从目标元素的下一位开始按循环排列规则返回

完整实现代码 #

const getSlice = <T>(arr: T[], target: T): T[] => {
  const targetIndex = arr.indexOf(target)
  // 目标元素不存在时返回原数组浅拷贝，避免异常
  if (targetIndex === -1) return [...arr]
  // 拼接目标元素后半段 + 目标元素前半段，自然跳过目标元素
  return [...arr.slice(targetIndex + 1), ...arr.slice(0, targetIndex)]
}

// 示例用法
type Positions = "top" | "right" | "bottom" | "left"
const POSITIONS: Positions[] = ["top", "right", "bottom", "left"]

const fn = (place: Positions) => {
  return getSlice(POSITIONS, place) 
}

// 运行结果
fn("top")    // ["right","bottom", "left"]
fn("right")  // ["bottom", "left", "top"]
fn("bottom") // ["left", "top", "right"]
fn("left")   // ["top", "right", "bottom"]

逻辑说明 #

1. 先通过indexOf定位目标元素在数组中的索引，处理目标元素不存在的边界场景，直接返回原数组副本
2. 截取目标元素索引之后的所有元素，作为结果的前半部分
3. 截取数组开头到目标元素索引之前的所有元素，作为结果的后半部分
4. 两部分拼接后就得到符合要求的结果：既排除了目标元素，又实现了从下一位开始循环遍历的效果，元素相对顺序和原数组完全一致。

注意：如果数组中存在多个和传入target相等的元素，方法默认以第一个匹配到的元素作为截断基准；如果是引用类型元素，需要保证传入的target和数组内对应元素引用一致才能正常匹配。

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