Как переименовать несколько ключей объектов в JavaScript

1656638891 kak pereimenovat neskolko klyuchej obektov v javascript

30 Seconds of Code – это отличная коллекция фрагментов JavaScript, которую можно усвоить за ≤ 30 секунд. Каждый, кто хочет освоить JavaScript, должен пройти через все.

Однако список не содержал функции переименования нескольких ключей объектов, поэтому я создал запрос на получение, которое, к счастью, было объединено!

Вот официальная запись:

Ранее я писал о переименовании ключей объектов, но мы меняли только один ключ за раз.

Тогда Адам Роу любезно прокомментировал, спрашивая, как мы можем переименовать множественные ключи объектов. Я ответил этим образцом кода после некоторых размышлений и исследований.

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

Это было вдохновенно Ramda Adjunct’s renameKeys функция.

  • keysMap содержит пары ключ/значение ваших старых/новых ключей объекта.
  • obj это объект, который необходимо изменить.

Вы можете использовать это так:

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

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

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

Давайте переступим это! Мы можем написать развернутое, debugger-дружественная версия этой функции:

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

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

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

    debugger;

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

И мы будем использовать его так:

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

1*C9BI6jfACst-UcchX6wyyA

Останавливаясь на строке 2, мы видим это keysMap и obj были должным образом назначены.

Вот где начинается самое интересное. Перейти к следующему debugger.

1*3HKJjlIj8tChHNlre9WV9Q

Проверьте наши локальные переменные в строке 7:

  • acc: {} потому что это Array.reduce()начальное значение (строка 19).
  • key: “name” потому что это первый ключ от Object.keys(obj).
  • renamedObject: undefined

Также заметьте, что мы можем получить доступ keysMap и obj из области видимости родительской функции.

Угадай что renamedObject будет. Как в моей вышеупомянутой публикации, мы используем вычисленные названия свойств динамически назначать renamedObjectключ.

Если keysMap[key] существует, используйте его. В противном случае используйте оригинальный ключ объекта. В этом случае, keysMap[key] есть “firstName”.

1*aYI7ss4IOWIipNsC40r9rg

это так renamedObjectключ, а как насчет его соответствующего значения?

1*GEBIVtNMWIuosMVq4FLMQw

Его obj[key]: "Bobo". Щелкните следующий debugger и проверьте это.

1*XMGM2FxuNscmq_imZf8Nmw

renamedObject сейчас { firstName: “Bobo” }.

1*z8HEVhgr8-e5HFrtAK5lzg

Теперь с помощью распространение оператор, мы объединим acc и renamedObject. Помните, что acc в данное время .reduceНачальное значение: пустой объект.

Да слияние acc и renamedObject просто приводит к клонированию renamedObject.

1*Fw0QyV7VsU2UH-GtD-74WQ

Однако, поскольку мы возвращаем этот объект, он становится acc в .reduceследующая итерация. Перейти к следующему debugger чтобы увидеть это.

1*h0Lxhtw1trErPruUBKamfA

Мы внутри .reduceснова, потому что есть еще один key в процессе. Мы это видим acc сейчас { firstName: "Bobo" }.

Тот же процесс выполняется снова, и renamedObject создано должным образом.

1*OfKamMrGJLBIvY2WgQrlaA

На этот раз слияние acc и renamedObject на самом деле не имеет значения.

1*uMdN7mSsIhgvzJCceftUOw

Пробег мимо этого debugger чтобы вернуть этот объект, и готово!

Вот конечный результат:

1*TpcJHEG6MUxazCkNnCg6AQ

Приятного переименования все ключидо следующего раза!

Добавить комментарий

Ваш адрес email не будет опубликован.