如何在JavaScript中向options数组添加object2中未存在的元素（按id匹配）

我有一个名为options的数组，需要将object2中id未在options的value字段中出现的元素，以{value: id值, label: 对应标签, mapped: true}的格式追加到options数组中。

示例数据 #

options数组 #

const options = [
  {value: '642a60e2573c9d004b041407', label: 'label1', mapped: true},
  {value: '642a60e2573c9d004b041408', label: 'label2', mapped: true},
  {value: '642a60e2573c9d004b041409', label: 'label3', mapped: true},
  {value: '642a60e2573c9d004b04140a', label: 'label4', mapped: true},
  {value: '642a60e2573c9d004b04140b', label: 'label5 ', mapped: true},
  {value: '642a60e2573c9d004b04140c', label: 'label6', mapped: true}
];

object2对象 #

const object2 = {
  '642a60e2573c9d004b04140a': {id: '642a60e2573c9d004b04140a', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null},
  '642a60e2573c9d004b04140b': {id: '642a60e2573c9d004b04140b', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null},
  '642a60e2573c9d004b04140c': {id: '642a60e2573c9d004b04140c', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null},
  '642a60e2573c9d004b04140d': {id: '642a60e2573c9d004b04140d', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null},
  '642a60e2573c9d004b04140e': {id: '642a60e2573c9d004b04140e', createdAt: '2023-04-03T05:15:14.317Z', myApiName: null, abel: null},
  '642a60e2573c9d004b04140f': {id: '642a60e2573c9d004b04140f', createdAt: '2023-04-03T05:15:14.317Z', myApiName: null, abel: null},
  '642a60e2573c9d004b041407': {id: '642a60e2573c9d004b041407', createdAt: '2023-04-03T05:15:14.315Z', myApiName: null, abel: null},
  '642a60e2573c9d004b041408': {id: '642a60e2573c9d004b041408', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null},
  '642a60e2573c9d004b041409': {id: '642a60e2573c9d004b041409', createdAt: '2023-04-03T05:15:14.316Z', myApiName: null, abel: null},
  '642a6123573c9d0024a992f2': {id: '642a6123573c9d0024a992f2', createdAt: '2023-04-03T05:16:19.896Z', myApiName: null, abel: null}
};

预期结果 #

[
  {value: '642a60e2573c9d004b041407', label: 'label1', mapped: true},
  {value: '642a60e2573c9d004b041408', label: 'label2', mapped: true},
  {value: '642a60e2573c9d004b041409', label: 'label3', mapped: true},
  {value: '642a60e2573c9d004b04140a', label: 'label4', mapped: true},
  {value: '642a60e2573c9d004b04140b', label: 'label5 ', mapped: true},
  {value: '642a60e2573c9d004b04140c', label: 'label6', mapped: true},
  {value: '642a6123573c9d0024a992f2', label: 'label7', mapped: true},
  {value: '642a60e2573c9d004b04140d', label: 'label5 ', mapped: true},
  {value: '642a60e2573c9d004b04140e', label: 'label6', mapped: true},
  {value: '642a60e2573c9d004b04140f', label: 'label7', mapped: true}
];

解决方法 #

思路 #

1. 提取options中已有的value存入Set，利用Set快速查找的特性提升效率。
2. 遍历object2的所有对象（通过Object.values()转换为数组）。
3. 对每个对象，判断其id是否不在已有的value集合中。
4. 符合条件的对象按照要求格式构造后，追加到options数组。

代码实现（贴合示例自动生成label） #

// 提取已存在的value到Set
const existingValues = new Set(options.map(item => item.value));

// 获取现有label的最大序号（比如label6对应序号6）
const maxLabelNum = Math.max(...options.map(item => {
  const numMatch = item.label.match(/\d+/);
  return numMatch ? parseInt(numMatch[0]) : 0;
}));

let currentLabelNum = maxLabelNum;
// 遍历object2的所有对象
Object.values(object2).forEach(obj => {
  const { id } = obj;
  if (!existingValues.has(id)) {
    currentLabelNum++;
    // 构造新元素并追加
    options.push({
      value: id,
      label: `label${currentLabelNum}`,
      mapped: true
    });
    // 将新增id加入Set，避免重复处理
    existingValues.add(id);
  }
});

// 输出结果
console.log(options);

代码解释 #

• new Set(options.map(item => item.value))：把options中的value转为Set，判断元素是否存在的时间复杂度为O(1)，比数组includes()更高效。
• Object.values(object2)：将键值对格式的object2转换为对象数组，方便遍历。
• options.push(...)：将符合条件的新对象追加到数组末尾。
• 新增id后加入Set，避免后续重复处理同一id。

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