JavaScript如何更新现有数组并处理标签数据适配API请求

报错原因 #

你当前报错是因为filter回调函数的入参命名为el，但代码里使用了未定义的变量e，直接触发了引用错误。除此之外原有逻辑还存在以下问题：

• filter方法需要返回布尔值用来过滤数组，你没有返回值会导致tag_temp被错误清空
• 循环内重复调用filter查找数据，执行效率低下
• 没有对齐「旧标签比对新选择标签」的业务逻辑

修复后完整实现 #

第一步：修正HTML结构 #

给两个选择器设置不同的ID，避免获取元素冲突：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<label>Previous selected Tag :</label>
<select class="selectpicker" multiple data-live-search="true" id="old_tag">
  <option value="1" selected>Add Product</option>
  <option value="2" selected>New</option>
  <option value="3" selected>Test </option>
  <option value="4">Others</option>
</select>
<br><br><br>
<label>New Selected Tag :</label>
<select class="selectpicker" multiple data-live-search="true" id="new_tag">
  <option value="1" selected>Add Product</option>
  <option value="2">New</option>
  <option value="3">Test</option>
  <option value="4" selected>Others</option>
</select>

第二步：修正JS逻辑 #

按照「新选标签存在旧记录则status为false，新增标签db_id为null、status为true」的规则生成finalized_temp：

// 原有旧标签数据
let tag_temp = [{
    db_id: 5,
    id: 1,
    name: 'Add Product'
  },
  {
    db_id: 6,
    id: 2,
    name: 'New'
  }, {
    db_id: 7,
    id: 3,
    name: 'Test'
  }
];

$(document).ready(function() {
  $('.selectpicker').selectpicker();
  // 绑定更新按钮事件，这里直接调用演示
  updateTag();
});

const updateTag = () => {
  let finalized_temp = [];
  // 1. 把旧标签转成Map映射，提高查找效率
  const oldTagMap = new Map(tag_temp.map(item => [item.id, item]));
  // 2. 获取新选中的所有标签ID，转成数字类型匹配旧数据格式
  const newSelectedIds = $('#new_tag').val().map(Number);

  // 3. 遍历新选中的标签生成目标数组
  newSelectedIds.forEach(tagId => {
    const existOldTag = oldTagMap.get(tagId);
    if (existOldTag) {
      // 原有保留的标签，db_id存在，status为false
      finalized_temp.push({
        db_id: existOldTag.db_id,
        tag_id: tagId,
        status: false
      });
    } else {
      // 新增的标签，没有db_id，status为true
      finalized_temp.push({
        db_id: null,
        tag_id: tagId,
        status: true
      });
    }
  });

  console.log(finalized_temp);
  // 输出结果符合你要求的格式：
  // [
  //   {db_id: 5, tag_id: 1, status: false},
  //   {db_id: null, tag_id: 4, status: true}
  // ]
}

如果你对接的API要求status为字符串类型，直接把代码里的布尔值false改为'false'、true改为'true'即可匹配你的预期输出格式。

适配删除标签逻辑 #

如果你需要同时处理旧标签中被取消选中的条目（需要删除的标签），只需要在上述逻辑后追加以下代码即可：

// 处理旧标签中未被新选中的（需要删除的标签，可根据API要求调整字段）
const oldTagIds = tag_temp.map(item => item.id);
const deletedTagIds = oldTagIds.filter(id => !newSelectedIds.includes(id));
deletedTagIds.forEach(tagId => {
  const existOldTag = oldTagMap.get(tagId);
  finalized_temp.push({
    db_id: existOldTag.db_id,
    tag_id: tagId,
    status: false // 可根据API要求调整为删除对应的状态值
  });
});

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