Ma réponse est largement basée sur la réponse la mieux notée ici et j'espère que tout le monde comprend (ayez la même explication sur mon GitHub aussi). C'est pourquoi son implémentation avec la carte fonctionne:
Object.keys(images).map((key) => images[key] = 'url(' + '"' + images[key] + '"' +
')');
Le but de la fonction est de prendre un objet et de modifier le contenu d'origine de l'objet en utilisant une méthode disponible pour tous les objets (objets et tableaux de la même manière) sans retourner de tableau. Presque tout dans JS est un objet, et pour cette raison, des éléments plus bas dans le pipeline d'héritage peuvent potentiellement techniquement utiliser ceux disponibles pour ceux qui sont en amont (et l'inverse, il apparaît).
La raison pour laquelle cela fonctionne est due aux fonctions .map renvoyant un tableau EXIGEANT que vous fournissiez un RETOUR explicite ou implicite d'un tableau au lieu de simplement modifier un objet existant. Vous trompez essentiellement le programme en pensant que l'objet est un tableau en utilisant Object.keys qui vous permettra d'utiliser la fonction de carte avec son action sur les valeurs auxquelles les clés individuelles sont associées (j'ai en fait renvoyé des tableaux par erreur mais je l'ai corrigé). Tant qu'il n'y a pas de retour dans le sens normal, il n'y aura pas de tableau créé avec l'objet d'origine toujours intact et modifié comme programmé.
Ce programme particulier prend un objet appelé images et prend les valeurs de ses clés et ajoute des balises url à utiliser dans une autre fonction. L'original est le suivant:
var images = {
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305',
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-
Matanzas-city- Cuba-20170131-1080.jpg',
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };
... et modifié est ceci:
var images = {
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-
east-Matanzas-city- Cuba-20170131-1080.jpg'),
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg')
};
La structure d'origine de l'objet est laissée intacte, ce qui permet un accès normal à la propriété tant qu'il n'y a pas de retour. Ne le faites pas renvoyer un tableau comme d'habitude et tout ira bien. Le but est de RÉASSIGNER les valeurs originales (images [clé]) à ce qui est voulu et pas à autre chose. Pour autant que je sache, afin d'empêcher la sortie du tableau, il DOIT y avoir RÉASSIGNATION des images [clé] et aucune demande implicite ou explicite de renvoyer un tableau (l'affectation des variables fait cela et me faisait des allers-retours).
ÉDITER:
Je vais aborder son autre méthode concernant la création de nouveaux objets pour éviter de modifier l'objet d'origine (et une réaffectation semble toujours nécessaire pour éviter de créer accidentellement un tableau en sortie). Ces fonctions utilisent la syntaxe des flèches et le sont si vous voulez simplement créer un nouvel objet pour une utilisation future.
const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
result[key] = mapFn(obj)[key];
return result;
}, {});
var newImages = mapper(images, (value) => value);
Le fonctionnement de ces fonctions est le suivant:
mapFn prend la fonction à ajouter plus tard (dans ce cas (valeur) => valeur) et renvoie simplement tout ce qui y est stocké comme valeur pour cette clé (ou multiplié par deux si vous modifiez la valeur de retour comme il l'a fait) dans mapFn ( obj) [clé],
puis redéfinit la valeur d'origine associée à la clé dans result [key] = mapFn (obj) [key]
et renvoie l'opération effectuée sur le résultat (l'accumulateur situé dans les parenthèses initiée à la fin de la fonction .reduce).
Tout cela est effectué sur l'objet choisi et TOUJOURS IL NE PEUT PAS y avoir de demande implicite pour un tableau retourné et ne fonctionne que lors de la réaffectation de valeurs pour autant que je sache. Cela nécessite une certaine gymnastique mentale, mais réduit les lignes de code nécessaires, comme on peut le voir ci-dessus. La sortie est exactement la même que celle illustrée ci-dessous:
{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain:
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}
Gardez à l'esprit que cela a fonctionné avec NON-NUMBERS. Vous POUVEZ dupliquer N'IMPORTE QUEL objet en RETOURNANT SIMPLEMENT LA VALEUR dans la fonction mapFN.
Object.keys
, qui n'a pas d'ordre bien défini. Cela peut être problématique, je suggère d'utiliser à laObject.getOwnPropertyNames
place.