nesneler için harita işlevi (diziler yerine)

Bir nesnem var:

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

Ben yerel bir yöntem, buna benzer Array.prototype.mapaşağıdaki gibi arıyorum :

newObject = myObject.map(function (value, label) {
    return value * value;
});

// newObject is now { 'a': 1, 'b': 4, 'c': 9 }

JavaScript'in mapnesneler için böyle bir işlevi var mı ? (Bunu Node.JS için istiyorum, bu yüzden tarayıcılar arası sorunları umursamıyorum.)

Hiçbir yerli mapiçin Objectnesne, ancak buna ne dersin:

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

Object.keys(myObject).map(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

Ancak aşağıdakileri kullanarak kolayca bir nesne üzerinde yineleme yapabilirsiniz for ... in:

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

for (var key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    myObject[key] *= 2;
  }
}

console.log(myObject);
// { 'a': 2, 'b': 4, 'c': 6 }

Güncelleme

Birçok insan önceki yöntemlerin yeni bir nesne döndürmediğini, aksine nesnenin kendisi üzerinde çalıştığını belirtiyor. Bu nedenle yeni bir nesne döndüren ve orijinal nesneyi olduğu gibi bırakan başka bir çözüm eklemek istedim:

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

// returns a new object with the values at each key mapped using mapFn(value)
function objectMap(object, mapFn) {
  return Object.keys(object).reduce(function(result, key) {
    result[key] = mapFn(object[key])
    return result
  }, {})
}

var newObject = objectMap(myObject, function(value) {
  return value * 2
})

console.log(newObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

console.log(myObject);
// => { 'a': 1, 'b': 2, 'c': 3 }

Array.prototype.reduceönceki değeri akımla bir araya getirerek bir diziyi tek bir değere düşürür. Zincir boş bir nesne tarafından başlatılır {}. Her yinelemeye myObject, değerin iki katı olan yeni bir anahtar eklenir.

Güncelleme

Yeni ES6 özellikleri ile ifade etmenin daha zarif bir yolu var objectMap.

const objectMap = (obj, fn) =>
  Object.fromEntries(
    Object.entries(obj).map(
      ([k, v], i) => [k, fn(v, k, i)]
    )
  )
  
const myObject = { a: 1, b: 2, c: 3 }

console.log(objectMap(myObject, v => 2 * v)) 

Düz JS'de ( ES6 / ES2015 ) hemen değişken atamasına sahip bir astar nasıl olur ?

Forma operatörünü ve hesaplanan anahtar adı sözdizimini kullanma:

let newObj = Object.assign({}, ...Object.keys(obj).map(k => ({[k]: obj[k] * obj[k]})));

jsbin

Reduce kullanan başka bir sürüm:

let newObj = Object.keys(obj).reduce((p, c) => ({...p, [c]: obj[c] * obj[c]}), {});

jsbin

İşlev olarak ilk örnek:

const oMap = (o, f) => Object.assign({}, ...Object.keys(o).map(k => ({ [k]: f(o[k]) })));

// To square each value you can call it like this:
let mappedObj = oMap(myObj, (x) => x * x);

jsbin

Eğer iç içe bir nesneyi eşleştirmek istiyorsanız yinelemeli bir de fonksiyonel bir tarzda, bu gibi yapılabilir:

const sqrObjRecursive = obj =>
  Object.keys(obj).reduce(
    (newObj, key) =>
      obj[key] && typeof obj[key] === "object"
        ? { ...newObj, [key]: sqrObjRecursive(obj[key]) } // recurse.
        : { ...newObj, [key]: obj[key] * obj[key] }, // square val.
    {}
  );       

jsbin

Veya daha zorunlu olarak, şöyle:

const sqrObjRecursive = obj => {
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === "object") obj[key] = sqrObjRecursive(obj[key]);
    else obj[key] = obj[key] * obj[key];
  });
  return obj;
};

jsbin

ES7 / ES2016'dan bu yana Object.entries(), Object.keys()örneğin bunun yerine kullanabilirsiniz :

let newObj = Object.assign({}, ...Object.entries(obj).map(([k, v]) => ({[k]: v * v})));

