Kaartfunctie voor objecten (in plaats van arrays)

const identity = x =>
  x
const mapReduce = (m, r) =>
  (a, x) => r (a, m (x))
const omap = (f = identity, o = {}) =>
  Object
    .keys (o)
    .reduce
      ( mapReduce
          ( k => ({ [k]: f (o[k]) })
          , Object.assign
          )
      , {}
      )
const square = x =>
  x * x
const data =
  { a : 1, b : 2, c : 3 }
console .log (omap (square, data))
// { a : 1, b : 4, c : 9 }

Antwoord 15

Ik kwam dit tegen als een eerste item in een Google-zoekopdracht om dit te leren, en dacht dat ik het met andere mensen zou delen die onlangs de oplossing vonden die ik vond, die het npm-pakket onveranderlijk gebruikt.

Ik denk dat het interessant is om te delen omdat immutable de EXACTE situatie van het OP gebruikt in hun eigen documentatie – het volgende is niet mijn eigen code, maar is overgenomen uit de huidige immutable-js-documentatie:

const { Seq } = require('immutable')
const myObject = { a: 1, b: 2, c: 3 }
Seq(myObject).map(x => x * x).toObject();
// { a: 1, b: 4, c: 9 } 

Niet dat Seq andere eigenschappen heeft (“Seq beschrijft een luie operatie, waardoor ze efficiënt gebruik kunnen maken van alle hogere-orde verzamelmethoden (zoals kaart en filter) door geen tussenliggende verzamelingen te maken”) en dat een andere onveranderlijke -js datastructuren kunnen het werk ook behoorlijk efficiënt doen.

Iedereen die deze methode gebruikt, moet natuurlijk npm install immutableen wil misschien de documenten lezen:

https://facebook.github.io/immutable-js/

Antwoord 16

Gebaseerd op het antwoord van @Amberlamps, hier is een hulpprogramma-functie
(als opmerking zag het er lelijk uit)

function mapObject(obj, mapFunc){
    return Object.keys(obj).reduce(function(newObj, value) {
        newObj[value] = mapFunc(obj[value]);
        return newObj;
    }, {});
}

en het gebruik is:

var obj = {a:1, b:3, c:5}
function double(x){return x * 2}
var newObj = mapObject(obj, double);
//=>  {a: 2, b: 6, c: 10}

Antwoord 17

Mijn reactie is grotendeels gebaseerd op de best beoordeelde reactie hier en hopelijk begrijpt iedereen het (heb dezelfde uitleg ook op mijn GitHub). Dit is waarom zijn impementatie met kaart werkt:

Object.keys(images).map((key) => images[key] = 'url(' + '"' + images[key] + '"' +    
')');

Het doel van de functie is om een object te nemen en de originele inhoud van het object te wijzigen met behulp van een methode die beschikbaar is voor alle objecten (zowel objecten als arrays) zonder een array te retourneren. Bijna alles binnen JS is een object, en om die reden kunnen elementen verderop in de pijplijn van overerving mogelijk technisch gebruik maken van de elementen die beschikbaar zijn voor degenen die hogerop in de rij staan (en omgekeerd lijkt het).

De reden dat dit werkt, is omdat de .map-functies een array retourneren VEREIST dat je een expliciete of impliciete RETURN van een array opgeeft in plaats van simpelweg een bestaand object te wijzigen. Je laat het programma in wezen denken dat het object een array is door Object.keys te gebruiken, waarmee je de kaartfunctie kunt gebruiken met de waarden waaraan de individuele sleutels zijn gekoppeld (ik heb eigenlijk per ongeluk arrays geretourneerd, maar het gerepareerd). Zolang er geen terugkeer in de normale zin is, wordt er geen array gemaakt met het oorspronkelijke object nog intact en gewijzigd zoals geprogrammeerd.

Dit specifieke programma neemt een object genaamd afbeeldingen en neemt de waarden van zijn sleutels en voegt url-tags toe voor gebruik binnen een andere functie. Origineel is dit:

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

…en aangepast is dit:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('https://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') 
};

De originele structuur van het object wordt intact gelaten, waardoor normale toegang tot eigendommen mogelijk is zolang er geen terugkeer is. Laat het NIET een array retourneren zoals normaal en alles komt goed. Het doel is om de oorspronkelijke waarden (afbeeldingen [sleutel]) OPNIEUW TOEWIJZEN aan wat gewenst is en niet aan iets anders. Voor zover ik weet, MOET er, om array-output te voorkomen, een HERTOEPASSING van afbeeldingen [sleutel] zijn en geen impliciet of expliciet verzoek om een array te retourneren (variabele toewijzing doet dit en ging voor mij heen en weer).

BEWERKEN:

