Immutable.js Map如何将符合条件的元素移至末尾

嘿，我来帮你解决这个问题！你现在的思路方向其实是对的，但可能卡在了Immutable.js Map的顺序特性或者操作细节上，我给你梳理清楚：

首先，先搞清楚核心问题：你遇到的“元素回到原位置”的情况，大概率是因为Immutable.js的旧版本中Map是无序的（v3之前的版本），或者你没有确保操作后的集合保持顺序。从v3开始，Immutable.js的Map默认会保持插入顺序，但如果是更早版本，必须用OrderedMap来实现顺序控制。

正确的解决方案（无需转数组/列表） #

我推荐两种方法，都不用转换为数组或列表，完全基于Immutable的原生操作：

方法一：用partition高效拆分（推荐）

partition方法可以一次性把集合拆分成两个部分，比两次filter更高效（只遍历一次集合），而且会严格保留原顺序：

// 先确保plannedLoads是Immutable的Map/OrderedMap
let plannedLoads = !unplannedMode ? rootLoads.get(PLANNED_LOADS) || Immutable.Map() : Immutable.Map();

// 拆分：第一部分是不需要移动的元素，第二部分是要移到末尾的元素
const [nonSlotLoads, slotLoads] = plannedLoads.partition(
  val => val.get('loads_client_id') !== ClientId.CLIENT_SLOT
);

// 合并：把要移动的元素追加到末尾
plannedLoads = nonSlotLoads.concat(slotLoads);

方法二：两次filter拆分（兼容旧版本）

如果你的项目还在使用Immutable.js v2.x，那必须用OrderedMap来保证顺序，代码调整如下：

// 先转成OrderedMap确保顺序可控
let plannedLoads = !unplannedMode ? rootLoads.get(PLANNED_LOADS) : null;
plannedLoads = Immutable.OrderedMap(plannedLoads || {});

// 拆分出两类元素
const nonSlotLoads = plannedLoads.filter(
  val => val.get('loads_client_id') !== ClientId.CLIENT_SLOT
);
const slotLoads = plannedLoads.filter(
  val => val.get('loads_client_id') === ClientId.CLIENT_SLOT
);

// 合并得到最终顺序
plannedLoads = nonSlotLoads.concat(slotLoads);

为什么你的原代码没生效？ #

可能的原因有这两个：

1. 使用了无序的Map：旧版本Immutable.js的Map是基于哈希表的无序结构，filter和concat无法保证顺序，换成OrderedMap就能解决。
2. 初始集合不是Immutable类型：如果rootLoads.get(PLANNED_LOADS)返回的是普通JS对象，那后续的filter操作不会按Immutable的规则处理，必须先转成Map或OrderedMap。

关键注意点 #

• Immutable.js的所有操作都是不可变的，所以必须把concat返回的新集合重新赋值给变量，就像你原代码里做的那样，这点是对的。
• filter和partition都会保留原集合中元素的相对顺序，所以拆分后的两部分元素顺序和原集合一致，合并后就实现了“把目标元素移到末尾，其他元素顺序不变”的需求。

内容来源于stack exchange