BunuObject.fromEntries() daha da basitleştiren ES2019 tanıtıldı :

let newObj = Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, v * v]));

Kalıtsal özellikler ve prototip zinciri:

Bazı nadir durumlarda , miras alınan bir nesnenin özelliklerini prototip zincirinde tutan sınıfa benzer bir nesneyi eşlemeniz gerekebilir . Bu gibi durumlarda işe yaramaz, çünkü miras alınan mülkleri numaralandırmaz . Devralınan özellikleri eşlemeniz gerekiyorsa , kullanmalısınız .Object.keys()Object.keys()for (key in myObj) {...}

Aşağıda, başka bir nesnenin özelliklerini devralan ve Object.keys()bu senaryoda nasıl çalışmayan bir nesneye örnek verilmiştir .

const obj1 = { 'a': 1, 'b': 2, 'c': 3}
const obj2 = Object.create(obj1);  // One of multiple ways to inherit an object in JS.

// Here you see how the properties of obj1 sit on the 'prototype' of obj2
console.log(obj2)  // Prints: obj2.__proto__ = { 'a': 1, 'b': 2, 'c': 3}

console.log(Object.keys(obj2));  // Prints: an empty Array.

for (key in obj2) {
  console.log(key);              // Prints: 'a', 'b', 'c'
}

jsbin

Ancak, lütfen bana bir iyilik yapın ve kalıtımdan kaçının . :-)

Yerel yöntem yok, ancak lodash # mapValues işi mükemmel bir şekilde yapacak

_.mapValues({ 'a': 1, 'b': 2, 'c': 3} , function(num) { return num * 3; });
// → { 'a': 3, 'b': 6, 'c': 9 }

Birini yazmak oldukça kolay:

Object.map = function(o, f, ctx) {
    ctx = ctx || this;
    var result = {};
    Object.keys(o).forEach(function(k) {
        result[k] = f.call(ctx, o[k], k, o); 
    });
    return result;
}

örnek kod ile:

> o = { a: 1, b: 2, c: 3 };
> r = Object.map(o, function(v, k, o) {
     return v * v;
  });
> r
{ a : 1, b: 4, c: 9 }

Not: Bu sürüm aynı zamanda (isteğe bağlı olarak) yöntem thisgibi, geri arama için bağlam ayarlamanıza da olanak tanır Array.

EDIT - nesnenin üzerinde Object.prototypevar olan herhangi bir özellikle çakışmamasını sağlamak için, kullanımını kaldırmak üzere değiştirildi map.

Object.keysVe sonra forEachdöndürülen anahtar dizisini kullanabilirsiniz :

var myObject = { 'a': 1, 'b': 2, 'c': 3 },
    newObject = {};
Object.keys(myObject).forEach(function (key) {
    var value = myObject[key];
    newObject[key] = value * value;
});

Veya daha modüler bir şekilde:

function map(obj, callback) {
    var result = {};
    Object.keys(obj).forEach(function (key) {
        result[key] = callback.call(obj, obj[key], key, obj);
    });
    return result;
}

newObject = map(myObject, function(x) { return x * x; });

Object.keysYalnızca nesnenin kendi numaralandırılabilir özelliklerini içeren bir dizi döndürdüğünü unutmayın , bu nedenle çek for..iniçeren bir döngü gibi davranır hasOwnProperty.

Bu düz bs ve JS topluluğundaki herkes bunu biliyor. Orada gereken bu işlev be:

const obj1 = {a:4, b:7};
const obj2 = Object.map(obj1, (k,v) => v + 5);

console.log(obj1); // {a:4, b:7}
console.log(obj2); // {a:9, b:12}

İşte naif uygulama:

Object.map = function(obj, fn, ctx){

    const ret = {};

    for(let k of Object.keys(obj)){
        ret[k] = fn.call(ctx || null, k, obj[k]);
    });

    return ret;
};

Bunu her zaman kendiniz uygulamak çok can sıkıcıdır;)

Biraz daha karmaşık bir şey istiyorsanız, bu Object sınıfını engellemezse şunu deneyin:

