在JavaScript中高效模拟CSS的:nth-child选择器

computed: {
    parsedItems() {
        return this.items?.map((obj, index) => {
            return {
                ...obj,
                aspectRatio:
                    // 尝试直接乘法和加法，无法形成循环模式
                    7 * index + 1 === 1
                        ? someAspectRatio1
                        : 7 * index + 2 === 9 // 这里逻辑就已不对，9不是7n+2
                            ? someAspectRatio2
                            // ...etc
            }
        })
    }
}

computed: {
    parsedItems() {
        return this.items?.map((obj, index) => {
            return {
                ...obj,
                aspectRatio:
                    index % 7 === 0 // 对应 7n+7 (或 7n)
                        ? someAspectRatio1
                        : index % 3 === 0 // 引入了不相关的模式，导致混淆
                            ? someAspectRatio2
                            : index % 2 === 0
                                ? someAspectRatio3
                                : someAspectRatioDefault
            }
        })
    }
}

/**
 * 模拟 CSS :nth-child(eachIndex*n + startIndex) 的行为，
 * 从数组中筛选出符合特定模式的元素。
 *
 * @param {Array} array 要处理的数组。
 * @param {number} startIndex 偏移量 B (1-based)，在函数内部会转换为0-based。
 * @param {number} eachIndex 循环周期 A。
 * @returns {Array} 包含所有匹配元素的数组。
 */
function nthChildSelector(array, startIndex, eachIndex) {
   let newArray = [];
   // 将1-based的startIndex转换为0-based的索引
   // 例如，:nth-child(3n + 3) 的 startIndex 是 3，对应的0-based索引是 2
   // 循环从 (startIndex - 1) 开始
   for (let i = startIndex - 1; i < array.length; i += eachIndex) {
       newArray.push(array[i]);
   }
   return newArray;
}

let dataArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

// 对应 CSS :nth-child(3n + 3)
let selectedElements = nthChildSelector(dataArray, 3, 3);

console.log(selectedElements);
// 预期输出: [2, 5, 8, 11, 14, 17, 20] (注意：这里是0-based索引的元素值)

// 如果要匹配CSS的输出 (1-based索引)，则需要调整startIndex和数组内容
// 例如，如果dataArray是[item1, item2, ...], 那么 nthChildSelector(dataArray, 3, 3) 
// 实际会返回 [item3, item6, item9, ...]

computed: {
    parsedItems() {
        return this.items?.map((obj, index) => {
            let aspectRatio;
            const cyclePosition = index % 7; // 获取在7个周期中的位置 (0-6)

            switch (cyclePosition) {
                case 0: // 对应 :nth-child(7n + 1)
                    aspectRatio = 'aspectRatioValueFor_7n_plus_1';
                    break;
                case 1: // 对应 :nth-child(7n + 2)
                    aspectRatio = 'aspectRatioValueFor_7n_plus_2';
                    break;
                case 2: // 对应 :nth-child(7n + 3)
                    aspectRatio = 'aspectRatioValueFor_7n_plus_3';
                    break;
                case 3: // 对应 :nth-child(7n + 4)
                    aspectRatio = 'aspectRatioValueFor_7n_plus_4';
                    break;
                case 4: // 对应 :nth-child(7n + 5)
                    aspectRatio = 'aspectRatioValueFor_7n_plus_5';
                    break;
                case 5: // 对应 :nth-child(7n + 6)
                    aspectRatio = 'aspectRatioValueFor_7n_plus_6';
                    break;
                case 6: // 对应 :nth-child(7n + 7)
                    aspectRatio = 'aspectRatioValueFor_7n_plus_7';
                    break;
                default:
                    aspectRatio = 'defaultAspectRatio'; // 应该不会执行到这里
            }

            return {
                ...obj,
                aspectRatio: aspectRatio
            };
        });
    }
}