如何根据div位置对对象数组排序，以id值为参考实现顺序匹配？

1. 选择器大小写不匹配：HTML中列表父容器的id是大写的List，你代码中写的#list是小写，DOM选择区分大小写，导致querySelectorAll无法正确获取到重排后的DOM元素列表，排序结果自然不符合预期。
2. 提取的id为字符串类型，直接作为数组下标取值仅在id和初始数组下标严格一一对应的场景下可用，一旦后续数组项调整导致id和下标不匹配，逻辑就会出错。

// 选择器和HTML id保持一致，首字母大写
const unitsRows = document.querySelectorAll("#List .row");
const newList = [];

for (const row of unitsRows) {
  // 提取id并转为数字类型
  const rowId = Number(row.id.replace('listUnit', ""));
  // 按id匹配对应数组项，兼容性更强
  const targetItem = listArray.find(item => item.id === rowId);
  if (targetItem) newList.push(targetItem);
}

listArray = newList;

运行上述代码后，得到的listArray顺序就会和当前DOM的顺序完全一致。

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