let map = function (obj, fn, ctx) {
  return Object.keys(obj).reduce((a, b) => {
    a[b] = fn.call(ctx || null, b, obj[b]);
    return a;
  }, {});
};


const x = map({a: 2, b: 4}, (k,v) => {
    return v*2;
});

ancak bu harita işlevini Object'e eklemek güvenlidir, Object.prototype'e eklemeyin.

Object.map = ... // fairly safe
Object.prototype.map ... // not ok

Buraya bir nesneyi bir diziye eşlemek ve bulmak için geldim ve sonuç olarak bu sayfayı aldım. Buraya benimle aynı cevabı aramaya geldiysen, bir diziyi nasıl eşleyip nesne oluşturabileceğin budur.

Nesneden aşağıdaki gibi yeni bir dizi döndürmek için haritayı kullanabilirsiniz:

var newObject = Object.keys(myObject).map(function(key) {
   return myObject[key];
});

Kabul edilen cevabın iki dezavantajı vardır:

• Yanlış kullanır Array.prototype.reduce, çünkü bu durumda olmayan bir kompozit tipin yapısını değiştirmek için azaltma araçları.
• Özellikle tekrar kullanılamaz

ES6 / ES2015 fonksiyonel yaklaşımı

Lütfen tüm fonksiyonların kıvrımlı biçimde tanımlandığını unutmayın.

// small, reusable auxiliary functions

const keys = o => Object.keys(o);

const assign = (...o) => Object.assign({}, ...o);

const map = f => xs => xs.map(x => f(x));

const mul = y => x => x * y;

const sqr = x => mul(x) (x);


// the actual map function

const omap = f => o => {
  o = assign(o); // A
  map(x => o[x] = f(o[x])) (keys(o)); // B
  return o;
};


// mock data

const o = {"a":1, "b":2, "c":3};


// and run

console.log(omap(sqr) (o));
console.log(omap(mul(10)) (o));

• A satırında oyeniden atanır. Javascript referans değerlerini paylaşarak geçtiğinden , sığ bir kopyası ooluşturulur. Artık mutasyona uğramadan oiçinde omapmutasyona geçebiliyoruzo ana kapsamda .
• B satırında mapdönüş değeri yok sayılır, çünkü mapbir mutasyon gerçekleştirir o. Bu yan etki içeride kaldığı omapve ana kapsamda görünmediği için tamamen kabul edilebilir.

Bu en hızlı çözüm değil, deklaratif ve tekrar kullanılabilir bir çözümdür. İşte tek satırlık, özlü ama daha az okunabilir olanla aynı uygulama:

const omap = f => o => (o = assign(o), map(x => o[x] = f(o[x])) (keys(o)), o);

Zeyilname - nesneler neden varsayılan olarak yinelenemez?

ES2015, yineleyiciyi ve yinelenebilir protokolleri belirtmiştir. Ancak nesneler hala tekrarlanabilir değildir ve bu nedenle eşlenemez. Bunun nedeni, verilerin ve program seviyesinin karıştırılmasıdır .

JavaScript yeni Object.fromEntriesyöntemi aldı.

Misal

function mapObject (obj, fn) {
  return Object.fromEntries(
    Object
      .entries(obj)
      .map(fn)
  )
}

const myObject = { a: 1, b: 2, c: 3 }
const myNewObject = mapObject(myObject, ([key, value]) => ([key, value * value]))
console.log(myNewObject)

açıklama

Yukarıdaki kod, Object'i [[<key>,<value>], ...]eşleyebileceğiniz iç içe bir Array ( ) biçimine dönüştürür . Object.fromEntriesDiziyi tekrar bir Nesneye dönüştürür.

Bu modelle ilgili en güzel şey, haritalama sırasında artık nesne anahtarlarını kolayca dikkate alabilmenizdir.

belgeleme

• Object.fromEntries()
• Object.entries()

Tarayıcı Desteği

Object.fromEntriesşu anda yalnızca bu tarayıcılar / motorlar tarafından desteklenmektedir , bununla birlikte çoklu dolgular mevcuttur (örn. @ babel / polyfill ).

Minimum sürüm (es6):