Ga in op zijn andere methode met betrekking tot het maken van nieuwe objecten om te voorkomen dat het oorspronkelijke object wordt gewijzigd (en hertoewijzing lijkt nog steeds nodig te zijn om te voorkomen dat per ongeluk een array als uitvoer wordt gemaakt). Deze functies gebruiken de syntaxis van de pijl en zijn bedoeld als u gewoon een nieuw object wilt maken voor toekomstig gebruik.

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});
var newImages = mapper(images, (value) => value);

De manier waarop deze functies werken is als volgt:

mapFn neemt de functie die later moet worden toegevoegd (in dit geval (waarde) => waarde) en retourneert eenvoudig wat daar is opgeslagen als een waarde voor die sleutel (of vermenigvuldigd met twee als u de geretourneerde waarde wijzigt zoals hij deed ) in mapFn(obj)[sleutel],

en herdefinieert vervolgens de oorspronkelijke waarde die is gekoppeld aan de sleutel in result[key] = mapFn(obj)[key]

en retourneert de bewerking die op resultaat is uitgevoerd (de accumulator die zich tussen de haakjes bevindt die aan het einde van de functie .reduce is gestart).

Dit alles wordt uitgevoerd op het gekozen object en NOG STEEDS KAN er GEEN impliciete aanvraag voor een geretourneerde array zijn en werkt alleen bij het opnieuw toewijzen van waarden voor zover ik weet. Dit vereist wat mentale gymnastiek, maar vermindert de benodigde coderegels, zoals hierboven te zien is. Uitvoer is precies hetzelfde als hieronder te zien is:

