Jquery 排序、合并和唯一数组，同时保留它们的来源

我有两个数组

我想要一个包含每个数组项的跨度的div

• array1中的内容为红色
• array2中的内容为蓝色
• 两者中的内容都是淡紫色

问题如何按照预期输出快速从唯一到合并？ 我不介意使用diff（例如）对div进行后期处理，只要它是快速的

注意：实际数组的内容不会包含任何类名，因此使用该内容的解决方案不是我想要的。我正在考虑在一个diff之后进行某种比较，或者希望使用filter/map更聪明的东西

var red=[“01红色”、“11红色”、“01两种颜色”、“03红色”、“02两种颜色”]；
var blue=[“10蓝色”、“两种颜色中的01”、“04蓝色”、“两种颜色中的02”、“02蓝色”]；
var均=红色。concat（蓝色）；
var unique=$.unique（两个.slice（0））；//复制，因为唯一会破坏源
unique.sort（）；
$.each（唯一，功能（u，项）{
$（“#res”）.append（$（''）.html（item））.append（'
'）；
});
$.each（红色，功能（_，项目）{
$（“#res1”）.append（$（''）.html（item））.append（'
'）；
});
$.each（蓝色，功能（u，项目）{
$（“#res1”）.append（$（''）.html（item））.append（'
'）；
});

预期产出为

<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>

两种情况下均为01

01红色

02蓝色

两种情况下均为02

03红色

04蓝色

10蓝色

11红色

更新

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

//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>');
});

//创建一个新的对象数组，其中包含为项目指定的类名
var redObject=$.map（红色，函数（v）{return{class:blue.indexOf（v）>=0？'purple'：'red'，值：v}；}）；
var blueObject=$.map（蓝色，函数（v）{return{class:red.indexOf（v）>=0？'purple'：'blue'，值：v}；}）；
var both=redObject.concat（blueObject）；
//按值对数组排序
两个。排序（函数（o1，o2）{
返回o1.value==o2.value？0:（o1.value>o2.value）？1:-1；
});
//删除重复的SD值。
对于（var i=tware.length-1；i>0；i--）{
if（两个[i].value==两个[i-1].value）{
二者。拼接（i，1）；
}
}
//打印值并添加类。
$。每个（两个，函数（\u，项）{
$（“#res”）.append（$（''）.addClass（item.class）.html（item.value））.append（'
'）；
});

---

以下是结果。

Uh-oh-感谢您的尝试，但项目内容不能用作类名。请参阅更新。当然，真正的数组对于颜色编码没有任何用处。我的独特加号排序已经按照您的拼接建议执行。请从我手机上看到的内容再试一次是的，但我们不能在其中一张地图中指定紫色吗？您可以执行以下操作，但我看不到这样做的任何好处。为什么不呢？在最后完全保存循环：-发布它，我将接受。如果您要删除重复项，您仍然必须以某种方式通过

两个

数组进行循环。代码越少并不总是越好，为映射上的每个实例调用indexOf要比在循环并从

和
中删除重复项时分配类慢。
//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>');
});