如何重构这段代码？我有3个标签需要在列表中重新选择

Question

for (var i=0; i<vm.tags.length; i++) {
    if (selectedTags[0]) {
        if (vm.tags[i].term_id === selectedTags[0].term_id) {
            vm.tags[i].border1 = true;
        }
    }

    if (selectedTags[1]) {
        if (vm.tags[i].term_id === selectedTags[1].term_id) {
            vm.tags[i].border2 = true;
        }
    }

    if (selectedTags[2]) {
        if (vm.tags[i].term_id === selectedTags[2].term_id) {
            vm.tags[i].border3 = true;
        }
    }
}

vm.tags是完整的列表，直到20+标记。selectedTags是一个数组，它最多包含3个标签，基本上是3个标签，它们可能包含与vm.tags中的标签相同的ids。

如果vm.tags中的标记与来自selectedTag的标记匹配，则需要更改这些vm.tags的边框值。

有比上面更好的方法来完成这个任务吗？在那里我有重复的代码。

selectedTags数组示例：

[object, object, object]

数组中的对象示例：

{
    selected: true,
    term: "term_name",
    term_id: 2349506
}

Answer 1

检查一下这个：

for (var i=0; i<vm.tags.length; i++) {
  for(var j=0; j<selectedTags.length; j++){
    if(selectedTags[j].term_id === vm.tags[i].term_id ){
      var name = 'border'+ ( j + 1 );  
      vm.tags[i][name] = true;
    }
  }
}

Answer 2

如果您可以将使用border1、border2和border3的方式更改为数组，则可以通过遍历vm.tags来实现这一点，而对于每个vm.tags，则可以在selectedTags上循环并比较If。有匹配时，可以将selectedTags迭代器的值推到borders数组中。这看起来应该是：

for (var i=0; i<vm.tags.length; i++) {
    for(var j=0; j<selectedTags.length; j++) {
            if(selectedTags[j].term_id === vm.tags[i]) {
            // make sure the array exists before pushing to it
            vm.tags[i].borders = vm.tags[i].borders || [];
            vm.tags[i].borders.push(j);
        }
    };
};

当然，这取决于您是否可以将对border1、border2和border3的使用重构为一个可以具有任何[0, 1, 2]组合的数组。

我建议这样做，因为在这样的数据结构中使用编号值会很快变得难以处理。

Answer 3

下面是一个示例，它使用javascript数组映射和筛选函数来完成相同的任务，可能不太容易读，但这是另一种选择：

var addBorders = vm.tags.map(function(obj, k) {
  if (selectedTags.filter(function(o) { return o.term_id === obj.term_id; }).length)
    obj['border' + (k + 1)] = true;

  return obj;
});