如何使用扩展运算符从对象数组中删除重复项答案

【问题标题】：How to remove duplicates from an object array using spread operator如何使用扩展运算符从对象数组中删除重复项
【发布时间】：2019-01-15 10:29:09
【问题描述】：

我有以下以 id 作为唯一键的对象数组：

var test = [
  {id: 1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},
  {id: 2, PlaceRef: "*00022", Component: "BAXI10R", SubLocCode: "KIT", BarCode:""},
  {id: 1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},
  {id: 3, PlaceRef: "*00011", Component: "ANR190", SubLocCode: "B1", BarCode: ""}
]

从此我想使用扩展运算符检索唯一对象，我尝试使用以下代码：

const uniKeys = [...(new Set(test.map(({ id }) => id)))];

我只能检索 id，如何使用扩展运算符检索唯一对象。此外，任何新的 ES6 功能实现都会有所帮助。

【问题讨论】：

这个线程：gist.github.com/telekosmos/3b62a31a5c43f40849bb 有很多方法可以从数组中获取唯一值，包括对象数组（即根据某个键的唯一值过滤对象数组）。跨度>
也许有帮助 - stackoverflow.com/a/69815213/11302100

标签： javascript angular ecmascript-6 typescript2.0

【解决方案1】：

您可以使用find 方法将map 返回到对象数组，这将返回具有该ID 的第一个对象。

var test = [{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},{id:2, PlaceRef: "*00022", Component: "BAXI10R", SubLocCode: "KIT", BarCode:""},{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},{id:3, PlaceRef: "*00011", Component: "ANR190", SubLocCode: "B1", BarCode: ""}]
var uniq = [...new Set(test.map(({id}) => id))].map(e => test.find(({id}) => id == e));	
console.log(uniq)

您也可以改用filter 方法。

var test = [{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},{id:2, PlaceRef: "*00022", Component: "BAXI10R", SubLocCode: "KIT", BarCode:""},{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},{id:3, PlaceRef: "*00011", Component: "ANR190", SubLocCode: "B1", BarCode: ""}]

var uniq = test.filter(function({id}) {
  return !this[id] && (this[id] = id)
}, {})
	
console.log(uniq)

【讨论】：

当我尝试第一个解决方案时，它说“类型'Set'不是数组类型。使用编译器选项'--downlevelIteration'来允许迭代器的迭代。”
@tracer 尝试使用Array.from 而不是[...]

【解决方案2】：

您可以通过 id 创建一个 Map，然后提取值。 [...new Map(test.map(item => [item.id, item])).values()]

var test = [{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},
{id:2, PlaceRef: "*00022", Component: "BAXI10R", SubLocCode: "KIT", BarCode:""},
{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},
{id:3, PlaceRef: "*00011", Component: "ANR190", SubLocCode: "B1", BarCode: ""}]

console.log([
  ...new Map(test.map(item => [item.id, item])).values()
])

【讨论】：

当我尝试这个时，它抛出“'any[][]' 类型的参数不可分配给'Iterable' 类型的参数”错误

【解决方案3】：

您可以使用Set 并通过未知的id 过滤。

var test = [{ id: 1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: "" }, { id: 2, PlaceRef: "*00022", Component: "BAXI10R", SubLocCode: "KIT", BarCode: "" }, { id: 1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: "" }, { id: 3, PlaceRef: "*00011", Component: "ANR190", SubLocCode: "B1", BarCode: "" }],
    unique = test.filter((s => ({ id }) => !s.has(id) && s.add(id))(new Set));
    
console.log(unique);

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

【讨论】：

【解决方案4】：

var test = [{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},
{id:2, PlaceRef: "*00022", Component: "BAXI10R", SubLocCode: "KIT", BarCode:""},
{id:1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""},
{id:3, PlaceRef: "*00011", Component: "ANR190", SubLocCode: "B1", BarCode: ""}];


var uniqArray = Array.from(new Map(test.map(e=>[e.id, e])).values());
console.log(uniqArray)

【讨论】：

【解决方案5】：

使用 lodash 实用程序库。你可以做到这一点。让结果 = _.uniqBy(test, 'id');

【讨论】：