JavaScript中高效获取数组元素及移除元素的优化方案

问题背景 #

需要根据对象的codi字段（作为唯一ID）从大型JavaScript数组中获取元素，当前用简单循环实现，存在优化空间；同时需要实现从主数组中提取并移除匹配元素的功能。

数组示例：

const listaSubgrupo = [
  {codi: '291', literal: 'MEDIFIATC Progres 2010 ', check: true},
  {codi: '292', literal: 'MEDIFIATC Progres < 2010 ', check: true},
  {codi: '293', literal: 'MEDIFIATC Progres ', check: true},
  {codi: '294', literal: 'MEDIFIATC Progres 2013  ', check: true},
  {codi: '295', literal: 'MEDIFIATC Progres 2014 ', check: true},
  {codi: '296', literal: 'MEDIFIATC MEDIFIATC  ', check: true},
  {codi: '297', literal: 'MEDIFIATC MEDIFIATC P5 ', check: true},
  {codi: '298', literal: 'MEDIFIATC MEDIFIATC P15 ', check: true},
  {codi: '299', literal: 'MEDIFIATC MEDIFIATC DIAGONAL ', check: true}
];

当前获取元素的代码（存在bug：循环变量j与判断变量i不匹配）：

function obtenerSubgrupo(codi) {
    for(j = 0; j < Object.keys(listaSubgrupo).length; j++) {
        if (codi == listaSubgrupo[i].codi) {
                return listaSubgrupo[i];
        }
    }   
}

一、优化元素获取方法 #

1. 可读性优先：使用Array.find #

数组原生的find方法专为查找第一个匹配元素设计，代码简洁直观，同时解决原代码的变量bug：

function obtenerSubgrupo(codi) {
  return listaSubgrupo.find(item => item.codi === codi);
}

2. 性能优先：预构建映射对象 #

如果需要频繁查询，提前将数组转换为以codi为键的映射对象，查询时间复杂度从O(n)降至O(1)：

// 仅需初始化一次
const subgrupoMap = listaSubgrupo.reduce((map, item) => {
  map[item.codi] = item;
  return map;
}, {});

// 查询方法
function obtenerSubgrupo(codi) {
  return subgrupoMap[codi];
}

数据量越大、查询越频繁，该方案的性能优势越明显。

3. 极致性能：优化原生for循环 #

若坚持使用for循环，修复bug并优化（缓存数组长度，避免全局变量污染）：

function obtenerSubgrupo(codi) {
  const len = listaSubgrupo.length;
  for(let i = 0; i < len; i++) {
    if (listaSubgrupo[i].codi === codi) {
      return listaSubgrupo[i];
    }
  }
}

二、提取并移除匹配元素 #

1. 修改原数组：findIndex + splice #

先找到元素索引，再用splice删除并返回该元素：

function extractAndRemove(codi) {
  const index = listaSubgrupo.findIndex(item => item.codi === codi);
  if (index !== -1) {
    return listaSubgrupo.splice(index, 1)[0];
  }
  return null; // 未找到返回null
}

2. 不修改原数组：find + filter #

保留原数组，生成新数组存储剩余元素，同时返回匹配项：

function extractAndRemove(codi) {
  const matched = listaSubgrupo.find(item => item.codi === codi);
  listaSubgrupo = listaSubgrupo.filter(item => item.codi !== codi);
  return matched || null;
}

3. 性能最优：原生for循环实现 #

function extractAndRemove(codi) {
  const len = listaSubgrupo.length;
  for(let i = 0; i < len; i++) {
    if (listaSubgrupo[i].codi === codi) {
      const removedItem = listaSubgrupo[i];
      listaSubgrupo.splice(i, 1);
      return removedItem;
    }
  }
  return null;
}

补充说明 #

关于不同方法的性能对比：在数据量较大时，原生for循环的性能通常更优；而数组方法（如find）的代码可读性更强，适合大多数日常开发场景，可根据实际需求选择。

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