JS 重命名对象键，同时保留其在对象中的位置

Question

我的 javascript 对象如下所示：

const someObj = {
  arr1: ["str1", "str2"],
  arr2: ["str3", "str4"]
}

在尝试重命名密钥（例如arr1）时，我最终删除了现有密钥并使用原始值编写了一个新密钥。 obj 的顺序发生变化。

someObj = {
  arr2: ["str3", "str4"],
  renamedarr1: ["str1", "str2"]
}

如何在保留密钥顺序的同时重命名密钥？

Answer 1

您可能需要考虑将键数组缩减为一个新对象。 为此，您还需要知道哪个键更改为什么。

1. 减少键数组
2. 使用检查键更改的reducer，并在必要时进行更改。
3. 将键添加到具有值的对象中

之后你有一个与你之前的顺序相同的对象，并且可能一个改变的键仍然在同一个位置

这样的东西可能有效（未经测试）

const changedKeyMap = {"previousKey": "newKey"};
const keys = Object.keys(this.state.obj);
const content = e.target.value;
const result = keys.reduce((acc, val) => {
    // modify key, if necessary
    if (!!changedKeyMap[val]) {
        val = changedKeyMap[val];
    }
    acc[val] = content;
    // or acc[val] = this.state.obj[val] ? 
    return acc;
}, {});

如您所见，您需要跟踪如何更改密钥 (changedKeyMap)。 reduce 函数只是以正确的顺序遍历所有键并将它们添加到新创建的对象中。如果某个键被更改，您可以在 changedKeyMap 中检查并替换它。它仍然会在正确的位置

Answer 2

最终以 js-vanila 方式解决，而不是 react 方式。

如果有人会寻找类似的解决方案，我将发布我最终使用的代码。灵感来自Luke'sidea：

const renameObjKey = ({oldObj, oldKey, newKey}) => {
  const keys = Object.keys(oldObj);
  const newObj = keys.reduce((acc, val)=>{
    if(val === oldKey){
        acc[newKey] = oldObj[oldKey];
    }
    else {
        acc[val] = oldObj[val];
    }
    return acc;
  }, {});

  return newObj;
};