JavaScript中实现CSS nth-child逻辑：动态数组元素处理指南

computed: {
    parsedItems() {
        return this.items?.map((obj, index) => {
            return {
                ...obj,
                aspectRatio:
                    // 尝试直接匹配特定索引
                    7 * index + 1 === 1 ? someAspectRatio1 :
                    7 * index + 2 === 9 ? someAspectRatio2 : // 这里的9是错误的，应是7*1+2=9
                    // ... 这种方式无法实现周期性匹配
                    null
            }
        })
    }
}

computed: {
    parsedItems() {
        return this.items?.map((obj, index) => {
            return {
                ...obj,
                aspectRatio:
                    index % 7 === 0 ? someAspectRatio1 : // 匹配索引0, 7, 14...
                    index % 3 === 0 ? someAspectRatio2 : // 匹配索引0, 3, 6, 9...
                    index % 2 === 0 ? someAspectRatio3 : // 匹配索引0, 2, 4, 6...
                    someAspectRatioDefault
            }
        })
    }
}

/**
 * 模拟CSS nth-child 逻辑，从数组中选择符合条件的元素。
 *
 * @param {Array} array 待处理的数组。
 * @param {number} startIndex 0-indexed 的起始位置，对应CSS nth-child(An + B) 中的 B-1。
 * @param {number} eachIndex 步长，对应CSS nth-child(An + B) 中的 A。
 * @returns {Array} 包含所有匹配元素的数组。
 */
function nthChild(array, startIndex, eachIndex) {
    let newArray = [];
    // 从 startIndex 开始，每次增加 eachIndex
    for (let i = startIndex; i < array.length; i += eachIndex) {
        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 + 4)
// CSS: A=3, B=4
// JS: eachIndex = 3, startIndex = B - 1 = 4 - 1 = 3
let result1 = nthChild(ar, 3, 3);
console.log("模拟 :nth-child(3n + 4):", result1);
// 输出: [3, 6, 9, 12, 15, 18] (这些是数组中索引为 3, 6, 9... 的元素)

// 模拟CSS :nth-child(2n + 1) (奇数元素)
// CSS: A=2, B=1
// JS: eachIndex = 2, startIndex = B - 1 = 1 - 1 = 0
let result2 = nthChild(ar, 0, 2);
console.log("模拟 :nth-child(2n + 1) (奇数元素):", result2);
// 输出: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20] (数组中索引为 0, 2, 4... 的元素)

// 模拟CSS :nth-child(2n) (偶数元素)
// CSS: A=2, B=2
// JS: eachIndex = 2, startIndex = B - 1 = 2 - 1 = 1
let result3 = nthChild(ar, 1, 2);
console.log("模拟 :nth-child(2n) (偶数元素):", result3);
// 输出: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] (数组中索引为 1, 3, 5... 的元素)

// 示例：在Vue computed属性中应用
computed: {
    parsedItemsWithAspectRatios() {
        if (!this.items) return [];

        // 假设我们想为每7个元素中的第1个元素（0-indexed index 0, 7, 14...）设置特殊宽高比
        // 对应CSS :nth-child(7n + 1)
        const specialRatioIndices = this.nthChildIndices(this.items, 0, 7)
                                      .map(item => this.items.indexOf(item)); // 获取原始索引

        return this.items.map((obj, index) => {
            let aspectRatio = defaultAspectRatio;
            if (specialRatioIndices.includes(index)) {
                aspectRatio = someSpecialAspectRatio; // 应用特殊宽高比
            }
            return {
                ...obj,
                aspectRatio: aspectRatio
            };
        });
    }
},
methods: {
    // 将 nthChild 函数封装为方法，方便在组件内使用
    nthChildIndices(array, startIndex, eachIndex) {
        let newArray = [];
        for (let i = startIndex; i < array.length; i += eachIndex) {
            newArray.push(array[i]);
        }
        return newArray;
    }
}