Object.entries(obj).reduce((a, [k, v]) => (a[k] = v * v, a), {})

Maksimum performans için.

Nesneniz sık sık değişmiyor, ancak sık sık yinelenmesi gerekiyorsa, yerel bir haritayı önbellek olarak kullanmanızı öneririz.

// example object
var obj = {a: 1, b: 2, c: 'something'};

// caching map
var objMap = new Map(Object.entries(obj));

// fast iteration on Map object
objMap.forEach((item, key) => {
  // do something with an item
  console.log(key, item);
});

Object.entries zaten Chrome, Edge, Firefox ve beta Opera'da çalışıyor, bu yüzden geleceğe dönük bir özellik. ES7'den geliyor, bu yüzden çalışmadığı IE için https://github.com/es-shims/Object.entries doldurun .

mapyöntemi ve forEachdizileri kullanabilirsiniz , ancak kullanmak istiyorsanız Objecto zaman aşağıdaki gibi bükülme ile kullanabilirsiniz:

Javascript Kullanma (ES6)

var obj = { 'a': 2, 'b': 4, 'c': 6 };   
Object.entries(obj).map( v => obj[v[0]] *= v[1] );
console.log(obj); //it will log as {a: 4, b: 16, c: 36}

var obj2 = { 'a': 4, 'b': 8, 'c': 10 };
Object.entries(obj2).forEach( v => obj2[v[0]] *= v[1] );
console.log(obj2); //it will log as {a: 16, b: 64, c: 100}

JQuery kullanma

var ob = { 'a': 2, 'b': 4, 'c': 6 };
$.map(ob, function (val, key) {
   ob[key] *= val;
});
console.log(ob) //it will log as {a: 4, b: 16, c: 36}

Veya $.eachaşağıdaki örnekte olduğu gibi yöntem gibi diğer döngüler de kullanabilirsiniz :

$.each(ob,function (key, value) {
  ob[key] *= value;
});
console.log(ob) //it will also log as {a: 4, b: 16, c: 36}

Üzerinde map functionmevcut değil Object.prototypeancak öykünebilir

var myMap = function ( obj, callback ) {

    var result = {};

    for ( var key in obj ) {
        if ( Object.prototype.hasOwnProperty.call( obj, key ) ) {
            if ( typeof callback === 'function' ) {
                result[ key ] = callback.call( obj, obj[ key ], key, obj );
            }
        }
    }

    return result;

};

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

var newObject = myMap( myObject, function ( value, key ) {
    return value * value;
});

Bunu, bunu yapmayı öğrenmeye çalışan bir Google aramasında ilk öğe olarak gördüm ve diğer son zamanlarda bunu bulduğum çözümü bulduğum ve npm paketini değiştiremeyen bir çözüm bulduğumu düşündüm.

Değişmez, kendi belgelerinde OP'nin EXACT durumunu kullandığından paylaşmanın ilginç olduğunu düşünüyorum - aşağıdaki kendi kodum değil, mevcut immutable-js belgelerinden çekildi:

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 } 

Seq'in başka özellikleri olmadığı için ("Seq, ara koleksiyonlar oluşturmadan tüm üst düzey toplama yöntemlerinin (harita ve filtre gibi) kullanımını etkin bir şekilde zincirlemelerine izin veren tembel bir işlemi açıklar") ve diğer bazı değiştirilemez js verilerinin yapılar da işi oldukça verimli bir şekilde yapabilir.

Bu yöntemi kullanan herkes elbette npm install immutabledokümanları okumak zorunda kalacak ve okumak isteyebilir:

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

DÜZENLEME: Daha yeni JavaScript özelliklerini kullanmanın standart yolu -

const identity = x =>
  x

const omap = (f = identity, o = {}) =>
  Object.fromEntries(
    Object.entries(o).map(([ k, v ]) =>
      [ k, f(v) ]
    )
  )

oBazı nesneler nerede ve fharitalama fonksiyonunuz. Ya da, bir fonksiyon a -> bve tip değerleri olan bir nesne verildiğinde , tip değerleri olan abir nesne ürettiğimizi söyleyebiliriz b. Yalancı tip imza olarak -

