jquery - 对数组进行排序、合并和创建唯一数组，同时保留它们的来源

Question

我有两个数组。

我想要一个带有 span 的 div，其中包含每个数组项的颜色编码

• array1 中的内容为红色，
• array2 中的内容为蓝色
• 两者的内容均为紫红色

问题如何按照预期输出快速从唯一到合并？ 我不介意使用 diff 来对 div 进行后期处理，只要它速度快即可。

注意:真实数组的内容不会包含任何类名，因此使用该内容的解决方案不是我正在寻找的。我正在考虑在差异之后进行某种比较，或者希望使用过滤器/映射更聪明的东西

Progress so far (jsfiddle)

var red = ["01-red", "11-red", "01-in-both", "03-red", "02-in-both"];
var blue = ["10-blue","01-in-both","04-blue","02-in-both","02-blue"];
var both = red.concat(blue);

var unique = $.unique(both.slice(0)); // copy since unique destroys source
unique.sort();

$.each(unique,function(_,item) {
    $("#res").append($('<span>').html(item)).append('<br>');
});

$.each(red,function(_,item) {
    $("#res1").append($('<span class="red">').html(item)).append('<br>');
});

$.each(blue,function(_,item) {
    $("#res1").append($('<span class="blue">').html(item)).append('<br>');
});

预期输出为

<div>
  <span class="purple">01-in-both</span><br>
  <span class="red"   >01-red</span><br>
  <span class="blue"  >02-blue</span><br>
  <span class="purple">02-in-both</span><br>
  <span class="red"   >03-red</span><br>
  <span class="blue"  >04-blue</span><br>
  <span class="blue"  >10-blue</span><br>
  <span class="red "  >11-red</span><br>
</div>

Answer 1

更新

由于您的数组不包含实际的类名称，您可以执行以下操作。

//create a new array of objects which contain the assigned class name for the items
var redObject = $.map(red, function(v) { return { class:blue.indexOf(v)>=0?'purple':'red', value: v };});
var blueObject = $.map(blue, function(v) { return { class:red.indexOf(v)>=0?'purple':'blue', value: v };});
var both = redObject.concat(blueObject);
//sort array on value
both.sort(function(o1,o2) {
    return o1.value == o2.value ? 0 : (o1.value > o2.value) ? 1 : -1;
});

//remove duplicatesd values.
for(var i = both.length-1; i > 0; i--) {
    if(both[i].value == both[i-1].value) {
        both.splice(i,1);
    }
}
//print the value and add the class.
$.each(both,function(_,item) {
   $("#res").append($('<span>').addClass(item.class).html(item.value)).append('<br>');
});

这是结果 JSFiddle .