30 de secunde de cod este o colecție strălucitoare de fragmente JavaScript, digerabile în ≤ 30 de secunde. Oricine dorește să stăpânească JavaScript ar trebui să parcurgă întregul lucru.

Totuși, lista nu conținea o funcție pentru redenumirea mai multor chei obiect, așa că am creat un cerere de tragere care din fericire s-a contopit!

Iată intrarea oficială: https://30secondsofcode.org/object#renamekeys

Am scris anterior redenumirea tastelor obiect, dar am schimbat o singură cheie odată.

Atunci Adam Rowe a comentat cu amabilitate, întrebându-ne cum putem redenumi multiplu chei de obiect. Am răspuns cu acest eșantion de cod după câteva gândiri și cercetări.

renameKeys = (keysMap, obj) =>
  Object.keys(obj).reduce(
    (acc, key) => ({
      ...acc,
      ...{ [keysMap[key] || key]: obj[key] }
    }),
    {}
  );

Aceasta a fost inspirată de Ramda Adjunct‘s renameKeys funcţie.

  • keysMap conține perechi cheie / valoare de chei de obiect vechi / noi.
  • obj este obiectul care trebuie schimbat.

S-ar putea să-l folosiți astfel:

keysMap = {
  name: 'firstName',
  job: 'passion'
};

obj = {
  name: 'Bobo',
  job: 'Front-End Master'
};

renameKeys(keysMap, obj);
// { firstName: 'Bobo', passion: 'Front-End Master' }

Să trecem prin el! Putem scrie o extensie, debugger-versiune prietenoasă a acestei funcții:

renameKeys = (keysMap, obj) => {
  debugger;

  return Object.keys(obj).reduce((acc, key) => {
    debugger;

    const renamedObject = {
      [keysMap[key] || key]: obj[key]
    };

    debugger;

    return {
      ...acc,
      ...renamedObject
    };
  }, {});
};

Și îl vom folosi astfel:

renameKeys(
  {
    name: 'firstName',
    job: 'passion'
  },
  {
    name: 'Bobo',
    job: 'Front-End Master'
  }
);

30 de secunde de cod Cum sa redenumiti mai multe

Pauzând pe linia 2, vedem asta keysMap și obj au fost desemnate corespunzător.

Iată de unde începe distracția. Treceți la următorul debugger.

1611453304 980 30 de secunde de cod Cum sa redenumiti mai multe

Inspectați variabilele noastre locale pe linia 7:

  • acc: {} pentru că asta este Array.reduce()valoarea inițială (linia 19).
  • key: “name” pentru că este prima cheie din Object.keys(obj).
  • renamedObject: undefined

De asemenea, observați că putem accesa keysMap și obj din sfera funcției părinte.

Ghici ce renamedObject va fi. Ca în al meu post menționat mai sus, folosim nume de proprietăți calculate a atribui dinamic renamedObjectcheia.

Dacă keysMap[key] există, folosește-l. În caz contrar, utilizați cheia obiect originală. În acest caz, keysMap[key] este “firstName”.

1611453304 829 30 de secunde de cod Cum sa redenumiti mai multe

Asta e renamedObjectcheia, ce zici de valoarea sa corespunzătoare?

1611453304 583 30 de secunde de cod Cum sa redenumiti mai multe

este obj[key]: "Bobo". Apasă pe următorul debugger și verifică-l.

1611453304 611 30 de secunde de cod Cum sa redenumiti mai multe

renamedObject este acum { firstName: “Bobo” }.

1611453304 619 30 de secunde de cod Cum sa redenumiti mai multe

Acum folosind răspândire operator, vom fuziona acc și renamedObject. Sa nu uiti asta acc este în prezent .reducevaloarea inițială: un obiect gol.

Deci fuzionarea acc și renamedObject rezultă doar o clonă de renamedObject.

1611453304 554 30 de secunde de cod Cum sa redenumiti mai multe

Totuși, din moment ce returnăm acest obiect, devine acc în .reduceurmătoarea iterație. Treceți la următorul debugger pentru a vedea asta.

1611453304 141 30 de secunde de cod Cum sa redenumiti mai multe

Suntem înăuntru .reducedin nou, pentru că mai este încă una key a procesa. Vedem asta acc este acum { firstName: "Bobo" }.

Același proces rulează din nou și renamedObject este creat în mod corespunzător.

1611453304 856 30 de secunde de cod Cum sa redenumiti mai multe

De data aceasta, fuzionând acc și renamedObject face de fapt o diferență.

1611453304 544 30 de secunde de cod Cum sa redenumiti mai multe

Fugiți de asta debugger să returnezi acel obiect și ai terminat!

Iată rezultatul final:

1611453305 516 30 de secunde de cod Cum sa redenumiti mai multe

Distrează-te cu redenumirea toate cheile, pana data viitoare!