我想对前 6 个元素进行排序，但它正在排序并显示所有元素

Question

我使用参数在 loadAllData(limit) 函数中获取数据。并调用代码的函数结束。在第一步中，我调用 loadAllData(6)，以便它显示前 6 个元素，当显示更多按钮时，它会调用不带参数的 loadAllData()。在 displayAllData(data, limit) 中，它检查是否存在限制，而不是将数组拆分为 6 或循环遍历数据（数组）。

const loadAllData = (limit) => {
    const url = 'https://openapi.programming-hero.com/api/ai/tools';
    fetch(url)
        .then(res => res.json())
        .then(data => displayAllData(data.data.tools, limit))
        .catch(err => console.log(err))
}

const displayAllData = (data, limit) => {

    const cardContainer = document.getElementById('cardContainer');
    // cardContainer.innerText = '';
    
    if(limit && data.length >=6) {
        cardContainer.innerText = '';
        document.getElementById('showMoreBtn').classList.remove('d-none');
        data = data.slice(0, 6);
    }
    else {
        cardContainer.innerText = '';
        document.getElementById('showMoreBtn').classList.add('d-none');
    }
    
    for (const element of data) {
        //It works fine
    }
}

loadAllData(6);

document.getElementById('showMoreBtn').addEventListener('click', function() {
    document.getElementById('loaderDiv').classList.add('d-block');
    document.getElementById('showMoreBtn').classList.add('d-none');
    loadAllData();
})

当调用“按日期排序”时，它将排序后的数据传递给 displayAllData(data)。现在的问题是在单击显示更多按钮或展开所有数据后，“按日期排序”时间正常。但是当“按日期排序”点击默认的 6 个元素时。它还显示了所有数据并进行了排序。

const sortFunction = (data) => {
    data.sort(function (a, b) {
        var c = new Date(a.published_in);
        var d = new Date(b.published_in);
        return d - c;
    });

    displayAllData(data);
}

请帮帮我。 提前致谢

我尝试对前（初始）6个元素进行排序；但是当我点击“按日期排序”时，它对所有数据进行了排序并显示了所有数据。

Answer 1

使用

sort

就地排序数组并改变原始数组。在排序之前，您应该制作数据数组的（浅）副本。

const sortFunction = (data) => {
    const copy = [...data]; // or data.slice(0)

    copy.sort(function (a, b) {
        var c = new Date(a.published_in);
        var d = new Date(b.published_in);
        return d - c;
    });

    displayAllData(copy);
};