Javascript：使用单个属性删除对象数组中的重复项

Question

我有这样的对象，其中“id”是唯一的。我需要从低于 ES5 的任何版本的 javascript 中的对象数组中删除重复项。我需要根据 id 字段进行比较并删除其重复项。

例子：

Object = [
{id: id_one, value: value_one, label: ABC},
{id: id_one, value: value_one, label: ABC},
{id: id_three, value: value_three, label: ABX},
{id: id_two, value: value_two, label: ABY},
{id: id_four, value: value_four, label: ABD}
];

输出：

result = [
{id: id_one, value: value_one, label: ABC},
{id: id_three, value: value_three, label: ABX},
{id: id_two, value: value_two, label: ABY},
{id: id_four, value: value_four, label: ABD}
];

我试过这样的逻辑，

function getDistValues(object) {
  var distObject = [];
  var tempIndex = [];
  var length = object.length;

  for (var i = 0; i < length; i++) {
    tempIndex.push(object[i].id);

    if (tempIndex.indexOf(object[i].id) === -1 || i === 0) {
      distObject.push(object[i]);
    }
  }

  return distObject;
}

它只给出第一个对象。我尝试映射 ID 并进行比较，但没有成功。

任何帮助都会对我有用。

Answer 1

这是因为你总是将id添加到tempIndex数组中，所以它总是认为当前的id是重复的。试试：

function getDistValues(object) {
  var distObject = [];
  var tempIndex = [];
  var length = object.length;

  for (var i = 0; i < length; i++) {    
    if (tempIndex.indexOf(object[i].id) === -1 || i === 0) {
      tempIndex.push(object[i].id);
      distObject.push(object[i]);
    }
  }

  return distObject;
}

Answer 2

如果id 不在集合中，您可以将Set 用于id 属性并过滤。

var array = [{ id: 'id_one', value: 'value_one', label: 'ABC' }, { id: 'id_one', value: 'value_one', label: 'ABC' }, { id: 'id_three', value: 'value_three', label: 'ABX' }, { id: 'id_two', value: 'value_two', label: 'ABY' }, { id: 'id_four', value: 'value_four', label: 'ABD' }],
    unique = array.filter((ids => ({ id }) => !ids.has(id) && ids.add(id))(new Set));

console.log(unique);

.as-console-wrapper { max-height: 100% !important; top: 0; }

旧 JS 版本的方法

var array = [{ id: 'id_one', value: 'value_one', label: 'ABC' }, { id: 'id_one', value: 'value_one', label: 'ABC' }, { id: 'id_three', value: 'value_three', label: 'ABX' }, { id: 'id_two', value: 'value_two', label: 'ABY' }, { id: 'id_four', value: 'value_four', label: 'ABD' }],
    ids = {},
    unique = [],
    i;

for (i = 0; i < array.length; i++) {
    if (ids[array[i].id]) continue;
    unique.push(array[i]);
    ids[array[i].id] = true;
}

console.log(unique);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

您可以通过将id 存储到object 中并检查id 是否已存在于object 中来实现。如果存在，则表示您之前已经拿过该对象。如果没有，则将对象推送到新数组中。

这种方法需要O(n) 时间，因为我们检查一个具有恒定时间的对象。

var arr = [
    {id: 'id_one', value: 'value_one', label: 'ABC'},
    {id: 'id_one', value: 'value_one', label: 'ABC'},
    {id: 'id_three', value: 'value_three', label: 'ABX'},
    {id: 'id_two', value: 'value_two', label: 'ABY'},
    {id: 'id_four', value: 'value_four', label: 'ABD'}
];


function getDistValues(arr) {
	var hash = {};
    var uniqueArr = [];
    
	for (var i = 0, l = arr.length; i < l; i++) {
    	    if (hash[arr[i].id] === undefined) {
        	hash[arr[i].id] = 1;
                uniqueArr.push(arr[i]);
            }	
        }
    
    return uniqueArr;
}

console.log(getDistValues(arr));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

您可以使用reduce() 方法对数组使用Object.values 过滤重复项

const inputArray = [
    {id: 'id_one', value: 'value_one', label: 'ABC'},
    {id: 'id_one', value: 'value_one', label: 'ABC'},
    {id: 'id_three', value: 'value_three', label: 'ABX'},
    {id: 'id_two', value: 'value_two', label: 'ABY'},
    {id: 'id_four', value: 'value_four', label: 'ABD'}
    ]


      
const filterArray = (arr) => Object.values(arr.reduce(
  (acum, item) => {
    acum[item.id] = item
    return acum
  }, 
  {})
)

console.log(filterArray(inputArray))

Answer 5

您正在将项目添加到tempIndex 数组之前您检查它们是否存在。由于您总是添加每一个，因此当您进行检查时，这意味着该项目已经存在。

你必须反过来 - 检查一个项目是否存在然后将它添加到tempIndex

var data = [
  {id: "id_one", value: "value_one", label: "ABC"},
  {id: "id_one", value: "value_one", label: "ABC"},
  {id: "id_three", value: "value_three", label: "ABX"},
  {id: "id_two", value: "value_two", label: "ABY"},
  {id: "id_four", value: "value_four", label: "ABD"}
];

function getDistValues(object) {
  var distObject = [];
  var tempIndex = [];
  var length = object.length;

  for (var i = 0; i < length; i++) {
    //check first
    var notSeen = tempIndex.indexOf(object[i].id) === -1;
    
    if (notSeen) {
      tempIndex.push(object[i].id);
      //add later
      distObject.push(object[i]);
    }
  }

  return distObject;
}

var result = getDistValues(data);

console.log(result);

为了更高效，您还可以使用一个对象来保留重复的 ID - 这将消除对 tempIndex 每次循环的另一次迭代的需要：

var data = [
  {id: "id_one", value: "value_one", label: "ABC"},
  {id: "id_one", value: "value_one", label: "ABC"},
  {id: "id_three", value: "value_three", label: "ABX"},
  {id: "id_two", value: "value_two", label: "ABY"},
  {id: "id_four", value: "value_four", label: "ABD"}
];

function getDistValues(object) {
  var distObject = [];
  //use object
  var tempIndex = {};
  var length = object.length;

  for (var i = 0; i < length; i++) {
    var notSeen = tempIndex[object[i].id] !== true;
    
    if (notSeen) {
      //mark as visited
      tempIndex[object[i].id] = true;
      distObject.push(object[i]);
    }
  }

  return distObject;
}

var result = getDistValues(data);

console.log(result);