// omap : (a -> b, { a }) -> { b }

Orijinal cevap, mapReducedönüşümümüzü farklı bir şekilde düşünmemizi sağlayan güçlü bir birleştiriciyi göstermek için yazılmıştır.

1. m, eşleme fonksiyonu - size gelen elemanı daha önce dönüştürme şansı verir…
2. r, azaltma işlevi - bu işlev, akümülatörü eşlenen öğenin sonucu ile birleştirir

sezgisel, mapReduce doğrudan takabileceğimiz yeni bir redüktör oluşturur Array.prototype.reduce. Ama daha da önemlisi, bizim nesne funktoru uygulanmasını uygulayabilir omapnesne Monoid kullanılarak açıkça, Object.assignve {}.

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 }

Programın aslında yazmamız gereken tek kısmının haritalama uygulamasının kendisinin olduğuna dikkat edin -

k => ({ [k]: f (o[k]) })

Bilinen bir nesne ove bazı anahtarlar göz önüne alındığında k, hesaplanan özelliği anahtarın değerinin kçağrılması sonucu olan bir nesne oluşturur .fo[k]

mapReduceİlk soyutlama yaparsak, sıralama potansiyeline bir göz atarız.oreduce

// oreduce : (string * a -> string * b, b, { a }) -> { b }
const oreduce = (f = identity, r = null, o = {}) =>
  Object
    .keys (o)
    .reduce
      ( mapReduce
          ( k => [ k, o[k] ]
          , f
          )
      , r
      )

// omap : (a -> b, {a}) -> {b}
const omap = (f = identity, o = {}) =>
  oreduce
    ( mapReduce
        ( ([ k, v ]) =>
            ({ [k]: f (v) })
        , Object.assign
        )
    , {}
    , o
    )

Her şey aynı şekilde çalışır, ancak omapşimdi daha yüksek bir düzeyde tanımlanabilir. Tabii ki yeni Object.entries, bunu aptalca gösteriyor, ancak egzersiz hala öğrenci için önemlidir.

mapReduceBurada tam potansiyeli görmeyeceksiniz , ancak bu cevabı paylaşıyorum çünkü kaç yere uygulanabileceğini görmek ilginç. Nasıl türetildiği ve faydalı olabileceği diğer yollarla ilgileniyorsanız, lütfen bu cevaba bakın .

@Amberlamps cevabını temel alan bir yardımcı program işlevi (yorum olarak çirkin görünüyordu)

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

ve kullanımı:

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}

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 }

Yanıtım büyük ölçüde buradaki en yüksek puan alan cevaba dayanıyor ve umarım herkes anlar (GitHub'mda da aynı açıklamaya sahip). Bu yüzden harita ile ilişkilendirilmesi işe yarıyor:

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

İşlevin amacı, bir dizi döndürmeden tüm nesneler (nesneler ve diziler) için kullanılabilir bir yöntemi kullanarak bir nesneyi alıp nesnenin orijinal içeriğini değiştirmektir. JS içindeki hemen hemen her şey bir nesnedir ve bu nedenle miras boru hattının aşağısında yer alan unsurlar, potansiyel olarak teknik olarak satırdakiler için kullanılabilir olanları kullanabilir (ve bunun tersi).

Bunun nedeni, varolan bir nesneyi değiştirmek yerine bir dizinin açık veya örtük RETURN'unu sağladığınız GEREKTİREN bir diziyi döndüren .map işlevlerinden kaynaklanmaktadır. Aslında, nesnenin bir dizi olduğunu düşünmek için programı kandırırsınız, bu da harita işlevini, tek tek tuşların ilişkili olduğu değerlerle hareket ederek kullanmanıza izin verir (aslında yanlışlıkla diziler döndürdüm, ancak düzelttim). Normal anlamda bir geri dönüş olmadığı sürece, orijinal nesne stili bozulmadan oluşturulan ve programlandığı gibi değiştirilen bir dizi olmayacaktır.

Bu özel program, görüntüler adı verilen bir nesneyi alır ve anahtarlarının değerlerini alır ve başka bir işlevde kullanmak üzere URL etiketlerini ekler. Orijinal bu:

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

... ve değiştirildi:

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

Nesnenin orijinal yapısı bozulmadan bırakılır ve geri dönüş olmadığı sürece normal özellik erişimine izin verilir. Normal gibi bir dizi döndürmeyin ve her şey iyi olacak. Amaç, orijinal değerleri (görüntüler [anahtar]) başka bir şeye değil, istenen şeye YENİDEN TASARLAMAKTIR. Bildiğim kadarıyla, dizi çıktısını önlemek için görüntü [anahtar] REASSIGNMENT olmalı ve bir dizi döndürmek için örtük veya açık bir istek (değişken ataması bunu yapar ve benim için ileri geri aksaklık) vardı.

DÜZENLE:

Orijinal nesneyi değiştirmekten kaçınmak için yeni nesne oluşturma ile ilgili diğer yöntemini ele alacak (ve yanlışlıkla çıkış olarak bir dizi oluşturmayı önlemek için yeniden atama gerekli görünmektedir). Bu işlevler ok sözdizimini kullanır ve ileride kullanmak üzere yeni bir nesne oluşturmak istiyorsanız kullanılır.

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

var newImages = mapper(images, (value) => value);

Bu işlevlerin çalışma şekli şöyledir:

mapFn daha sonra eklenecek işlevi alır (bu durumda (değer) => değer) ve mapFn (burada olduğu gibi döndürdüğünüz değeri değiştirirseniz iki ile çarpılır) olarak saklanan her şeyi döndürür obj) [anahtar],

