Javascript 如何防止空字符串成为长度的一部分

问题：当插入正确的

音节时，我的输入字段应该变成绿色按钮。然而问题是：它是根据JSON的长度和用户插入的内容来确定的，但是当我的数组只包含2个字而不是4个字时，它仍然需要总共4个字。例如：我的数组中有2个单词，数组中有2个空字符串，我被迫按enter键两次以达到所需数组的长度。如何使它只根据数组中的单词而不是空字符串检查长度

这是我的一个JSON文件的样子：

{
 "main_object": {
"id": "5",
"getExerciseTitle": "TestFor",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "TestFor",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "test",
      "syllables": [
        "test01",
        "test02",
        "test03",
        ""
      ]
    },
    {
      "word": "tesst",
      "syllables": [
        "test11",
        "test12",
        "",
        ""
      ]
    }
  ]
},
"dataType": "json"
 }
}

函数是如何创建的，不要介意增量计数器等。它们已经声明了

function createExercise(json) {
const exercises = json.main_object.main_object.exercises;

var exerciseArea = $('<div/>', {
    id: 'exerciseField',
    'class': 'col-md-12'
});

$.map(exercises, function (exercise, i) {

    var exer = $('<div/>', {
        'class': 'row form-group',
        'id': +idRow++
    })

    var colLeft = $('<div/>', {
        'class': 'col-md-3'
    });

    var row = $('<div/>', {
        'class': 'row'
    });

    var audCol = $('<div>', {
        class: 'col-md-3 audioButton'
    }).append(getAudioForWords());

    var wordCol = $('<div>', {
        class: 'col-md-9 ExerciseWordFontSize exerciseWord',
        'id': 'wordInput[' + ID123 + ']', // note to self: the brackets will need to be escaped in later DOM queries
        text: exercise.word
    });
    row.append(audCol, wordCol);
    colLeft.append(row);

    var sylCol = $('<div>', {
        class: 'col-md-9'
    });

    var sylRow = $('<div/>', {
        class: 'row syll-row'
    });

    var correctSylls = [];

    $.map(exercise.syllables, function (syllable, j) {
        // Code to check if the syllable exists and is not an empty string
        if(!syllable){
            // If it doesn't exist or is an empty string, return early without creating/appending elements
            return;
        }
        var innerSylCol = $('<div/>', {
            class: 'col-md-3 inputSyllables'
        });

        var sylInput = $('<input/>', {
            'type': 'text',
            'class': 'form-control syl-input',
            'name':  +c++,
            'id': +idsyll++
        }).on('keyup', function() {
            var cValue = $(this).val();
            if (cValue === syllable) {
              correctSylls.push(cValue);
              console.log(correctSylls);
            }
            if (exercise.syllables.length === correctSylls.length) {
              $(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
            }

        });

        innerSylCol.append(sylInput);
        sylRow.append(innerSylCol);
    });
    idsyll = 0;

    sylCol.append(sylRow);

    exer.append(colLeft, sylCol);

    exerciseArea.append(exer);
});
return exerciseArea;
}

函数createExercise（json）{
const exercises=json.main_object.main_object.exercises；
var exerciseArea=$（''{
id:“exerciseField”，
“类别”：“col-md-12”
});
$.map（练习，功能）（练习，i）{
var exer=$（''）{
“类”：“行形式组”，
“id”：+idRow++
})
var colLeft=$（''{
“类”：“col-md-3”
});
变量行=$（''{
“类”：“行”
});
var audCol=$（''）{
类别：“col-md-3音频按钮”
}).append（getAudioForWords（））；
变量wordCol=$（''）{
类别：“col-md-9 ExerciseWordFontSize exerciseWord”，
'id'：'wordInput['+ID123+']'，//请注意：在以后的DOM查询中需要对括号进行转义
课文：exercise.word
});
行。追加（audCol、wordCol）；
集合追加（行）；
变量sylCol=$（''{
类别：“col-md-9”
});
变量sylRow=$（''）{
类：“行syll行”
});
var correctSylls=[]；
$.map（练习.音节，函数（音节，j）{
//用于检查音节是否存在且不是空字符串的代码
如果（！音节）{
//如果它不存在或为空字符串，请提前返回，而不创建/追加元素
返回；
}
变量innerSylCol=$（''{
课程：“col-md-3输入音节”
});
变量sylInput=$（''{
“类型”：“文本”，
“类”：“窗体控件syl输入”，
“名称”：+c++，
“id”：+idsyll++
}).on（'keyup'，function（）{
var cValue=$（this.val（）；
如果（cValue==音节）{
校正推力（cValue）；
控制台日志（correctSylls）；
}
if（exercise.syllels.length==correctsyls.length）{
$（this）.closest（'.syll行'）.find（'input.syl input'）.addClass（'btn btn success'）.removeClass（'form-control'）；
}
});
innerSylCol.append（sylInput）；
追加（innerSylCol）；
});
idsyll=0；
sylCol.append（sylRow）；
执行附加（学院、学院）；
exerciseArea.append（exer）；
});
返回练习区；
}

导致问题的部件：

var correctSylls = [];

        var sylInput = $('<input/>', {
            'type': 'text',
            'class': 'form-control syl-input',
            'name':  +c++,
            'id': +idsyll++
        }).on('keyup', function() {
            var cValue = $(this).val();
            if (cValue === syllable) {
              correctSylls.push(cValue);
              console.log(correctSylls);
            }
            if (exercise.syllables.length === correctSylls.length) {
              $(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
            }

        });

var correctSylls=[]；
变量sylInput=$（''{
“类型”：“文本”，
“类”：“窗体控件syl输入”，
“名称”：+c++，
“id”：+idsyll++
}).on（'keyup'，function（）{
var cValue=$（this.val（）；
如果（cValue==音节）{
校正推力（cValue）；
控制台日志（correctSylls）；
}
if（exercise.syllels.length==correctsyls.length）{
$（this）.closest（'.syll行'）.find（'input.syl input'）.addClass（'btn btn success'）.removeClass（'form-control'）；
}
});

所以我这里基本上有两个问题：1）它不知何故复制数组中的单词，没有明显的原因？2）我的数组中仍然需要4个字（空字符串也被视为长度）。但我不会将空字符串视为长度，因为它们不包含单词。另一个问题是：为什么它会复制数组中的单词？
可以筛选数组以仅返回非空项。然后在map（）中的过滤数组上循环


var音节=[
“测试11”，
“测试12”，
"",
""
];
var filtered=音节。filter（函数（str）{
返回str.trim（）
});
console.log（已过滤）
尝试执行您的代码，但它抛出错误“str.trim不是函数”。即使我把它放在一个函数中，但用错了。很抱歉，当你点击“运行代码片段”时，你可以清楚地看到它的工作原理。我确实再次尝试使用一个函数，我写的函数是错误的，但您能否解释一下为什么我的字符串返回数组中的单词的副本？或者这是根据我的代码无法检测到的东西？不确定你的确切意思如果你看我帖子中的图片，你会发现里面有重复的单词。确切地说，在同一个数组中，但是如果你看一下我的JSON文件，你会发现在某个数组中没有重复的单词。这是什么原因造成的？或者这是因为我会按enter键，所以它会复制那个单词？