{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"}

Houd er rekening mee dat dit werkte met NON-NUMBERS. U KUNT ELK object dupliceren door EENVOUDIG DE WAARDE TE RETOURNEREN in de mapFN-functie.

Antwoord 18

Als je geïnteresseerd bent in mapping, niet alleen waarden maar ook sleutels, heb ik Object.map(valueMapper, keyMapper), dat zich zo gedraagt:

var source = { a: 1, b: 2 };
function sum(x) { return x + x }
source.map(sum);            // returns { a: 2, b: 4 }
source.map(undefined, sum); // returns { aa: 1, bb: 2 }
source.map(sum, sum);       // returns { aa: 2, bb: 4 }

Antwoord 19

Ik had een versie nodig waarmee ik ook de sleutels kon wijzigen (gebaseerd op de antwoorden van @Amberlamps en @yonatanmn);

var facts = [ // can be an object or array - see jsfiddle below
    {uuid:"asdfasdf",color:"red"},
    {uuid:"sdfgsdfg",color:"green"},
    {uuid:"dfghdfgh",color:"blue"}
];
var factObject = mapObject({}, facts, function(key, item) {
    return [item.uuid, {test:item.color, oldKey:key}];
});
function mapObject(empty, obj, mapFunc){
    return Object.keys(obj).reduce(function(newObj, key) {
        var kvPair = mapFunc(key, obj[key]);
        newObj[kvPair[0]] = kvPair[1];
        return newObj;
    }, empty);
}

factObject=

{
"asdfasdf": {"color":"red","oldKey":"0"},
"sdfgsdfg": {"color":"green","oldKey":"1"},
"dfghdfgh": {"color":"blue","oldKey":"2"}
}

Bewerken: kleine wijziging om het startobject {} door te geven. Staat toe dat het [] is (als de sleutels gehele getallen zijn)

Antwoord 20

var myObject = { 'a': 1, 'b': 2, 'c': 3 };
Object.prototype.map = function(fn){
    var oReturn = {};
    for (sCurObjectPropertyName in this) {
        oReturn[sCurObjectPropertyName] = fn(this[sCurObjectPropertyName], sCurObjectPropertyName);
    }
    return oReturn;
}
Object.defineProperty(Object.prototype,'map',{enumerable:false});
newObject = myObject.map(function (value, label) {
    return value * value;
});
// newObject is now { 'a': 1, 'b': 4, 'c': 9 }

Antwoord 21

Om beter te reageren op wat precieshet OP vroeg, wil het OP een object:

myObject = { 'a': 1, 'b': 2, 'c': 3 }

om een kaartmethode myObject.mapte hebben,

vergelijkbaar met Array.prototype.map die als volgt zou worden gebruikt:

newObject = myObject.map(functie (waarde, label) {
  retourwaarde * waarde;
});
// newObject is nu { 'a': 1, 'b': 4, 'c': 9 }

Het imhobeste antwoord (gemeten in termen van “dicht bij wat wordt gevraagd” + “geen ES{5,6,7} onnodig vereist”) zou zijn :

myObject.map = function mapForObject(callback)
{
  var result = {};
  for(var property in this){
    if(this.hasOwnProperty(property) && property != "map"){
      result[property] = callback(this[property],property,this);
    }
  }
  return result;
}

De bovenstaande code vermijdt het opzettelijk gebruik van taalfuncties, die alleen beschikbaar zijn in recente ECMAScript-edities. Met de bovenstaande code kan het probleem als volgt worden opgelost:

myObject = { 'a': 1, 'b': 2, 'c': 3 };
myObject.map = function mapForObject(callback)
{
  var result = {};
  for(var property in this){
    if(this.hasOwnProperty(property) && property != "map"){
      result[property] = callback(this[property],property,this);
    }
  }
  return result;
}
newObject = myObject.map(function (value, label) {
  return value * value;
});
console.log("newObject is now",newObject);

Object.entries(collection).map(...)

const myObject = { 'a': 1, 'b': 2, 'c': 3 };
// keep the key and modify the value
let obj = objectMap(myObject, val => val * 2);
// obj = { a: 2, b: 4, c: 6 }
// modify both key and value
obj = objectMap(myObject,
    val => val * 2 + '',
    key => (key + key).toUpperCase());
// obj = { AA: '2', BB: '4', CC: '6' }

interface Dictionary<T> {
    [key: string]: T;
}
function objectMap<TValue, TResult>(
    obj: Dictionary<TValue>,
    valSelector: (val: TValue, obj: Dictionary<TValue>) => TResult,
    keySelector?: (key: string, obj: Dictionary<TValue>) => string,
    ctx?: Dictionary<TValue>
) {
    const ret = {} as Dictionary<TResult>;
    for (const key of Object.keys(obj)) {
        const retKey = keySelector
            ? keySelector.call(ctx || null, key, obj)
            : key;
        const retVal = valSelector.call(ctx || null, obj[key], obj);
        ret[retKey] = retVal;
    }
    return ret;
}

const mapObject = (targetObject, callbackFn) => {
    if (!targetObject) return targetObject;
    if (Array.isArray(targetObject)){
        return targetObject.map((v)=>mapObject(v, callbackFn))
    }
    return Object.entries(targetObject).reduce((acc,[key, value]) => {
        const res = callbackFn(key, value);
        if (!Array.isArray(res) && typeof res ==='object'){
            return {...acc, [key]: mapObject(res, callbackFn)}
        }
        if (Array.isArray(res)){
            return {...acc, [key]: res.map((v)=>mapObject(v, callbackFn))}
        }
        return {...acc, [key]: res};
    },{})
};
const mapped = mapObject(a,(key,value)=> {
    if (!Array.isArray(value) && key === 'a') return ;
    if (!Array.isArray(value) && key === 'e') return [];
    if (!Array.isArray(value) && key === 'g') return value * value;
    return value;
});
console.log(JSON.stringify(mapped)); 
// {"b":2,"c":[{"d":2,"e":[],"f":[{"g":4}]}]}

   function propertyMapper(object, src){
         for (var property in object) {   
           for (var sourceProp in src) {
               if(property === sourceProp){
                 if(Object.prototype.toString.call( property ) === '[object Array]'){
                   propertyMapper(object[property], src[sourceProp]);
                   }else{
                   object[property] = src[sourceProp];
                }
              }
            }
         }
      }

// Maps an object to a new object by applying a function to each key+value pair.
// Takes the object to map and a function from (key, value) to mapped value.
const mapObject = (obj, fn) => {
    const newObj = {};
    Object.keys(obj).forEach(k => { newObj[k] = fn(k, obj[k]); });
    return newObj;
};
// Maps an object to a new array by applying a function to each key+value pair.
// Takes the object to map and a function from (key, value) to mapped value.
const mapObjectToArray = (obj, fn) => (
    Object.keys(obj).map(k => fn(k, obj[k]))
);

const obj = { 'a': 1, 'b': 2, x: {'c': 3 }}
const json = JSON.stringify(obj, (k, v) => typeof v === 'number' ? v * v : v)
console.log(json)
console.log('back to json:', JSON.parse(json))

Object.keys(params).map(k => typeof params[k] == "string" ? params[k] = params[k].trim() : null);

function mappedObject(obj, keyMapper, valueMapper) {
    const mapped = {};
    const keys   = Object.keys(obj);
    const mapKey = typeof keyMapper == 'function';
    const mapVal = typeof valueMapper == 'function';
    for (let i = 0; i < keys.length; i++) {
        const key = mapKey ? keyMapper(keys[i]) : keys[i];
        const val = mapVal ? valueMapper(obj[keys[i]]) : obj[keys[i]];
        mapped[key] = val;
    }
    return mapped;
}

const o1 = { x: 1, c: 2 }
mappedObject(o1, k => k + '0', v => v + 1) // {x0: 2, c0: 3}