Crear una función de map para objetos en JavaScript

1. Utilice el método general map() para crear una función de map para objetos en JavaScript
2. Use un bucle for in para crear una función de map para objetos en JavaScript
3. Cree un nuevo objeto usando una función de map personalizada para objetos en JavaScript
4. Use Object.entries() y Object.fromEntries() para crear una función de map para objetos en JavaScript
5. Escriba una función usando Object.entries() y Object.fromEntries() para mapear sus objetos en JavaScript

Hay muchos casos en los que desea realizar ciertas operaciones en objetos en JavaScript. La biblioteca estándar incluye todo tipo de métodos para lograr esto, pero eso no significa que todos los casos estén cubiertos.

En este caso, no existe una forma nativa de iterar sobre los atributos de un objeto y realizar una acción similar a la función Array.prototype.map.

Por lo tanto, si desea repasar cada atributo y agregarle un valor específico, no hay forma de hacerlo utilizando un método de biblioteca estándar. Afortunadamente, puede crear su función de map desde cero y personalizarla como mejor le parezca.

Utilice el método general map() para crear una función de map para objetos en JavaScript

Usando la función nativa map(), este método puede lograr los resultados deseados. Sin embargo, debes saber que este método modificará el objeto original en lugar de crear uno nuevo.

Si no le importa el objeto original y quiere el resultado, así es como puede lograrlo:

let testObject = {'first': 1, 'second': 2, 'third': 3};

Object.keys(testObject).map(function(key, value) {
  testObject[key] += 1
});

console.log(testObject);

Producción :

{ first: 2, second: 3, third: 4 }

Use un bucle for in para crear una función de map para objetos en JavaScript

Alternativamente, también puede usar un bucle for simple para iterar sobre los atributos del objeto y realizar los cálculos deseados. Este método utiliza la función hasOwnProperty() para comprobar si el objeto tiene atributos válidos.

let testObject = {'first': 1, 'second': 2, 'third': 3};

for (var key in testObject) {
  if (testObject.hasOwnProperty(key)) {
    testObject[key] += 1;
  }
}

console.log(testObject);

Producción :

{ first: 2, second: 3, third: 4 }

Cree un nuevo objeto usando una función de map personalizada para objetos en JavaScript

Como se mencionó anteriormente, el método anterior sobrescribe el objeto original mientras realiza las operaciones deseadas. Si no desea hacer eso, puede crear un nuevo objeto y mantener el original intacto.

Obviamente, este método requiere más código, pero el resultado es un poco más limpio.

let testObject = {'first': 1, 'second': 2, 'third': 3};

function customMap(object, mapFn) {
  return Object.keys(object).reduce(function(result, key) {
    result[key] = mapFn(object[key])
    return result
  }, {});
}

let newObject = customMap(testObject, function(value) {
  return value + 1
});

console.log(testObject);
console.log(newObject);

Producción :

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

El resultado muestra el objeto original y el objeto recién creado con los valores modificados. Si tienes curiosidad, el parámetro mapFn que usamos es parte del método Array.from(), y está diseñado para funcionar como una función de mapeo.

Use Object.entries() y Object.fromEntries() para crear una función de map para objetos en JavaScript

Si su proyecto le permite usar el estándar ES2019 sin preocuparse por la compatibilidad con versiones anteriores, puede reducir el código necesario para crear una función de mapeo.

Así es como se ve el código para este método:

let testObject = {'first': 1, 'second': 2, 'third': 3};

let newObject = Object.fromEntries(
    Object.entries(testObject).map(([key, value]) => [key, value + 1]));

console.log(testObject);
console.log(newObject);

Producción :

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

Dado que se trata de una sola línea, puede resultar difícil de mantener, aunque es un poco más fácil de implementar.

Escriba una función usando Object.entries() y Object.fromEntries() para mapear sus objetos en JavaScript

Suponga que desea que el código anterior sea más manejable y fácil de mantener. En ese caso, la solución más simple es integrar Object.entries() y Object.fromEntries() en una función personalizada.

Como tal, así es como podrías reescribir el código anterior:

let testObject = {'first': 1, 'second': 2, 'third': 3};

function customMap(object, func) {
  return Object.fromEntries(
      Object.entries(object).map(([key, value]) => [key, func(value)]));
}

let newObject = customMap(testObject, (x) => x + 1);

console.log(testObject);
console.log(newObject);

Producción :

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }