如何在JavaScript中实现关联数组随另一数组排序变化自动同步？

嘿，这个需求核心是要维护两个数组元素的关联映射关系——直接单独排序其中一个肯定会打乱对应关系，得把它们绑定在一起处理才行。我给你两种实用的实现方案，都是日常开发里常用的：

这个方法的思路是先把两个数组的对应元素打包成对象，排序后再拆分回原数组格式，能清晰保留元素间的关联：

// 初始数组
let array1 = [1, 3, 2];
let array2 = [3, 2, 1];

// 1. 把两个数组的对应元素配对成对象数组
const pairedItems = array1.map((val, index) => ({
  valFromArray1: val,
  valFromArray2: array2[index]
}));

// 2. 按array1的规则排序这里是降序
pairedItems.sort((a, b) => b.valFromArray1 - a.valFromArray1);

// 3. 拆分回两个独立数组
array1 = pairedItems.map(item => item.valFromArray1);
array2 = pairedItems.map(item => item.valFromArray2);

console.log(array1); // 输出: [3, 2, 1]
console.log(array2); // 输出: [2, 1, 3] 完全符合你的需求

如果不想创建中间对象，可以利用索引数组来保留原始关联：先对索引数组按array1的值排序，再用排序后的索引重新生成两个数组：

let array1 = [1, 3, 2];
let array2 = [3, 2, 1];

// 1. 生成原始索引数组
const originalIndices = array1.map((_, index) => index);

// 2. 根据array1的值对索引数组降序排序
originalIndices.sort((a, b) => array1[b] - array1[a]);

// 3. 用排序后的索引重新生成两个数组
array1 = originalIndices.map(i => array1[i]);
array2 = originalIndices.map(i => array2[i]);

console.log(array1); // 输出: [3, 2, 1]
console.log(array2); // 输出: [2, 1, 3]

如果需要实时监听array1的顺序变化比如用户拖拽、动态排序并自动同步array2，可以用JavaScript的Proxy来拦截数组操作：

let array1 = [1, 3, 2];
let array2 = [3, 2, 1];

// 创建能同步关联数组的Proxy
const createLinkedArray = (sourceArr, targetArr) => {
  return new Proxy(sourceArr, {
    apply(target, thisArg, args) {
      const result = Reflect.apply(target, thisArg, args);
      // 拦截sort和reverse这类改变顺序的操作，同步处理目标数组
      if ([Array.prototype.sort, Array.prototype.reverse].includes(target)) {
        const sortedIndices = sourceArr.map((_, i) => i);
        // 这里要匹配sort的排序规则，如果是自定义排序函数需额外处理
        sortedIndices.sort((a, b) => sourceArr[b] - sourceArr[a]);
        targetArr.splice(0, targetArr.length, ...sortedIndices.map(i => targetArr[i]));
      }
      return result;
    }
  });
};

// 生成关联后的array1
const linkedArray1 = createLinkedArray(array1, array2);

// 直接排序关联数组，array2会自动同步
linkedArray1.sort((a, b) => b - a);

console.log(linkedArray1); // 输出: [3, 2, 1]
console.log(array2); // 输出: [2, 1, 3]

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