如何使用 Vanilla JavaScript 交换数组对象值？

Question

我正在尝试更新类内的私有变量。该变量是一个包含对象的数组。目标是让 array.index 值交换位置以实现拖放功能。然而，当我尝试交换它们时，我总是得到意想不到的结果。

let sortOrder = [{
    index: 0,
    indexOrigin: 0
  },
  {
    index: 1,
    indexOrigin: 1
  },
  {
    index: 2,
    indexOrigin: 2
  },
  {
    index: 3,
    indexOrigin: 3
  }
];

let sort = class {
  #sortOrder;
  constructor() {
    this.#sortOrder = [{
        index: 0,
        indexOrigin: 0
      },
      {
        index: 1,
        indexOrigin: 1
      },
      {
        index: 2,
        indexOrigin: 2
      },
      {
        index: 3,
        indexOrigin: 3
      }
    ];
  }

  updateSortOrder(i1, i2) {
    let sortOrderClone = structuredClone(sortOrder);
    this.#sortOrder[i1].index = sortOrderClone[i2].index;
    this.#sortOrder[i2].index = sortOrderClone[i1].index;
    console.log(this.#sortOrder);
  }

}

let test = new sort();

test.updateSortOrder(2, 3);
test.updateSortOrder(1, 2);
test.updateSortOrder(0, 1);

我期望的是第三个console.log应该显示：

[{
  index: 3,
  indexOrigin: 0
}, {
  index: 0,
  indexOrigin: 1
}, {
  index: 1,
  indexOrigin: 2
}, {
  index: 2,
  indexOrigin: 3
}]

但实际显示的是：

[
  {
    "index": 1,
    "indexOrigin": 0
  },
  {
    "index": 0,
    "indexOrigin": 1
  },
  {
    "index": 1,
    "indexOrigin": 2
  },
  {
    "index": 2,
    "indexOrigin": 3
  }
]

函数第一次运行时始终正确，但第一次运行后，它返回意外结果。如果有任何有关其行为原因的反馈，我们将不胜感激。

Answer 1

排序操作后您需要修改您的 sortOrder 对象。否则您的 sortOrderClone 对象将随着每次更改而过时。

updateSortOrder(i1, i2) {
  let sortOrderClone = structuredClone(sortOrder);
  this.#sortOrder[i1].index = sortOrderClone[i2].index;
  this.#sortOrder[i2].index = sortOrderClone[i1].index;
  sortOrder = this.#sortOrder;
  console.log(this.#sortOrder);
}