如何交换JavaScript Map中元素的位置？

没问题，这个需求完全可以实现！因为ES6引入的Map是有序键值对集合，会严格按照元素添加的顺序存储，所以我们可以借助数组来操作元素位置，之后重新构建Map就能达到目的。下面给你具体的实现方案：

1. 实现swap交换方法 #

你想要的rows.swap(key1, key2)方法，可以通过扩展Map原型或者自定义继承Map的类来实现。先看最直接的原型扩展方式：

// 给Map添加swap方法，注意：扩展原生原型可能和其他库冲突，大型项目更推荐自定义类
Map.prototype.swap = function(key1, key2) {
  // 将Map的键值对转换成数组
  const entries = Array.from(this.entries());
  // 找到两个键对应的数组索引
  const idx1 = entries.findIndex(([key]) => key === key1);
  const idx2 = entries.findIndex(([key]) => key === key2);
  
  // 如果其中一个键不存在，直接终止操作
  if (idx1 === -1 || idx2 === -1) return;
  
  // 交换数组中两个元素的位置
  [entries[idx1], entries[idx2]] = [entries[idx2], entries[idx1]];
  
  // 清空原Map，重新按新顺序添加所有元素
  this.clear();
  entries.forEach(([key, value]) => this.set(key, value));
};

测试示例 #

// 定义你的JSON对象
const A = { name: "A" };
const B = { name: "B" };
const C = { name: "C" };
const D = { name: "D" };

// 初始化Map
const rows = new Map();
rows.set(1, A);
rows.set(3, B);
rows.set(4, C);
rows.set(7, D);

// 执行交换操作
rows.swap(1, 3);

// 验证结果：遍历Map会输出 B, A, C, D
for (const [_, value] of rows) {
  console.log(value.name);
}

2. 扩展：实现向上/向下移动方法 #

如果还需要单独的向上/向下移动一个位置的功能，可以继续扩展：

// 向上移动指定键的元素
Map.prototype.moveUp = function(key) {
  const entries = Array.from(this.entries());
  const idx = entries.findIndex(([k]) => k === key);
  // 已经是第一个元素，无需移动
  if (idx <= 0) return;
  
  // 和前一个元素交换位置
  [entries[idx], entries[idx - 1]] = [entries[idx - 1], entries[idx]];
  this.clear();
  entries.forEach(([k, v]) => this.set(k, v));
};

// 向下移动指定键的元素
Map.prototype.moveDown = function(key) {
  const entries = Array.from(this.entries());
  const idx = entries.findIndex(([k]) => k === key);
  // 元素不存在或者已经是最后一个，无需移动
  if (idx === -1 || idx === entries.length - 1) return;
  
  // 和后一个元素交换位置
  [entries[idx], entries[idx + 1]] = [entries[idx + 1], entries[idx]];
  this.clear();
  entries.forEach(([k, v]) => this.set(k, v));
};

3. 更安全的方案：自定义OrderedMap类 #

扩展原生Map原型虽然方便，但在大型项目中可能和其他第三方库产生冲突，更稳妥的方式是创建一个继承自Map的自定义类：

class OrderedMap extends Map {
  swap(key1, key2) {
    const entries = Array.from(this.entries());
    const idx1 = entries.findIndex(([key]) => key === key1);
    const idx2 = entries.findIndex(([key]) => key === key2);
    if (idx1 === -1 || idx2 === -1) return;
    [entries[idx1], entries[idx2]] = [entries[idx2], entries[idx1]];
    this.clear();
    entries.forEach(([k, v]) => this.set(k, v));
  }

  moveUp(key) {
    const entries = Array.from(this.entries());
    const idx = entries.findIndex(([k]) => k === key);
    if (idx <= 0) return;
    [entries[idx], entries[idx - 1]] = [entries[idx - 1], entries[idx]];
    this.clear();
    entries.forEach(([k, v]) => this.set(k, v));
  }

  moveDown(key) {
    const entries = Array.from(this.entries());
    const idx = entries.findIndex(([k]) => k === key);
    if (idx === -1 || idx === entries.length - 1) return;
    [entries[idx], entries[idx + 1]] = [entries[idx + 1], entries[idx]];
    this.clear();
    entries.forEach(([k, v]) => this.set(k, v));
  }
}

// 使用方式和原生Map一致
const rows = new OrderedMap();
rows.set(1, A);
rows.set(3, B);
rows.moveUp(3); // 把B移到第一个位置

核心原理就是利用Map的有序特性，将其转换为数组进行位置操作后，再重新构建Map，从而实现元素顺序的调整。

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