¿Cómo reemplazar los nombres de múltiples claves de objeto con los valores proporcionados usando JavaScript?

El siguiente enfoque cubre cómo reemplazar los nombres de varias claves de objeto con los valores proporcionados por el usuario mediante JavaScript.

Declaración del problema: recibe un objeto que contiene diferentes pares clave-valor en los que la clave simboliza la propiedad y el valor en sí se conoce como el valor de la propiedad, y necesita cambiar el nombre original de una o más claves con el nombre proporcionado por el usuario usando JavaScript.

Como ejemplo, tome inicialmente el objeto ilustrado anteriormente. Este objeto contiene pares clave-valor como Nombre: «Hola», etc. Entonces, supongamos que estamos apuntando a la clave Nombre y, además, vamos a cambiar esta clave Nombre como nombre de la clave Nombre con el siguiente enfoque.

Antes de saltar directamente a los enfoques para resolver el problema ilustrado anteriormente, primero declaremos el objeto que vamos a utilizar para resolver la consulta.

Ejemplo: Al usar la siguiente sintaxis, primero creemos un objeto:

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };
  
  console.log(object);
</script>

Producción:

{ name: 'Hello', age: 20, gender: 'Male' }

Ahora veamos los enfoques para resolver el problema ilustrado anteriormente.

Enfoque 1: 

  • Este es el enfoque nativo y bastante simple también.
  • En este enfoque, seleccionaremos directamente la clave del objeto y cambiaremos el nombre de esa clave seleccionada con el nombre proporcionado por el usuario.
  • Después de proporcionar el nombre de la clave, eliminaremos la declarada anteriormente y la reemplazaremos por una nueva.
  • Escribiremos la parte lógica en un método (o función) y luego llamaremos a ese método que ejecutará nuestro resultado.

Ejemplo 1: 

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };
  
  let renmeObjectKey = (object) => {
    object.FirstName = object.name;
    delete object.name;
  };
  renmeObjectKey(object);
  console.log(object);
</script>

Producción:

{ age: 20, gender: 'Male', FirstName: 'Hello' }

Ahora suponga que desea apuntar a la clave de edad en el objeto con el nombre proporcionado por usted mismo.

Ejemplo 2: 

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };
  
  let renmeObjectKey = (object) => {
    object.FirstName = object.name;
    object.currentAge = object.age;
    delete object.name;
    delete object.age;
  };
  renmeObjectKey(object);
  console.log(object);
</script>

Ahora, junto con la clave de nombre, la clave de edad también se reemplaza con el nuevo nombre proporcionado por el usuario.

Producción:

{ gender: 'Male', FirstName: 'Hello', currentAge: 20 }

Nota: Lo único que podría notar aquí es que la posición del objeto cambia, pero su valor se mantiene igual.

Enfoque 2: 

  • En este enfoque, declararemos un método que es completamente responsable de ejecutar nuestro resultado.
  • Dentro de los parámetros de este método, pasaremos dos argumentos, el primero es el objeto keysMap que lo aceptaremos del usuario que en realidad contiene el nuevo nombre de clave que reemplazará al nombre de clave anterior y el segundo es el objeto al que nos estamos refiriendo.
  • Ahora dentro de ese método usaremos Object.keys() que aceptará nuestro objeto inicialmente y apuntará a todas nuestras claves de objeto, y luego ejecutaremos reduce() sobre él que aceptará dos cosas: primero es el valor acumulador que actuará como nuestra variable de resultado y la segunda es la clave a la que apuntamos actualmente.
  • Luego, escribiremos nuestra parte lógica y, para eso, primero tomaremos en cuenta nuestra cuenta del operador de propagación que distribuirá nuestro objeto en una array, y luego representaremos las claves del objeto y las reemplazaremos con nuestro propio nombre de clave pasado.
  • Luego, más tarde, pasaremos nuestro método dentro de una nueva variable que declararemos como nuestra variable de resultado y luego consolaremos.log() nuestro resultado.

Ejemplo: 

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };
  
  let renameKeys = (keysMap, object) =>
    Object.keys(object).reduce(
      (acc, key) => ({
        ...acc,
        ...{ [keysMap[key] || key]: object[key] },
      }),
      {}
    );
  
  let result = renameKeys({ name: "FirstName" }, object);
  console.log(result);
</script>

Producción:

{ FirstName: 'Hello', age: 20, gender: 'Male' }

Nota: Este enfoque preservará la posición de la clave y también el valor.

Publicación traducida automáticamente

Artículo escrito por amansingla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *