Créer une fonction map pour les objets en JavaScript

1. Utilisez la méthode générale map() pour créer une fonction map pour les objets en JavaScript
2. Utiliser une boucle for in pour créer une fonction map pour les objets en JavaScript
3. Créer un nouvel objet à l’aide d’une fonction map personnalisée pour les objets en JavaScript
4. Utilisez Object.entries() et Object.fromEntries() pour créer une fonction map pour les objets en JavaScript
5. Écrivez une fonction en utilisant Object.entries() et Object.fromEntries() pour mapper vos objets en JavaScript

Il existe de nombreux cas où vous souhaitez effectuer certaines opérations sur des objets en JavaScript. La bibliothèque standard comprend toutes sortes de méthodes pour y parvenir, mais cela ne signifie pas que tous les cas sont couverts.

Dans ce cas, il n’existe aucun moyen natif d’itérer sur les attributs d’un objet et d’effectuer une action similaire à la fonction Array.prototype.map.

Ainsi, si vous souhaitez passer en revue chaque attribut et lui ajouter une valeur spécifique, vous n’avez aucun moyen de le faire en utilisant une méthode de bibliothèque standard. Heureusement, vous pouvez créer votre fonction map à partir de zéro et la personnaliser comme bon vous semble.

Utilisez la méthode générale map() pour créer une fonction map pour les objets en JavaScript

En utilisant la fonction native map(), cette méthode peut atteindre les résultats souhaités. Cependant, vous devez savoir que cette méthode modifiera l’objet d’origine au lieu d’en créer un nouveau.

Si vous ne vous souciez pas de l’objet d’origine et que vous voulez le résultat, voici comment vous pouvez y parvenir :

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

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

console.log(testObject);

Production :

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

Utiliser une boucle for in pour créer une fonction map pour les objets en JavaScript

Alternativement, vous pouvez également utiliser une simple boucle for pour itérer sur les attributs de l’objet et effectuer les calculs souhaités. Cette méthode utilise la fonction hasOwnProperty() pour vérifier si l’objet a des attributs valides.

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

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

console.log(testObject);

Production :

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

Créer un nouvel objet à l’aide d’une fonction map personnalisée pour les objets en JavaScript

Comme mentionné ci-dessus, la méthode précédente écrase l’objet d’origine tout en effectuant les opérations souhaitées. Si vous ne voulez pas faire cela, vous pouvez à la place créer un nouvel objet et conserver l’original intact.

Évidemment, cette méthode nécessite plus de code, mais le résultat est un peu plus propre.

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

Production :

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

La sortie affiche l’objet d’origine et l’objet nouvellement créé avec les valeurs modifiées. Si vous êtes curieux, le paramètre mapFn que nous avons utilisé fait partie de la méthode Array.from(), et il est conçu pour fonctionner comme une fonction de mappage.

Utilisez Object.entries() et Object.fromEntries() pour créer une fonction map pour les objets en JavaScript

Si votre projet vous permet d’utiliser la norme ES2019 sans vous soucier de la rétrocompatibilité, vous pouvez réduire le code nécessaire pour créer une fonction de mappage.

Voici à quoi ressemble le code de cette méthode :

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

Production :

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

Comme il s’agit d’un one-liner, il peut s’avérer difficile à entretenir, même s’il est un peu plus facile à mettre en œuvre.

Écrivez une fonction en utilisant Object.entries() et Object.fromEntries() pour mapper vos objets en JavaScript

Supposons que vous souhaitiez rendre le code ci-dessus plus facile à gérer et à maintenir. Dans ce cas, la solution la plus simple est d’intégrer les Object.entries() et Object.fromEntries() dans une fonction personnalisée.

En tant que tel, voici comment vous pourriez réécrire le bit de code précédent :

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

Production :

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