javascript - 使用 Javascript 从 2 个数组中提取值并删除重复的 'titles' ...？

Question

这可能是一个简单的问题，但我似乎无法理解它。

我有两个对应的数组，例如

'0' => "Difficulty"
'1' => "Difficulty"
'2' => "Difficulty"
'3' => "Specialty"
'4' => "Specialty"
'5' => "Specialty"
'6' => "imagecontent"
'7' => "ShowMe"
'8' => "ShowMe"

和:

 '0' => "Easy"
'1' => "Average"
'2' => "Difficult"
'3' => "Specialty name x"
'4' => "Specialty name y"
'5' => "Specialty name z"
'6' => "All"
'7' => "Questions I have never seen"
'8' => "Questions I have answered incorrectly"

数组对应一组问题的过滤设置；第一个数组与“过滤器标题”相关，第二个数组与每个过滤器的选择相关——“过滤器值”。例如，每个过滤器可以有多个选择，这就是过滤器标题“困难”和“专业”存在重复实例的原因。

我想将值输出到页面，以便向用户显示他们应用了哪些过滤器设置。

我从以下几点开始:

for (i = 0; i < filterID.length; i++) {
$( "div.currentFS" ).append("<div class='fs " + [i] + "'>" + filterID[i] + ": " +  filterValue[i] + "</div>");
}

...如果每个过滤器标题只有一个实例，则效果很好。但是，如果过滤器中有多个选择，则过滤器标题的输出次数与过滤器值的输出次数相同。

相反，我想将过滤器值分组在一个过滤器标题下，所以而不是

难度:简单 难度:一般 难度:难

...我会得到:

难度:简单、一般、困难。

我不认为这应该特别复杂，但无法找到最有效的方法。

如有任何帮助，我们将不胜感激。

谢谢，

约翰。

Answer 1

如果必须使用并行数组，那么最简单的可能就是跟踪当前 ID，当它发生变化时，添加一个新标题:

var filterID = [
  "Difficulty",
"Difficulty",
"Difficulty",
"Specialty",
"Specialty",
"Specialty",
"imagecontent",
"ShowMe",
"ShowMe"
];
var filterValue = [
"Easy",
"Average",
"Difficult",
"Specialty name x",
"Specialty name y",
"Specialty name z",
"All",
"Questions I have never seen",
"Questions I have answered incorrectly"
];

var current = ""; // Keep track of the current ID

for (var i = 0; i < filterID.length; i++) {
    if (filterID[i] !== current) { // If the ID in the loop isn't current...
        current = filterID[i];     // store it...
        $(document.body).append("<br><b>"+ current + ": </b>"); // and add it.
    }
    $(document.body).append("<span>" + filterValue[i] + "</span>");
}

span { padding: 8px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>