JavaScript大型数组分页与性能优化教程

/**
 * 将大型数组分割成指定大小的块
 * @param {Array} originalArray - 待分割的原始数组
 * @param {number} chunkSize - 每个块（页）的大小
 * @returns {Array<Array>} 包含所有块的数组
 */
function paginateArray(originalArray, chunkSize) {
    const paginatedArrays = [];
    // 遍历原始数组，每次跳过一个chunkSize的长度
    for (let i = 0; i < originalArray.length; i += chunkSize) {
        // 使用 slice() 方法从当前索引 i 开始，截取 chunkSize 长度的子数组
        paginatedArrays.push(originalArray.slice(i, i + chunkSize));
    }
    return paginatedArrays;
}

// 示例：一个包含15个元素的数组，每页4个元素
const largeArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
const pageSize = 4;

const pagedResult = paginateArray(largeArray, pageSize);

console.log(pagedResult);
/*
输出结果:
[
  [0, 1, 2, 3],
  [4, 5, 6, 7],
  [8, 9, 10, 11],
  [12, 13, 14] // 最后一页可能不足pageSize
]
*/

// 对于实际应用中53000个对象的数组，假设每页500个对象
const veryLargeArray = Array.from({ length: 53000 }, (_, i) => `Object ${i}`);
const realPageSize = 500;
const realPaginatedData = paginateArray(veryLargeArray, realPageSize);

console.log(`总页数: ${realPaginatedData.length}`); // 53000 / 500 = 106页
console.log(`第一页数据:`, realPaginatedData[0]);
console.log(`最后一页数据:`, realPaginatedData[realPaginatedData.length - 1]);

// 假设 suppliersData 已经是一个包含所有数据的数组
let allSuppliersData = []; // 存储所有供应商数据
let allClientsData = [];   // 存储所有客户数据
const PAGE_SIZE = 500; // 定义每页数据量

ipcMain.on('init', (event) => {
    // 假设查询已经完成，并将所有数据存储在 allSuppliersData 和 allClientsData 中
    // 实际应用中，这里应该是在数据库查询成功后填充这些数组
    Promise.all([
        suppliersdb.query('SELECT * FROM FANFOR0F_1').then(results => {
            allSuppliersData = results;
            console.log(`供应商数据总量: ${allSuppliersData.length}`);
        }),
        clientsdb.query('SELECT * FROM PDECON0F_1').then(results => {
            allClientsData = results;
            console.log(`客户数据总量: ${allClientsData.length}`);
        })
    ]).then(() => {
        // 数据加载完成后，可以发送一个通知，或者直接发送第一页数据
        event.sender.send('initialDataLoaded', {
            suppliersTotal: allSuppliersData.length,
            clientsTotal: allClientsData.length,
            // 可以选择发送第一页数据，或者等待前端请求
            initialSuppliersPage: paginateArray(allSuppliersData, PAGE_SIZE)[0],
            initialClientsPage: paginateArray(allClientsData, PAGE_SIZE)[0]
        });
    }).catch(e => {
        console.error('数据库加载错误:', e);
        event.sender.send('databaseUpdateError', e);
    });
});

// 提供一个IPC通道，让渲染进程请求特定页的数据
ipcMain.on('requestPagedData', (event, { dataType, pageNumber }) => {
    let targetArray = [];
    if (dataType === 'suppliers') {
        targetArray = allSuppliersData;
    } else if (dataType === 'clients') {
        targetArray = allClientsData;
    }

    if (targetArray.length > 0) {
        const paginated = paginateArray(targetArray, PAGE_SIZE);
        const requestedPage = paginated[pageNumber - 1]; // pageNumber从1开始
        event.sender.send('receivePagedData', { dataType, pageNumber, data: requestedPage });
    } else {
        event.sender.send('receivePagedData', { dataType, pageNumber, data: [], error: 'Data not loaded yet.' });
    }
});

<template>
  <div>
    <h1>供应商列表</h1>
    <ul>
      <li v-for="supplier in currentSuppliersPage" :key="supplier.id">{{ supplier.name }}</li>
    </ul>
    <button @click="loadNextPage('suppliers')" :disabled="currentPage.suppliers >= totalPages.suppliers">加载更多供应商</button>

    <h1>客户列表</h1>
    <ul>
      <li v-for="client in currentClientsPage" :key="client.id">{{ client.name }}</li>
    </ul>
    <button @click="loadNextPage('clients')" :disabled="currentPage.clients >= totalPages.clients">加载更多客户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSuppliersPage: [],
      currentClientsPage: [],
      currentPage: { suppliers: 0, clients: 0 }, // 当前加载的页码（从0开始）
      totalPages: { suppliers: 0, clients: 0 },
      totalItems: { suppliers: 0, clients: 0 },
      pageSize: 500 // 与主进程保持一致
    };
  },
  mounted() {
    window.ipcRenderer.send('init');

    window.ipcRenderer.receive('initialDataLoaded', (payload) => {
      this.totalItems.suppliers = payload.suppliersTotal;
      this.totalItems.clients = payload.clientsTotal;
      this.totalPages.suppliers = Math.ceil(payload.suppliersTotal / this.pageSize);
      this.totalPages.clients = Math.ceil(payload.clientsTotal / this.pageSize);

      // 接收并显示第一页数据
      this.currentSuppliersPage = payload.initialSuppliersPage;
      this.currentClientsPage = payload.initialClientsPage;
      this.currentPage.suppliers = 1; // 标记已加载第一页
      this.currentPage.clients = 1;
    });

    window.ipcRenderer.receive('receivePagedData', ({ dataType, pageNumber, data, error }) => {
      if (error) {
        console.error(`加载 ${dataType} 第 ${pageNumber} 页失败:`, error);
        return;
      }
      if (dataType === 'suppliers') {
        this.currentSuppliersPage = this.currentSuppliersPage.concat(data); // 追加数据
        this.currentPage.suppliers = pageNumber;
      } else if (dataType === 'clients') {
        this.currentClientsPage = this.currentClientsPage.concat(data);
        this.currentPage.clients = pageNumber;
      }
    });

    window.ipcRenderer.receive('databaseUpdateError', (error) => {
      console.error('数据库更新错误:', error);
      // 处理错误显示
    });
  },
  methods: {
    loadNextPage(dataType) {
      let nextPageNum;
      if (dataType === 'suppliers') {
        nextPageNum = this.currentPage.suppliers + 1;
        if (nextPageNum > this.totalPages.suppliers) return;
      } else if (dataType === 'clients') {
        nextPageNum = this.currentPage.clients + 1;
        if (nextPageNum > this.totalPages.clients) return;
      }
      window.ipcRenderer.send('requestPagedData', { dataType, pageNumber: nextPageNum });
    }
  }
};
</script>