Typescript:如何从数组中删除重复的对象类型脚本

1,700 阅读3分钟

下面的例子接收一个对象或原始类型的数组的输入,从数组中删除重复的项目,返回没有重复的新数组。

如果一个数组包含原始类型,过滤重复项是非常容易的,如果一个数组包含对象,我们需要根据键和值对等验证来过滤重复项。

删除重复的内容是开发人员在应用程序开发中的一项日常任务。

让我们声明一个对象数组,用于删除所有重复的对象。

let courseArray=[
  {"id":1,
  "name":"javascript",
  },
  {"id":2,
  "name":"typescript",
  }
  ,{"id":11,
  "name":"angular",
  },{"id":1,
  "name":"javascript",
  }
]

我们有多种方法可以从一个数组中删除重复的对象。

以下是我们可以删除重复对象的方法。

从一个数组中过滤原始类型

从一个简单的原始值数组(如字符串、数字)中删除重复的内容是非常容易的,这个例子适用于原始类型--字符串、数字和布尔型。

  • 声明了一个有重复值的数字数组
  • 使用过滤器方法遍历数组中的每个元素
  • 过滤器有回调方法,接受元素和indexOf。
  • 使用indexOf 方法检查数组中每个元素的位置
  • 如果indexOf返回有效的索引位置,返回没有重复值的数组
let simpleArray=[1,4,5,1,1,1]
 simpleArray = simpleArray.filter((element, i) => i === simpleArray.indexOf(element))
console.log(simpleArray) //[ 1, 4, 5 ]

ES6的Set与spread运算符

Set是最新的javascript语言ES6中引入的一种新的数据结构。它不接受重复的数据。

下面的例子使用了ES6语言的以下特点

let numberStrings=["one","two","one","two"]
let myset=[...new Set(numberStrings)]
console.log(myset)

下面的例子解释了以下内容

  • 在这些例子中,声明的字符串数组是有重复的。
  • 使用new操作符创建了set对象,构造器接受数组值
  • 使用传播操作符,设置结果值返回一个数组并复制到一个新的数组中。
  • 最后返回没有重复的新数组

使用Lodash Uniq方法

lodashuniquniqBy 方法通过删除重复对象返回数组 courseArray

uniq 方法遍历每个元素,并为每个元素调用回调,提供对象属性逻辑来检查重复对象。

结果数组的顺序与输入的courseArray相同。

var result = _.uniq(courseArray, function(item) {
    return item.id && item.name;
})

使用数组减少方法

数组减少方法是减少数组元素的重要方法之一,在迭代过程中对每个元素都有一个回调。

回调接受acculator和当前值 accumulator是一个临时数组,它将根据每个元素更新其值。对象的平等性用属性值和逻辑检查如下

var filterArray = courseArray.reduce((accumalator, current) => {
    if(!accumalator.some(item => item.id === current.id && item.name === current.name)) {
      accumalator.push(current);
    }
    return accumalator;
},[]);
console.log(filterArray)

而结果是

[
  { id: 1, name: 'javascript' },
  { id: 2, name: 'typescript' },
  { id: 11, name: 'angular' }
]

Underscore uniq方法

如果你的应用程序依赖于underscore库,这种方法可以非常容易地从数组中过滤重复的元素。

uniq 方法接受输入数组和回调,回调接受一个将被检查的对象,这里有独特的逻辑,下面的代码检查每个元素和它的值是否与另一个对象相同。

var resultarray = _.uniq(courseArray  function (element) {
    return element.id && element.name;
});