在JavaScript中模拟CSS :nth-child选择器功能及应用

/**
 * 模拟 CSS :nth-child(eachIndex*n + startIndex) 的行为，筛选数组元素。
 *
 * @param {Array} array 待筛选的数组。
 * @param {number} startIndex 匹配的起始索引（1-based，对应CSS的B）。
 * @param {number} eachIndex 匹配的步长（对应CSS的A）。
 * @returns {Array} 包含所有匹配元素的数组。
 */
function nthChildSelector(array, startIndex, eachIndex) {
    let newArray = [];
    // 将CSS的1-based startIndex转换为JS的0-based索引
    const jsStartIndex = startIndex - 1;

    // 确保起始索引有效且不小于0
    if (jsStartIndex < 0 || jsStartIndex >= array.length) {
        return []; // 起始索引超出数组范围，返回空数组
    }

    // 从jsStartIndex开始，以eachIndex为步长遍历数组
    for (let i = jsStartIndex; 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];
let selectedElements = nthChildSelector(ar, 3, 3);

console.log(selectedElements);
// 输出: [3, 6, 9, 12, 15, 18]

/**
 * 检查给定0-based索引是否匹配CSS :nth-child(A*n + B) 模式。
 *
 * @param {number} index 元素的0-based索引。
 * @param {number} A CSS :nth-child(An + B) 中的步长 A。
 * @param {number} B CSS :nth-child(An + B) 中的偏移量 B。
 * @returns {boolean} 如果索引匹配模式则返回 true，否则返回 false。
 */
function isNthChild(index, A, B) {
    // CSS :nth-child 是 1-based 索引，所以需要将 B 转换为 0-based 偏移
    const zeroBasedOffset = B - 1;
    // 确保索引不小于偏移量，且 (索引 - 偏移量) 是 A 的倍数
    return index >= zeroBasedOffset && (index - zeroBasedOffset) % A === 0;
}

<script>
export default {
    props: {
        items: Array
    },
    computed: {
        parsedItems() {
            // 定义不同的宽高比
            const aspectRatio_A = '16:9'; // 例如，对应 7n + 1
            const aspectRatio_B = '4:3';  // 例如，对应 7n + 2
            const aspectRatio_C = '1:1';  // 例如，对应 7n + 3
            const aspectRatio_Default = '3:2'; // 默认宽高比

            /**
             * 检查给定0-based索引是否匹配CSS :nth-child(A*n + B) 模式。
             * 此函数可以定义在组件方法或外部工具函数中
             */
            const isNthChild = (index, A, B) => {
                const zeroBasedOffset = B - 1;
                return index >= zeroBasedOffset && (index - zeroBasedOffset) % A === 0;
            };

            return this.items?.map((obj, index) => {
                let currentAspectRatio = aspectRatio_Default; // 默认值

                if (isNthChild(index, 7, 1)) {
                    currentAspectRatio = aspectRatio_A;
                } else if (isNthChild(index, 7, 2)) {
                    currentAspectRatio = aspectRatio_B;
                } else if (isNthChild(index, 7, 3)) {
                    currentAspectRatio = aspectRatio_C;
                }
                // 可以根据需要添加更多条件，例如 7n+4, 7n+5, 7n+6, 7n+7

                return {
                    ...obj,
                    aspectRatio: currentAspectRatio,
                };
            }) || []; // 如果this.items为null或undefined，返回空数组
        }
    }
}
</script>