Javascript 按属性从数组中删除重复对象_Javascript_Arrays_Angular_Typescript

Javascript 按属性从数组中删除重复对象

javascript arrays angular typescript

Javascript 按属性从数组中删除重复对象,javascript,arrays,angular,typescript,Javascript,Arrays,Angular,Typescript,所以我有一个对象数组，有重复的对象包含相同的id，我希望每次接收第一个具有唯一id的对象，然后将其存储在单独的数组中。我原以为一张地图可以做到这一点，但它似乎不起作用。我正在使用打字脚本我的对象数组： var infos= [ {InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="backgrou

所以我有一个对象数组，有重复的对象包含相同的id，我希望每次接收第一个具有唯一id的对象，然后将其存储在单独的数组中。我原以为一张地图可以做到这一点，但它似乎不起作用。我正在使用打字脚本

我的对象数组：

var infos= [

{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵", …}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵", …}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 10, DepartmentId: 1, Name: "What are Heritage Conservation Roof Windows?", Url: "new-in-heritage-conservation-roof-windows", Html: "<div class="container py-4" data-jsplus-bootstrap-…e more than happy to help you.</span></p></div>
↵"}
{InfoPageId: 10, DepartmentId: 1, Name: "What are Heritage Conservation Roof Windows?", Url: "new-in-heritage-conservation-roof-windows", Html: "<div class="container py-4" data-jsplus-bootstrap-…e more than happy to help you.</span></p></div>
↵"}
{InfoPageId: 10, DepartmentId: 1, Name: "What are Heritage Conservation Roof Windows?", Url: "new-in-heritage-conservation-roof-windows", Html: "<div class="container py-4" data-jsplus-bootstrap-…e more than happy to help you.</span></p></div>
↵"}
]

var infos=[
{InfoPageId:8，DepartmentId:1，名称：“倾斜屋顶窗购买指南”，Url:“倾斜屋顶窗购买指南”，Html:“今天！
↵"}
{InfoPageId:9，DepartmentId:1，名称：“介绍Korliche玻璃灯笼”，Url:“Korliche玻璃灯笼中的新产品”，Html:“今天！
↵", …}
{InfoPageId:9，DepartmentId:1，名称：“介绍Korliche玻璃灯笼”，Url:“Korliche玻璃灯笼中的新产品”，Html:“e[comp]）
//存储唯一对象的索引
.map（（e，i，final）=>final.indexOf（e）==i&&i）
//消除假索引并返回唯一对象
.filter（（e）=>infos[e]）.map（e=>infos[e]）；
console.log（唯一）
}

实现这一点的方法有很多。您需要做的是选择元素并检查所选数组中是否有任何元素具有相同的

InfoPageId

var infos=[
{InfoPageId:7，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:2}，
{InfoPageId:9，部门ID:1}，
]
const out=infos.reduce(
（acc，cur）=>acc.some(
x=>x.InfoPageId===cur.InfoPageId
) ? 
行政协调会：
acc.concat（当前），
[]
)
console.log（out）

实现这一点的方法有很多。您需要做的是选择元素并检查所选数组中是否有任何元素具有相同的

InfoPageId

var infos=[
{InfoPageId:7，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:2}，
{InfoPageId:9，部门ID:1}，
]
const out=infos.reduce(
（acc，cur）=>acc.some(
x=>x.InfoPageId===cur.InfoPageId
) ? 
行政协调会：
acc.concat（当前），
[]
)
console.log（out）

希望这有帮助

var infos=[
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:9，部门ID:1}，
{InfoPageId:9，部门ID:1}
]
const uniqueInfos=[]
const InfosMap={}
infos.map（（info）=>{
如果（！InfosMap[info.InfoPageId]）{
InfosMap[info.InfoPageId]=真
uniqueInfos.push（信息）
}
})
console.log（uniqueInfos）

希望这有帮助

var infos=[
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:9，部门ID:1}，
{InfoPageId:9，部门ID:1}
]
const uniqueInfos=[]
const InfosMap={}
infos.map（（info）=>{
如果（！InfosMap[info.InfoPageId]）{
InfosMap[info.InfoPageId]=真
uniqueInfos.push（信息）
}
})
console.log（uniqueInfos）

如何使用

映射使其唯一化

：

var infos=[{InfoPageId:7，DepartmentId:1}，{InfoPageId:8，DepartmentId:1}，{InfoPageId:8，DepartmentId:1}，{InfoPageId:9，DepartmentId:1}，]
var unique=[…新映射（infos.Map（val=>[val.InfoPageId，val]））.values（）；
console.log（unique）

使用

Map

使其唯一如何：

var infos=[{InfoPageId:7，DepartmentId:1}，{InfoPageId:8，DepartmentId:1}，{InfoPageId:8，DepartmentId:1}，{InfoPageId:9，DepartmentId:1}，]
var unique=[…新映射（infos.Map（val=>[val.InfoPageId，val]））.values（）；
console.log（唯一）

您可以将

reduce

与

对象结合使用。值

：

const uniqBy = (infos: InfoPage[], key: keyof InfoPage): InfoPage[] => {
  return Object.values(
    infos.reduce((unique, info) => ({
      ...unique,
      [info[key]]: unique[info[key]] || info,
    }), {} as any) // You could also improve the types of the function to get rid of the "any" but the amount of code might not be worth it
  );
};

您可以将

reduce

与

对象结合使用。值

：

const uniqBy = (infos: InfoPage[], key: keyof InfoPage): InfoPage[] => {
  return Object.values(
    infos.reduce((unique, info) => ({
      ...unique,
      [info[key]]: unique[info[key]] || info,
    }), {} as any) // You could also improve the types of the function to get rid of the "any" but the amount of code might not be worth it
  );
};

您也可以使用

filter

来实现这一点

let infos=[
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:9，部门ID:1}，
{InfoPageId:9，部门ID:1}
];
const uniqueInfos=infos.filter（（infos，index，self）=>self.findIndex（i=>i.InfoPageId==infos.InfoPageId&&i.DepartmentId==infos.DepartmentId==index）；
log（uniqueInfos）

您也可以使用

过滤器来实现这一点

let infos=[
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:8，部门ID:1}，
{InfoPageId:9，部门ID:1}，
{InfoPageId:9，部门ID:1}
];
const uniqueInfos=infos.filter（（infos，index，self）=>self.findIndex（i=>i.InfoPageId==infos.InfoPageId&&i.DepartmentId==infos.DepartmentId==index）；
console.log（uniqueInfos）
最简单的解决方案是遍历所有项并保留一个已处理项的对象。并且不要将已处理项添加到新数组中
public findUnique(data: any[], key: string): any[] {
  var result = [];
  var processedData = {};
  any.forEach((item) => {
     if(!processedData[item["key"]]) {
          result.push(item);
          processedData[item[key]] = true;
     }
  }
  return result;
}

最简单的解决方案是遍历所有项，并保留一个已处理项的对象。不要将已处理项添加到新数组中
public findUnique(data: any[], key: string): any[] {
  var result = [];
  var processedData = {};
  any.forEach((item) => {
     if(!processedData[item["key"]]) {
          result.push(item);
          processedData[item[key]] = true;
     }
  }
  return result;
}

这回答了你的问题吗？这回答了你的问题吗？当im控制台记录数组时，它是空的，我有一种感觉，这可能是因为数组中有太多数据，我是否必须异步加载它..是的。如果从后端提取数组，你会希望在执行任何函数之前等待它完全加载n it.我不使用angular，但我假设它有一个存储可以容纳这个数组，然后你可以根据需要使用这个存储的数组。嗯，这似乎不是问题所在，我将异步调用包装在一个承诺中，以确保在执行任何操作之前加载数组。但我仍然存在问题这可能是你的infos
数据是结构化的。html=“当im控制台记录数组时，它是空的，我有一种感觉，这可能是因为数组中有这么多数据，我会