JavaScript: Objekt Umbenennen Taste

Question

Gibt es eine clevere (d.h. optimierte) Möglichkeit, einen Schlüssel in einem Javascript-Objekt umzubenennen?

Ein nicht optimierter Weg wäre:

o[ new_key ] = o[ old_key ];
delete o[ old_key ];

Answer 1

Ich würde gerne einfach die ES6(ES2015) Weg!

wir müssen mit der Zeit gehen!

const old_obj = {
    k1: `111`,
    k2: `222`,
    k3: `333`
};
console.log(`old_obj =\n`, old_obj);
// {k1: "111", k2: "222", k3: "333"}

/**
 * @author xgqfrms
 * @description ES6 ...spread & Destructuring Assignment
 */

const {
    k1: kA, 
    k2: kB, 
    k3: kC,
} = {...old_obj}

console.log(`kA = ${kA},`, `kB = ${kB},`, `kC = ${kC}\n`);
// kA = 111, kB = 222, kC = 333

const new_obj = Object.assign(
    {},
    {
        kA,
        kB,
        kC
    }
);

console.log(`new_obj =\n`, new_obj);
// {kA: "111", kB: "222", kC: "333"}

Answer 2

Eine Variante mit Objektdestrukturierung und Spreizungsoperator:

const old_obj = {
    k1: `111`,
    k2: `222`,
    k3: `333`
};    

// destructuring, with renaming. The variable 'rest' will hold those values not assigned to kA, kB, or kC.
const {
    k1: kA, 
    k2: kB, 
    k3: kC,
    ...rest
} = old_obj;

// now create a new object, with the renamed properties kA, kB, kC; 
// spread the remaining original properties in the 'rest' variable
const newObj = {kA, kB, kC, ...rest};

Bei einem Schlüssel kann dies so einfach sein wie:

const { k1: kA, ...rest } = old_obj;
const new_obj = { kA, ...rest }

Vielleicht bevorzugen Sie aber auch einen eher "traditionellen" Stil:

const { k1, ...rest } = old_obj
const new_obj = { kA: k1, ...rest}

Answer 3

Wenn Sie Ihre Daten nicht mutieren wollen, können Sie diese Funktion verwenden...

renameProp = (oldProp, newProp, { [oldProp]: old, ...others }) => ({
  [newProp]: old,
  ...others
})

Eine ausführliche Erklärung von Yazeed Bzadough https://medium.com/front-end-hacking/immutably-rename-object-keys-in-javascript-5f6353c7b6dd

---

Hier ist eine maschinenschriftfreundliche Version:

// These generics are inferred, do not pass them in.
export const renameKey = <
  OldKey extends keyof T,
  NewKey extends string,
  T extends Record<string, unknown>
>(
  oldKey: OldKey,
  newKey: NewKey extends keyof T ? never : NewKey,
  userObject: T
): Record<NewKey, T[OldKey]> & Omit<T, OldKey> => {
  const { [oldKey]: value, ...common } = userObject

  return {
    ...common,
    ...({ [newKey]: value } as Record<NewKey, T[OldKey]>)
  }
}

Dadurch wird verhindert, dass Sie einen vorhandenen Schlüssel verwechseln oder ihn in denselben Namen umbenennen

Answer 4

In den meisten Antworten wird die Reihenfolge der Schlüssel-Wert-Paare von JS Object nicht beibehalten. Wenn Sie z. B. ein Formular mit Objekt-Schlüssel-Wert-Paaren auf dem Bildschirm haben, das Sie ändern möchten, ist es wichtig, die Reihenfolge der Objekteinträge beizubehalten.

Der ES6-Weg der Schleife durch das JS-Objekt und das Ersetzen von Schlüssel-Wert-Paar mit dem neuen Paar mit einem geänderten Schlüsselnamen würde etwas wie sein:

let newWordsObject = {};

Object.keys(oldObject).forEach(key => {
  if (key === oldKey) {
    let newPair = { [newKey]: oldObject[oldKey] };
    newWordsObject = { ...newWordsObject, ...newPair }
  } else {
    newWordsObject = { ...newWordsObject, [key]: oldObject[key] }
  }
});

Bei der Lösung wird die Reihenfolge der Einträge beibehalten, indem der neue Eintrag an der Stelle des alten hinzugefügt wird.

Answer 5

Sie können lodash ausprobieren _.mapKeys .

var user = {
  name: "Andrew",
  id: 25,
  reported: false
};

var renamed = _.mapKeys(user, function(value, key) {
  return key + "_" + user.id;
});

console.log(renamed);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>