30 секунд кода: как переименовать несколько клавиш объектов в JavaScript

Автор оригинала: Yazeed Bzadough.

30 секунд кода является блестящей коллекцией фрагментов JavaScript, усваиваемые в ≤ 30 секунд. Любой, кто ищет мастер JavaScript, должен пройти все это.

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

Вот официальный вход: https://30secondsofcode.org/object# Ramekeys.

Я ранее написал на Переименование объектных клавиш , но мы только изменили один ключ одновременно.

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

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

Это было вдохновлено Рамда вспоминание ‘s Renamekeys функция.

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

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

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

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

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

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

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'
  }
);

Приостановка на линии 2, мы видим, что Клавиатура и obj были должным образом назначены.

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

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

• ACC: {} потому что это Array.reduce () начальное значение (линия 19).
• Ключ: «Имя» потому что это первый ключ от Object.Keys (OBJ) Отказ
• RenamedObject: undefined

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

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

Если Клавиатура [КЛЮЧ] существует, используйте его. В противном случае используйте оригинальную клавишу объекта. В этом случае Клавиатура [КЛЮЧ] это «Имя» Отказ

Это RenamedObject ключ, как насчет его соответствующей стоимости?

Это obj [ключ] : "Бобо" Отказ Ударил следующий Отладчик и проверить это.

RenamedObject сейчас {Именное имя: "Бобо"} Отказ

Теперь используя Распространение Оператор, мы будем сливаться ACC и RenamedObject Отказ Помните, что ACC в настоящее время .Расмейте Начальное значение: пустой объект.

Так слияние ACC и RenamedObject Просто приводит к клону RenamedObject Отказ

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

Мы внутри .Расмейте снова, потому что есть еще один ключ обрабатывать. Мы видим, что ACC сейчас {Именное имя: "Бобо"} Отказ

Тот же процесс снова работает, а RenamedObject правильно создан.

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

Пройти мимо этого Отладчик Чтобы вернуть этот объект, и вы закончите!

Вот окончательный выход:

Весело переименовать Все ключи , до скорого!