如何重构数组处理代码提升性能？百万级数据场景优化咨询

问题背景 #

处理数十万条数据时，仅少数元素符合条件，现有代码却要为所有不符合条件的元素推入空数组，既浪费内存又影响性能。核心需求是保留原数据的索引位置，能通过索引直接定位对应数据，同时区分空值与有效数据。

原代码 #

var statusMapped = [];  
var arrayOfStatusMapped = [];

data.forEach((val, i) => {
    if (data[i].status) 
    { 
        var statusValue = value; // 注：原代码存在变量未定义问题，推测应为val.status
        var Key = getKeyByValue(statusList, statusValue ); 
        statusMapped.push(Key);
        arrayOfStatusMapped.push(statusMapped); 
    }                                  
    else 
    {  
        arrayOfStatusMapped.push([]);                    
    }
})

原展示数据代码 #

arrayOfStatusMapped[index].forEach((status, i) => {                        
    ${arrayOfStatusMapped[index][i]} 
})

优化方案 #

方案1：使用稀疏数组（最直接的内存优化）

稀疏数组不会为未赋值的索引分配内存，仅存储有值的位置。直接初始化数组长度，只给符合条件的索引赋值：

const arrayOfStatusMapped = new Array(data.length); // 直接指定数组长度
data.forEach((val, i) => {
    if (val.status) { // 直接用当前迭代的val，避免data[i]重复查找
        const statusValue = val.status; // 修正原代码变量未定义问题
        const key = getKeyByValue(statusList, statusValue);
        arrayOfStatusMapped[i] = [key]; // 按索引直接赋值，空索引自动为undefined
    }
    // 不符合条件的索引不处理，保持undefined
})

展示数据时，只需判断索引位置是否有值：

const item = arrayOfStatusMapped[index];
if (item) {
    item.forEach(status => {
        ${status}
    });
}
// 无数据时直接跳过，或按需做空值处理

优势：

• 内存占用大幅降低：仅存储100个有效元素，其余索引不占内存
• 性能提升：避免了99900次空数组的创建与推入操作

方案2：使用对象存储索引与对应数据

如果不需要严格的数组结构，用对象存储有效索引和对应数据，进一步节省内存：

const statusMap = {};
data.forEach((val, i) => {
    if (val.status) {
        const statusValue = val.status;
        const key = getKeyByValue(statusList, statusValue);
        statusMap[i] = [key]; // 仅存储有数据的索引
    }
})

展示数据时，检查对象中是否存在该索引：

if (statusMap[index]) {
    statusMap[index].forEach(status => {
        ${status}
    });
}

优势：

• 内存占用最少：只存储100个键值对
• 查找速度快：对象属性查找是O(1)操作

方案3：预计算有效索引并映射（适合批量处理场景）

如果后续需要频繁遍历有效数据，可以同时存储有效索引列表和对应数据：

const validIndices = [];
const validStatuses = [];

data.forEach((val, i) => {
    if (val.status) {
        const statusValue = val.status;
        const key = getKeyByValue(statusList, statusValue);
        validIndices.push(i);
        validStatuses.push([key]);
    }
})

展示指定索引时，通过查找有效索引列表判断是否存在：

const idx = validIndices.indexOf(index);
if (idx !== -1) {
    validStatuses[idx].forEach(status => {
        ${status}
    });
}

优势：

• 遍历有效数据时无需跳过空值，效率更高
• 同时保留了索引与数据的对应关系

原代码潜在问题修正 #

1. 原代码中statusValue = value存在变量未定义问题，推测应为val.status
2. statusMapped变量被重复推入数组，会导致所有有效位置引用同一个数组，后续修改会影响所有元素，正确做法应为每次创建新数组[key]

内容的提问来源于stack exchange，提问作者Sarahrb