如何重构这个for循环？检查标签 id 是否与数组中的标签匹配，然后更新其边框

Question

function deselectColoredTag(tag) {
    // Check for selected Tag:
    for (var i=0; i<vm.tags.length; i++) {
        if (vm.tags[i].term_id === tag.term_id) {
            if (vm.tags[i].border1) {
                vm.tags[i].border1 = false;
                break;
            }
            if (vm.tags[i].border2) {
                vm.tags[i].border2 = false;
                break;
            }
            if (vm.tags[i].border3) {
                vm.tags[i].border3 = false;
                break;
            }
        }
    }
}

上面的代码会循环检查该标签是否存在于vm.tags中，如果存在，则检查它是否有border1、border2或border3并将其设置为false。

我想避免这样做：

border1 = false;
border2 = false;
border3 = false;

让它更聪明一点，我也尝试了以下但它没有用：

for (var i=0; i<vm.tags.length; i++) {
    for(var j=0; j<3; j++){
        if (vm.tags[i].term_id === tag.term_id) {
            if (vm.tags[i].border[j]) {
                vm.tags[i].border[j] = false;
            }
        }
    }
}

由于某种原因出现此错误：

if (vm.tags[i].border[j])

TypeError: Cannot read 属性 '0' of undefined 然而这只是一个基本的真实文本，对吗？例如 vm.tags[1].border[0] 是否存在...

Answer 1

你的方法应该是这样的：

for (var i=0; i<vm.tags.length; i++) {
    for(var j=0; j<3; j++){
        if (vm.tags[i].term_id === tag.term_id) {
            if (vm.tags[i]['border' + j]) {
                vm.tags[i]['border' + j] = false;
            }
        }
    }
}

Answer 2

枚举属性，绝不是好兆头。
为什么不使用数组作为边框？

mainLoop: for(var i=0, l<vm.tags.length; i<l; ++i){
    var currentTag = vm.tags[i];
    if(currentTag.term_id !== tag.term_id) continue;
    for(var i=0; i<3; ++i){
        if(currentTag['border'+i]){
            currentTag['border'+i] = false;
            break mainLoop;
        }
    }
}

如何重构这个for循环？检查标签 id 是否与数组中的标签匹配，然后更新其边框

How to refactor this for loop? Check if tag id matches tag in Array, then update its border

javascript

refactoring

loops

for-loop