如何在jQuery中从复选框多值数据中获取唯一值？

我在选择复选框输入字段时，希望仅获取唯一数据。但由于单个复选框会返回data-title和data-value两个值，无法直接使用jQuery.unique()函数。当前实现代码如下：

jQuery('#showselected').on('click', function() { 
  var selected = jQuery("#checkboxes input:checked").map(function(i, el) { 
    return { datatitle: jQuery(this).attr('data-title'), dataid: jQuery(this).attr('data-value') }; 
  }).get(); 
  jQuery('#rez').empty(); 
  jQuery.each(jQuery.unique(selected), function(key, value) { 
    jQuery('#rez').append(valu...
  });
});

请问该如何修改代码以实现获取唯一数据的需求？

嘿，这个问题我之前也踩过坑！jQuery.unique()其实只对DOM元素数组或者字符串、数字这类原始值数组生效，对咱们这种包含datatitle和dataid的对象数组完全起不了作用，所以得换个思路来做对象数组的去重。

解决方案思路 #

首先得明确去重的判断标准：一般来说data-value（也就是代码里的dataid）是每条数据的唯一标识，所以咱们就以它为依据来去重；如果需要data-title和data-value组合起来唯一，也可以调整判断逻辑。

修改后的完整代码 #

jQuery('#showselected').on('click', function() { 
  var selected = jQuery("#checkboxes input:checked").map(function(i, el) { 
    return { 
      datatitle: jQuery(this).attr('data-title'), 
      dataid: jQuery(this).attr('data-value') 
    }; 
  }).get(); 

  // 步骤1：实现对象数组去重
  var uniqueSelected = [];
  var seenIds = {}; // 用对象存已出现过的dataid，查询效率高

  jQuery.each(selected, function(index, item) {
    // 如果当前dataid没被记录过，就加入去重数组
    if (!seenIds[item.dataid]) {
      seenIds[item.dataid] = true;
      uniqueSelected.push(item);
    }
  });

  // 步骤2：渲染去重后的结果
  jQuery('#rez').empty(); 
  jQuery.each(uniqueSelected, function(key, value) { 
    // 这里可以根据你的需求调整渲染格式
    jQuery('#rez').append('<div>' + value.datatitle + ' (ID: ' + value.dataid + ')</div>'); 
  });
});

关键细节说明 #

• seenIds对象用来快速判断某个dataid是否已经出现过，对象的键查询是O(1)，比数组遍历判断效率高很多
• 如果你的去重要求是**datatitle和dataid同时相同才算重复**，只需要把判断逻辑改成下面这样：

  // 用组合键作为判断依据
  var uniqueKey = item.datatitle + '-' + item.dataid;
  if (!seenIds[uniqueKey]) {
    seenIds[uniqueKey] = true;
    uniqueSelected.push(item);
  }
  

内容的提问来源于stack exchange，提问作者Mac Taylor