如何对JavaScript数组进行分页？

我希望对JavaScript数组中的数据进行分页。页面上显示的产品数量为3。每3个产品后会有分页。但是当我提出请求时，这些页面应该会出现。下面是我带来页面数据的for循环示例

下面是一个示例JavaScript数组和

JavaScript函数

   function getProducts(products = [], categoryName = 'Food') {
                    let result = [];

                    for (let product of products) {
                    if (product.categories === undefined || !Array.isArray(product.categories)) {
                    break;
                    }

            for (let category of product.categories) {
                if (category.categoryName === categoryName) {
                    result.push(product);
                    break;
                }
            }
                    }

            return result;
        }

JavaScript循环

const categoryName = $(this).data('category');
const products = getProducts(product, categoryName);    


for (let product of products) {
     $(tab).append( "<p>Product name:"+product.product_name+"</p><p>Product Id:"+product.product_id+"</p><p>Price:"+product.product_price+"</p>");
               }

const categoryName=$（this.data（'category'）；
const products=getProducts（产品，类别名称）；
对于（产品中的产品）{
$（选项卡）。追加（“产品名称：“+Product.Product\u name+”
产品Id:“+Product.Product\u Id+”
价格：“+Product.Product\u价格+”
”）；
}

我很难理解您的要求/试图实现的目标。@connexo更新了我的问题。我需要对每3项进行分页。如果您的目的是将对象数组拆分为块，您可能希望签出@YevgenGorbunkov我想拆分它，但我想在单击“下一步”按钮时进行拆分，然后它将工作并转到下一个3项。不是一次性获取所有项目并滑动它。我最近实现了类似的（至少我了解到）用例。它是基于React.js的，但是它的核心原则是非常基本的，实际上，您可能会发现它也有用处。

const categoryName = $(this).data('category');
const products = getProducts(product, categoryName);    


for (let product of products) {
     $(tab).append( "<p>Product name:"+product.product_name+"</p><p>Product Id:"+product.product_id+"</p><p>Price:"+product.product_price+"</p>");
               }