如何使用TypeScript/JavaScript移除对象数组中重复name属性的项

你当前的代码存在变量声明顺序错误的问题——result在itemList1之前定义，此时itemList1还未初始化，运行时会抛出Cannot read properties of undefined (reading 'filter')的错误。

修正后的基础解法 #

调整变量声明顺序后，你的代码就能正常工作：

var itemList1 = [
  {id:1, name: 'anu'},
  {id:2, name: 'john'},
  {id:3, name: 'john'}
]
var result = itemList1.filter((v,i,a)=>a.findIndex(v2=>(v2.name===v.name))===i)

原理：filter遍历数组时，通过findIndex找到当前元素name第一次出现的索引，只有当该索引等于当前元素的索引i时，才保留这个元素，最终得到每个name仅保留首次出现的结果。

性能优化解法（推荐） #

上面的解法时间复杂度是O(n²)，如果数组数据量大，推荐用Set来记录已出现的name，将时间复杂度降到O(n)：

const itemList1 = [
  {id:1, name: 'anu'},
  {id:2, name: 'john'},
  {id:3, name: 'john'}
]
const seen = new Set();
const result = itemList1.filter(item => {
  if (seen.has(item.name)) {
    return false;
  }
  seen.add(item.name);
  return true;
});

TypeScript 版本 #

如果用TypeScript，只需添加类型定义即可：

interface Item {
  id: number;
  name: string;
}

const itemList1: Item[] = [
  {id:1, name: 'anu'},
  {id:2, name: 'john'},
  {id:3, name: 'john'}
];

const seen = new Set<string>();
const result: Item[] = itemList1.filter(item => {
  if (seen.has(item.name)) {
    return false;
  }
  seen.add(item.name);
  return true;
});

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