ve sonra sonuçtaki anahtarla ilişkili orijinal değeri yeniden tanımlar [key] = mapFn (obj) [key]

ve sonuçta gerçekleştirilen işlemi döndürür (.reduce fonksiyonunun sonunda başlatılan parantez içindeki akümülatör).

Tüm bunlar seçilen nesne üzerinde yapılıyor ve STILL, döndürülen bir dizi için örtük bir istek OLAMAZ ve sadece değerleri anlayabildiğim kadarıyla yeniden atadığımda çalışır. Bu, bazı zihinsel jimnastik gerektirir, ancak yukarıda görülebileceği gibi kod satırlarını azaltır. Çıktı tam olarak aşağıda görüldüğü gibidir:

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

Bunun NUMARA OLMAYANLAR ile çalıştığını unutmayın. MapFN işlevinde DEĞERİ GERİ DÖNDÜREN HERHANGİ BİR nesneyi çoğaltabilirsiniz.

İlk fonksiyon soruyu cevaplar. Bir harita oluşturur.

İkinci işlev harita oluşturmaz. Bunun yerine, varolan nesnedeki özellikleri kullanarak döngüler hasOwnProperty(). Bu harita alternatifi bazı durumlarda daha iyi bir çözüm olabilir.

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


//creates a map (answers question, but function below is 
//much better in some situations)
var newObject = {};
makeMap();    
function makeMap() {
    for (var k in myObject) {
        var value = myObject[k];
        newObject[k] = value * value;
    }
    console.log(newObject); //mapped array
}


//Doesn't create a map, just applies the function to
//a specific property using existing data
function getValue(key) {
  for (var k in myObject) {
    if (myObject.hasOwnProperty(key)) {
      var value = myObject[key]
      return value * value; //stops iteration
    }
  }
}

Input: <input id="input" value="" placeholder="a, b or c"><br>
Output:<input id="output"><br>
<button onclick="output.value=getValue(input.value)" >Get value</button>

mapSadece değerleri değil, aynı zamanda tuşları da pingle ilgileniyorsanız , yazdım Object.map(valueMapper, keyMapper), bu böyle davranıyor:

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 }

Anahtarları da değiştirmeye izin veren bir sürüm gerekiyordu (@Amberlamps ve @ yonatanmn cevaplara dayalı);

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

Düzenleme: başlangıç ​​nesnesine {} geçmek için hafif bir değişiklik. [] Olmasına izin verir (tuşlar tamsayı ise)

Özellikle tek bir nesne için diziler için kullandığım işlevi kullanmak istedim ve basit tutmak istedim. Bu benim için çalıştı:

