使用Map()去重数组后编译出现嵌套结构问题求助

问题场景 #

我在应用中使用Map()实现数组去重，代码如下：

const uniqueTree = [
  ...new Map(
    [newItem, ...oldData]
  ).values(),
]

开发环境下该代码返回正常的扁平数组：

[
  object1,
  object2,
  object3
  // etc
]

但经基于Rollup的工具tsdx编译后，数组变为嵌套结构：

[
  MapIterator: [
    object1,
    object2,
    object3
    // etc
  ]
]

控制台显示结构如下：

我的tsconfig配置如下：

{ 
  "extends": "@tsconfig/create-react-app/tsconfig.json", 
  "include": ["src", "types"] 
 }

解决方案 #

问题核心是Map构造参数的使用错误：Map的构造函数要求传入键值对组成的二维数组，但你直接传入了一维对象数组。开发环境的浏览器对迭代器处理更宽松，而TSDX的编译逻辑严格遵循规范，导致出现嵌套结构。

方法1：规范使用Map实现去重（推荐） #

给每个元素指定唯一键（比如对象的id字段），让Map通过键自动去重：

// 假设每个对象拥有唯一id字段
const uniqueTree = [
  ...new Map(
    [...oldData, newItem].map(item => [item.id, item])
  ).values()
]

这种写法符合Map的标准用法，编译后会保持正常的扁平数组结构，同时兼容性更好。

方法2：调整TSDX的编译配置 #

如果要保留原有写法（不推荐，属于依赖非标准行为），可以修改TSDX配置，调整迭代器的转译逻辑：
在项目根目录创建tsdx.config.js，配置Rollup插件：

module.exports = {
  rollup(config) {
    // 过滤掉导致迭代器被异常包裹的插件
    config.plugins = config.plugins.filter(plugin => 
      plugin.name !== '@rollup/plugin-babel' || /* 按需调整插件规则 */
      (plugin.options && !plugin.options.transformRuntime)
    );
    return config;
  },
};

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