Question

我有一个对象数组：

const array = [
  {
    id: "5a2524432b68c725c06ac987",
    customOrder: 1,
    name: "One",
  },
  {
    id: "5a2524432b68sgs25c06ac987",
    customOrder: 2,
    name: "Two",
  },
  {
    id: "5a252wfew32b68c725c06ac987",
    customOrder: 3,
    name: "Three",
  },
  {
    id: "5a25gffe32b68c725c06ac987",
    customOrder: 4,
    name: "Four",
  },
  {
    id: "5a2524432b68c725c06acfee7",
    customOrder: 5,
    name: "Five",
  },
  {
    id: "5a2524432b68c725c06ac556",
    customOrder: 6,
    name: "Six",
  },
]

当我更新其中一个对象的customOrder并基于customOrder更新其他对象时，因此，如果我将索引2更改为自定义顺序4，则需要编辑{{ 1}}其他元素，因此结果将是：

customOrder

我正在考虑使用const array = [ { id: "5a2524432b68c725c06ac987", customOrder: 1, name: "One", }, { id: "5a2524432b68sgs25c06ac987", customOrder: 2, name: "Two", }, { id: "5a25gffe32b68c725c06ac987", customOrder: 3, name: "Four", }, { id: "5a252wfew32b68c725c06ac987", customOrder: 4, name: "Three", } { id: "5a2524432b68c725c06acfee7", customOrder: 5, name: "Five", }, { id: "5a2524432b68c725c06ac556", customOrder: 6, name: "Six", }, ]或什至使用lodash array.slice()，但我正在尝试一种实现最佳结果的简单方法

Answer 1

您可以通过四个步骤进行操作：

使用Array.findIndex()来查找具有与要在给定索引处更新的值相同的值的条目。
然后将此项的值更改为给定索引处的项目的值。
然后使用新值更新给定索引处的项目。
最后，交换项目。如果没有具有新值的项目，请对数组进行排序，以确保将项目放置在正确的位置。

此版本更改了数组：

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

const swap = (arr, x, y) => [arr[x], arr[y]] = [arr[y], arr[x]];

function setOrder(arr, idx, value) {
  const idx2 = arr.findIndex(x => x.customOrder === value);
  if (idx2 >= 0) arr[idx2].customOrder = arr[idx].customOrder;
  arr[idx].customOrder = value;
  
  if (idx2 >= 0) swap(arr, idx, idx2);
  else arr.sort((a, b) => a.customOrder - b.customOrder);
  return arr;
}

setOrder(array, 2, 4);
console.log(array);

setOrder(array, 2, 10);
console.log(array);

此版本不会更改数组：

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

const swap = (arr, x, y) => [arr[x], arr[y]] = [arr[y], arr[x]];

function setOrder(arr, idx, value) {
  const out = [...arr];
  const idx2 = out.findIndex(x => x.customOrder === value);
  if (idx2 >= 0) out[idx2] = { ...out[idx2], customOrder: out[idx].customOrder };
  out[idx] = { ...out[idx], customOrder: value };
  
  if (idx2 >= 0) swap(out, idx, idx2);
  else out.sort((a, b) => a.customOrder - b.customOrder);
  return out;
}

console.log(setOrder(array, 2, 4));
console.log(setOrder(array, 2, 10));

Answer 2

您可以使用 splice 删除索引处的项目并将其移至指定的新索引。然后使用forEach

更新customOrder

（您可以使用扩展语法获取数组的副本，如果不想更改原始数组，可以使用map）

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

function updateOrder(input, index, newIndex) {
  let copy = [...input];
  const removed = copy.splice(index, 1);
  copy.splice(newIndex, 0, removed[0]);
  return copy.map((a, i) => ({ ...a, customOrder: i+1 }))
}

console.log(updateOrder(array, 2, 3))

具有突变：

const array = [{id:"5a2524432b68c725c06ac987",customOrder:1,name:"One",},{id:"5a2524432b68sgs25c06ac987",customOrder:2,name:"Two",},{id:"5a252wfew32b68c725c06ac987",customOrder:3,name:"Three",},{id:"5a25gffe32b68c725c06ac987",customOrder:4,name:"Four",},{id:"5a2524432b68c725c06acfee7",customOrder:5,name:"Five",},{id:"5a2524432b68c725c06ac556",customOrder:6,name:"Six",},]

function updateOrderMutation(input, index, newIndex) {
  const removed = input.splice(index, 1);
  input.splice(newIndex, 0, removed[0]);
  input.forEach((a, i) => a.customOrder = i + 1)
  return input;
}

console.log(updateOrderMutation(array, 2, 3))

重新排列对象数组中的元素

2 个答案: