如何在JavaScript中获取数组的上一个与下一个元素（支持首尾循环）

实现这个需求的核心是用取模运算处理边界循环场景，不需要写冗余的首尾判断逻辑，具体实现如下：

核心逻辑步骤 #

• 先校验数组是否为空、目标元素是否存在于数组中，提前拦截异常场景
• 查找目标元素在数组中的对应索引
• 计算相邻索引时对数组长度取模，天然实现首尾循环：
  • 下一个元素索引：(当前索引 + 1) % 数组长度，若当前是最后一位元素，计算结果为0，对应第一个元素
  • 上一个元素索引：(当前索引 - 1 + 数组长度) % 数组长度，额外加数组长度是为了避免当前索引为0时，减1得到负数导致取模结果异常

完整代码示例 #

// 示例数组和目标元素
const array = [ "item1", "item2", "item3" ]
const itemOfArray = "item2"

// 获取下一个元素（支持首尾循环）
function getNextCircularItem(arr, target) {
  if (!arr.length) return null
  const currentIndex = arr.indexOf(target)
  if (currentIndex === -1) return null
  const nextIndex = (currentIndex + 1) % arr.length
  return arr[nextIndex]
}

// 获取上一个元素（支持首尾循环）
function getPrevCircularItem(arr, target) {
  if (!arr.length) return null
  const currentIndex = arr.indexOf(target)
  if (currentIndex === -1) return null
  const prevIndex = (currentIndex - 1 + arr.length) % arr.length
  return arr[prevIndex]
}

测试效果 #

• getNextCircularItem(array, itemOfArray) 返回结果：item3
• getNextCircularItem(array, "item3") 返回结果：item1（符合尾循环跳转要求）
• getPrevCircularItem(array, itemOfArray) 返回结果：item1
• getPrevCircularItem(array, "item1") 返回结果：item3（符合首循环跳转要求）

注意：如果数组中存在重复元素，indexOf只会返回第一个匹配元素的索引，如有处理重复元素的需求，可以将索引查找逻辑替换为findIndex自定义匹配规则。

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