修改JS对象键值时如何保留属性的原有排列顺序

问题原因 #

ES6+ 中 JavaScript 普通对象的字符串类型属性会按照插入顺序排列，你原有代码逻辑是先删除旧属性键，再把新属性键追加到对象末尾，自然会导致修改后的属性排到最后。

解决方法 #

不要直接删除旧属性再追加新属性，而是按照原有属性的顺序遍历构建新对象，遇到要修改的旧键时直接替换为新的键值对即可，完全符合 React 不可变更新的要求：

setAttributes((prevState) => {
  const oldKey = Object.keys(attributeToUpdate)[0];
  const newState = {};
  // 按原有顺序遍历所有属性
  for (const key of Object.keys(prevState)) {
    if (key === oldKey) {
      // 匹配到旧键，替换为新的键值对
      newState[attrKey] = attrValue;
    } else {
      // 其余属性直接照搬，保留原有顺序
      newState[key] = prevState[key];
    }
  }
  return newState;
});

补充说明 #

如果你的场景支持新增不存在的属性，可以在遍历结束后加一层判断：如果旧键不在原有属性列表中，就把新的键值对追加到对象末尾即可。

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