JavaScript中模拟CSS nth-child选择器行为的实现指南

/**
 * 模拟CSS nth-child选择器，从数组中提取符合模式的元素。
 * @param {Array} array - 要处理的源数组。
 * @param {number} startIndex - 对应CSS nth-child(An + B) 中的 B，表示从第几个元素开始（1-based）。
 *                              在JS 0-indexed中，实际起始索引为 startIndex - 1。
 * @param {number} eachIndex - 对应CSS nth-child(An + B) 中的 A，表示步长。
 * @returns {Array} - 包含所有匹配元素的数组。
 */
function nthChild(array, startIndex, eachIndex) {
    let newArray = [];
    // 将CSS的1-based startIndex转换为JS的0-based索引
    // 如果 startIndex 为 1，则 JS 索引为 0
    // 如果 startIndex 为 3，则 JS 索引为 2
    const actualStartIndex = startIndex - 1;

    // 循环从实际起始索引开始，每次递增 eachIndex
    for (let i = actualStartIndex; i < array.length; i += eachIndex) {
        // 确保 i 不会是负数（虽然在实际应用中 startIndex - 1 很少是负数，但逻辑上需要考虑）
        if (i >= 0) {
            newArray.push(array[i]);
        }
    }
    return newArray;
}

let ar = [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)
// 对应 JS nthChild(array, startIndex=3, eachIndex=3)
let result1 = nthChild(ar, 3, 3);
console.log("nth-child(3n + 3) 结果:", result1);
// 输出: (6) [2, 5, 8, 11, 14, 17]
// 注意：这里与原答案的输出 [3, 6, 9, 12, 15, 18] 不同，是因为原答案的 for 循环 `i=startIndex` 并没有正确处理 1-based 到 0-based 的转换。
// 如果要得到 [3, 6, 9, 12, 15, 18]，那意味着我们希望选择索引为 3, 6, 9... 的元素。
// 这种情况实际上对应的是 CSS 的 nth-child(3n + 4) 如果数组从0开始。
// 或者，如果 `startIndex` 和 `eachIndex` 直接代表 JS 0-indexed 的行为，那么 `nthChild(ar, 3, 3)` 就会得到 [3, 6, 9, ...]
// 让我们调整函数，使其更严格地符合 CSS nth-child 的 1-based 定义。

// 重新审视原答案的 `nthChild(ar, 3, 3)` 得到 `[3, 6, 9, 12, 15, 18]`
// 这意味着它选择的是索引为 3, 6, 9... 的元素。
// 如果我们希望函数参数 `startIndex` 严格对应 CSS 的 `B` (1-based)，`eachIndex` 对应 `A`。
// 那么 `nth-child(3n + 3)` 应该选择 1-based 的第 3, 6, 9... 个元素。
// 对应 0-based 的索引是 2, 5, 8...
// 我上面实现的 `nthChild(ar, 3, 3)` 得到了 `[2, 5, 8, 11, 14, 17]`，这是正确的。
// 原答案的输出 `[3, 6, 9, 12, 15, 18]` 实际上是选择了 `ar[3], ar[6], ar[9]...`
// 这对应的是 CSS `nth-child(3n + 4)` (1-based index 4, 7, 10...)

// 为了与原答案的输出保持一致，我们可以修改函数，使其 `startIndex` 直接作为 JS 0-indexed 的起始。
// 但这会混淆 `nth-child` 的 1-based 语义。
// 更好的做法是，坚持 `startIndex` 是 1-based 的 `B`。
// 如果用户想要选择索引为 3, 6, 9... 的元素，那对应的 CSS 是 `nth-child(3n + 4)`。
// 那么调用就是 `nthChild(ar, 4, 3)`。

// 示例：模拟 CSS :nth-child(7n + 1)
// 对应 0-based 索引 0, 7, 14...
let result2 = nthChild(ar, 1, 7);
console.log("nth-child(7n + 1) 结果:", result2);
// 输出: (3) [0, 7, 14]

// 示例：模拟 CSS :nth-child(7n + 4)
// 对应 0-based 索引 3, 10, 17...
let result3 = nthChild(ar, 4, 7);
console.log("nth-child(7n + 4) 结果:", result3);
// 输出: (3) [3, 10, 17]

computed: {
    parsedItems() {
        return this.items?.map((obj, index) => {
            let aspectRatio = 'defaultAspectRatio'; // 默认宽高比

            // CSS nth-child(An + B) 对应 JS 0-indexed index % A === (B - 1 + A) % A
            // (B - 1 + A) % A 用于确保 B-1 结果为正，如果 B-1 可能是负数。
            // 但对于 nth-child，B 总是 >= 1，所以 B-1 总是 >= 0。
            // 因此，更简洁的对应关系是 index % A === (B - 1)。

            // 模拟 :nth-child(7n + 1) -> 0-indexed index % 7 === 0
            if (index % 7 === 0) {
                aspectRatio = 'aspectRatioFor7nPlus1';
            }
            // 模拟 :nth-child(7n + 2) -> 0-indexed index % 7 === 1
            else if (index % 7 === 1) {
                aspectRatio = 'aspectRatioFor7nPlus2';
            }
            // 模拟 :nth-child(7n + 3) -> 0-indexed index % 7 === 2
            else if (index % 7 === 2) {
                aspectRatio = 'aspectRatioFor7nPlus3';
            }
            // ...以此类推，直到 :nth-child(7n + 7) -> 0-indexed index % 7 === 6
            else if (index % 7 === 6) {
                aspectRatio = 'aspectRatioFor7nPlus7';
            }
            // 如果需要，可以添加更多的 else if 来覆盖其他模式

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