ReactJS/JavaScript如何从多维数组中移除重复的对象数组元素？

对象是引用类型，直接用Set或者===判断无法识别属性完全一致但引用地址不同的重复项，去重核心是先确定重复判定规则，再做遍历过滤。

一维对象数组去重（对应你给出的示例场景） #

你给出的示例里重复项的id字段完全一致，优先用业务上的唯一主键作为去重依据，性能最优，时间复杂度只有O(n)。

const array = [
  {id: 1029, name: 'College-Annual-Day.jpg', ext: 'jpg', mime: 'image/jpeg', size: 91153},
  {id: 1029, name: 'College-Annual-Day.jpg', ext: 'jpg', mime: 'image/jpeg', size: 91153}
];

// 以id为唯一键去重，同id项默认保留最后一次出现的版本
const uniqueArray = Array.from(
  new Map(array.map(item => [item.id, item])).values()
);

如果要保留第一次出现的重复项，倒序遍历数组再反转结果即可。

如果业务上没有明确唯一主键，需要所有属性完全一致才算重复，可以用序列化比对的方式实现，注意这个方法无法处理属性值含函数、Symbol、undefined，或者同内容对象属性顺序不一致的场景：

const uniqueArray = array.filter((item, index) => {
  const itemSerial = JSON.stringify(item);
  return index === array.findIndex(target => JSON.stringify(target) === itemSerial);
});

多维数组场景去重 #

如果是多层嵌套的数组结构，先把数组扁平化到目标对象所在的层级，再套用上面的去重逻辑即可。React中处理state数组时逻辑完全一致，注意不要直接修改原数组，返回新数组更新状态即可。

举个嵌套多维数组的例子：

const multiDimArray = [
  {id: 1029, name: 'College-Annual-Day.jpg'},
  [
    {id: 1029, name: 'College-Annual-Day.jpg'},
    {id: 1030, name: 'Sports-Meet.png'}
  ],
  [
    [
      {id: 1031, name: 'Graduation.png'},
      {id: 1030, name: 'Sports-Meet.png'}
    ]
  ]
];

处理代码：

// flat(Infinity)会把数组扁平化到最深层级，如果只需要扁平化2层就传数字2
const flatArray = multiDimArray.flat(Infinity);
// 复用之前的主键去重逻辑
const uniqueResult = Array.from(
  new Map(flatArray.map(item => [item.id, item])).values()
);

提示：如果数组的嵌套结构里包含不需要处理的对象属性，不要直接用Infinity全量打平，只需要遍历到存储目标元素的数组层做去重，避免破坏原有数据结构。

React中使用的简单示例：

import { useState } from 'react';

export default function FileList() {
  const [fileList, setFileList] = useState([]);

  const handleUploadAdd = (newFiles) => {
    setFileList(prev => {
      const merged = [...prev, ...newFiles];
      // 追加新文件后自动按id去重
      return Array.from(new Map(merged.map(file => [file.id, file])).values());
    })
  }

  return <div>{/* 渲染逻辑 */}</div>
}

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