var mapped = [item].map(myMapFunction).pop();

OP'nin tam olarak ne istediğine daha yakından yanıt vermek için OP bir nesne ister:

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

bir harita yöntemine sahip olmak myObject.map,

aşağıdaki gibi kullanılacak Array.prototype.map benzeri:

newObject = myObject.map (işlev (değer; etiket) {
    dönüş değeri * değer;
});
// newObject artık {'a': 1, 'b': 4, 'c': 9}

En iyi imho ( " sorulana yakın " + "ES {5,6,7} gereksiz yere gerekli değil " olarak ölçülür ) yanıtı:

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

Yukarıdaki kod, yalnızca son ECMAScript sürümlerinde bulunan dil özelliklerini kullanmaktan kasıtlı olarak kaçınır. Yukarıdaki kod ile sorun lke bu çözülebilir:

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

Bazıları tarafından kaşlarını çatmış olmasının yanı sıra, çözümü prototip zincirine böyle eklemek de mümkün olacaktır.

Object.prototype.map = function(callback)
{
  var result = {};
  for(var property in this){
    if(this.hasOwnProperty(property)){
      result[property] = callback(this[property],property,this);
    }
  }
  return result;
}

Dikkatli bir gözetim ile yapıldığında map, diğer nesnelerin (yani, Array'ın map) herhangi bir kötü etkisi olmamalı ve darbe yöntemi olmamalıdır .

İlk olarak, Object.entries (koleksiyon) kullanarak HTMLCollection öğenizi dönüştürün. O zaman şimdi .map yöntemini kullanabilirsiniz.

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

referans https://medium.com/@js_tut/calling-javascript-code-on-multiple-div-elements-without-the-id-attribute-97ff6a50f31

MapEntries işlevini tanımlayın.

mapEntries, nesnedeki her girişte value, key ve object parametreleriyle çağrılan bir geri çağırma işlevi alır. Yeni bir değer döndürmelidir.

mapEntries, geri çağrıdan döndürülen yeni değerlerle yeni bir nesne döndürmelidir.

Object.defineProperty(Object.prototype, 'mapEntries', {
  enumerable: false,
  value: function (mapEntriesCallback) {
    return Object.fromEntries(
      Object.entries(this).map(
        ([key, value]) => [key, mapEntriesCallback(value, key, this)]
      )
    )
  }
})


// Usage example:

var object = {a: 1, b: 2, c: 3}
var newObject = object.mapEntries(value => value * value)
console.log(newObject)
//> {a: 1, b: 4, c: 9}

Düzenleme: Önceki bir sürüm, bunun numaralandırılabilir bir özellik olmadığını belirtmedi

Hey, yardımcı olabilecek küçük bir haritacı işlevi yazdı.

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

Farklı bir bakış, derin nesneler üzerinde de çalışabilen özel bir json stringify işlevi kullanmaktır. Yine de sunucuya json olarak göndermeyi düşünüyorsanız bu yararlı olabilir

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

Muafiyetleri azaltmak için sadece dizeleri ele alıyorum:

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

TypeScript'te Nesne Eşleyici

Kullandığım örneklere benzer Object.fromEntriesgibi bu bir , ama yine de onlar kullanımı çok kolay değildir. Kullanan Object.keysve sonra cevaplar keyaslında gerekli olmayabilir birden fazla arama yapıyor.

Bir yoktu diledi Object.mapfonksiyonu, ama biz kendi Our oluşturup diyebilirsiniz objectMaphem değiştirme yeteneği ile keyve value:

Kullanım (JavaScript):

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

Kod (TypeScript):

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

TypeScript kullanmıyorsanız , JavaScript kodunu almak için yukarıdaki kodu TypeScript Playground'a kopyalayın .

Ayrıca, nedeni koymak keySelectorsonravalSelector parametre listesine , isteğe bağlı olmasıdır.

* Bazı krediler Alexander-Mills'in cevabına gidiyor .

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}]}]}

Bu işlev, özyinelemeli olarak nesneye ve nesnelerin dizilerine gider. Tanımsız döndürülürse öznitelikler silinebilir