如何通过传入pattern参数按索引分段给元素加类名，避免冗余if判断

你可以通过可配置的分段规则参数实现需求，无需写固定if判断，任意长度的元素列表都可以按规则循环分段。

核心思路 #

• 计算分段规则的总长度，作为单个循环周期的长度
• 预处理每个分段的区间阈值，方便后续快速匹配
• 遍历元素时将索引对周期长度取模，得到当前索引在单个周期内的相对位置，匹配对应分段的类名即可

代码实现 #

灵活配置版（支持自定义每个分段的类名） #

你可以直接传入分段规则和对应类名，后续调整规则只需要修改传入的配置即可：

function rearrangeItems (items, pattern) {
    // 计算单个循环周期的总长度
    const cycleTotal = pattern.reduce((sum, seg) => sum + seg.count, 0)
    // 预计算每个分段的起止区间
    const segments = []
    let offset = 0
    pattern.forEach(seg => {
        segments.push({
            start: offset,
            end: offset + seg.count - 1,
            className: seg.className
        })
        offset += seg.count
    })

    items.forEach((element, index) => {
        const posInCycle = index % cycleTotal
        const matchedSeg = segments.find(seg => posInCycle >= seg.start && posInCycle <= seg.end)
        matchedSeg && element.classList.add(matchedSeg.className)
    })
}

// 调用示例，和你原有逻辑完全对齐
const pattern = [
    {count: 5, className: 'col-fifth'},
    {count: 4, className: 'col-fourth'},
    {count: 6, className: 'col-sixth'}
]
rearrangeItems(yourItems, pattern)

简化版（直接传入数值形式的pattern） #

如果你希望pattern直接用数值数组的形式传入，可以用以下写法：

function rearrangeItems (items, pattern = [5,4,6]) {
    const cycleTotal = pattern.reduce((sum, num) => sum + num, 0)
    // 对应pattern下标的类名映射，调整pattern时同步修改这里即可
    const classMap = ['col-fifth', 'col-fourth', 'col-sixth']
    // 预计算分段阈值
    const thresholds = pattern.reduce((acc, num) => {
        acc.push(acc.length ? acc.at(-1) + num : num)
        return acc
    }, [])

    items.forEach((element, index) => {
        const posInCycle = index % cycleTotal
        const segIndex = thresholds.findIndex(threshold => posInCycle < threshold)
        element.classList.add(classMap[segIndex])
    })
}

// 调用示例
rearrangeItems(yourItems, [5,4,6])

以上两种写法都支持任意长度的元素列表，会自动按你传入的分段规则循环匹配，不需要新增额外的条件判断。

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