객체 대신지도 함수 (배열 대신)

나는 물건을 가지고있다 :

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

Array.prototype.map다음과 같이 사용되는 것과 유사한 기본 방법을 찾고 있습니다.

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

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

JavaScript에는 map객체에 대한 기능이 있습니까? (Node.JS에서 이것을 원하므로 크로스 브라우저 문제는 신경 쓰지 않습니다.)

이 네이티브 없다 map받는 Object객체,하지만 어떻게 이것에 대해 :

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 }

그러나 다음을 사용하여 쉽게 객체를 반복 할 수 있습니다 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 }

최신 정보

많은 사람들이 이전 방법이 새 객체를 반환하지 않고 객체 자체에서 작동한다고 언급합니다. 그 문제에 대해 새 객체를 반환하고 원래 객체를 그대로 두는 다른 솔루션을 추가하고 싶었습니다.

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이전 값을 전류와 약간 병합하여 배열을 단일 값으로 줄입니다. 체인은 빈 객체로 초기화됩니다 {}. 반복 할 때마다 myObject키 값이 두 배로 새 키 가 추가됩니다.

최신 정보

새로운 ES6 기능으로보다 우아한 표현 방법이 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)) 

일반 JS ( ES6 / ES2015 ) 에서 즉시 변수를 할당하는 하나의 라이너는 어떻습니까?

사용 만들기 확산 연산자 및 계산 된 키 이름 구문 :

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

jsbin

reduce를 사용하는 다른 버전 :

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

jsbin

함수로서의 첫 번째 예 :

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

중첩 된 객체를 매핑 할 경우 재귀 A의 기능적인 스타일, 그것은 다음과 같이 수행 할 수 있습니다 :

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

또는 더 필수적으로 다음과 같이하십시오.

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 부터 다음과 같이 Object.entries()대신 사용할 수 있습니다 Object.keys().

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

ES2019가 도입 Object.fromEntries()되어 더욱 단순화 되었습니다 .

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

상속 된 속성과 프로토 타입 체인 :

드문 경우지만 프로토 타입 체인 에서 상속 된 객체의 속성을 보유 하는 클래스와 유사한 객체 를 매핑해야 할 수도 있습니다 . 상속 된 속성을 열거하지 않기 때문에 이러한 경우 에는 작동 하지 않습니다 . 상속 된 속성 을 매핑해야하는 경우을 사용해야합니다 .Object.keys()Object.keys()for (key in myObj) {...}

다음은 다른 객체의 속성을 상속하는 객체의 예 Object.keys()와 이러한 시나리오에서 작동하지 않는 방법 입니다.

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

그러나 부탁을 들어 주시고 상속을 피하십시오 . :-)

기본 메소드는 없지만 lodash # mapValues 는 훌륭하게 작업을 수행합니다.

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

하나를 작성하는 것은 매우 쉽습니다.

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

예제 코드 :

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

NB :이 버전 this에서는 Array메소드 와 마찬가지로 콜백 의 컨텍스트를 설정 (선택 사항) 할 수도 있습니다 .

EDIT- 객체의 Object.prototype이름이 기존 속성과 충돌하지 않도록의 사용을 제거하도록 변경되었습니다 map.

반환 된 키 배열을 사용한 Object.keys다음 사용할 수 있습니다 forEach.

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

또는보다 모듈 방식으로 :

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.keys객체 자체의 열거 가능한 속성 만 포함하는 배열 을 반환하므로 검사가 있는 for..in루프 처럼 동작 hasOwnProperty합니다.

이것은 바로 bs이며 JS 커뮤니티의 모든 사람들이 그것을 알고 있습니다. 이 기능 이 있어야 합니다.

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}

다음은 순진한 구현입니다.

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

항상 직접 구현 해야하는 것은 매우 성가신 일입니다.)

좀 더 정교하고 Object 클래스를 방해하지 않는 것을 원하면 다음을 시도하십시오.

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

그러나이 맵 함수를 Object에 추가하는 것이 안전합니다. Object.prototype에는 추가하지 마십시오.

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

객체를 배열에 매핑하기 위해 찾고 답하기 위해 여기에 왔으며 결과적 으로이 페이지를 얻었습니다. 내가 가진 것과 똑같은 답을 찾고 여기 온다면 배열에 매핑하고 객체를 지정하는 방법입니다.

map을 사용하여 객체에서 다음과 같이 새 배열을 반환 할 수 있습니다.

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

허용되는 답변에는 두 가지 단점이 있습니다.

• Array.prototype.reduce감소는 복합 유형의 구조를 변경하는 수단을 의미하므로 잘못 사용 됩니다.이 경우에는 발생하지 않습니다.
• 특히 재사용 할 수 없습니다

ES6 / ES2015 기능적 접근

모든 기능은 카레 형식으로 정의되어 있습니다.

// 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 o에서 재 할당됩니다. Javascript는 공유 를 통해 참조 값 을 전달하므로 얕은 사본 o이 생성됩니다. 이제 상위 범위에서 변경하지 않고 o내부 에서 변경할 수 있습니다.omapo
• B 행 map의 반환 값은 map의 돌연변이를 수행 하기 때문에 무시 o됩니다. 이 부작용 omap은 부모 범위 내에 있고 부모 범위에 표시되지 않으므로 완전히 허용됩니다.

이것은 가장 빠른 솔루션이 아니라 선언적이고 재사용 가능한 솔루션입니다. 다음은 한 줄 간결하고 동일하지만 읽기 쉽지 않은 구현입니다.

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

부록-왜 객체가 기본적으로 반복되지 않는가?

ES2015는 반복자와 반복 가능한 프로토콜을 지정했습니다. 그러나 객체는 여전히 반복 할 수 없으므로 매핑 할 수 없습니다. 그 이유는 데이터와 프로그램 수준의 혼합 때문입니다 .

JavaScript는 새로운 Object.fromEntries방법을 얻었습니다 .

예

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)

설명

위의 코드는 Object를 중첩 배열 ( [[<key>,<value>], ...]) 로 변환합니다 . Object.fromEntriesArray를 다시 Object로 변환합니다.

이 패턴의 멋진 점은 이제 매핑하는 동안 객체 키를 쉽게 고려할 수 있다는 것입니다.

선적 서류 비치

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

브라우저 지원

Object.fromEntries는 현재 이러한 브라우저 / 엔진 에서만 지원 되지만 사용 가능한 폴리 필이 있습니다 (예 : @ babel / polyfill ).

최소 버전 (es6) :

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

최고의 성능을 위해.

객체가 자주 바뀌지 않지만 자주 반복 해야하는 경우 기본 맵을 캐시로 사용하는 것이 좋습니다.

// 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는 이미 Chrome, Edge, Firefox 및 베타 Opera에서 작동하므로 미래를 보장하는 기능입니다. ES7에서 왔 으므로 작동하지 않는 IE의 경우 https://github.com/es-shims/Object.entries polyfill하십시오 .

당신이 사용할 수있는 map및 방법을 forEach배열에하지만 당신은 그것을 사용하려는 경우 Object당신은 다음과 같은 트위스트와 함께 사용할 수 있습니다 :

자바 스크립트 (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 사용

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}

또는 $.each아래 예제 와 같이 method와 같은 다른 루프를 사용할 수 있습니다 .

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

에 map function존재하지 않지만 Object.prototype그렇게 모방 할 수 있습니다.

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

나는 이것을 시도하는 것을 배우려고 Google 검색에서 첫 번째 항목으로 왔으며, 최근에 내가 찾은 솔루션을 찾는 다른 folsk와 공유 할 것이라고 생각했는데, npm 패키지는 불변입니다.

불변이 자체 문서에서 OP의 정확한 상황을 사용하기 때문에 공유하는 것이 재미 있다고 생각합니다. 다음은 내 코드가 아니지만 현재 immutable-js 문서에서 가져온 것입니다.

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는 다른 속성을 가지고 있지 않습니다 ( "Seq는 지연 연산을 설명하여 중간 컬렉션을 생성하지 않음으로써 모든 상위 컬렉션 메서드 (예 : 맵 및 필터)을 효율적으로 체인 사용하도록 허용합니다") 및 일부 다른 불변의 JS 데이터가 있음 구조는 또한 작업을 매우 효율적으로 수행 할 수 있습니다.

이 방법을 사용하는 사람은 물론 npm install immutable문서를 읽어야 할 수도 있습니다.

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

편집 : 최신 JavaScript 기능을 사용하는 정식 방법은-

const identity = x =>
  x

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

o일부 객체는 어디에 있으며 f매핑 기능입니다. 또는 from의 함수 a -> b와 type 값을 a가진 객체를 지정하면 type 값을 가진 객체를 생성 할 수 b있습니다. 의사 유형 서명으로-

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

원래의 답변은 강력한 결합기를 보여주기 위해 작성되었으므로 mapReduce변환을 다른 방식으로 생각할 수 있습니다

1. m, 매핑 기능 – 이전에 들어오는 요소를 변환 할 수있는 기회를 제공합니다.
2. r, 축소 기능 –이 기능은 누산기를 매핑 된 요소의 결과와 결합합니다.

직관적으로에 mapReduce연결할 수있는 새로운 감속기를 만듭니다 Array.prototype.reduce. 하지만 더 중요한 것은, 우리는 우리의 목적 펑터 구현을 구현할 수있는 omap객체 모노 이드을 이용하여 노골적으로, Object.assign그리고 {}.

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 }

실제로 작성해야하는 프로그램의 유일한 부분은 매핑 구현 자체입니다.

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

알려진 객체 o와 일부 키가 주어지면 객체를 k생성하고 계산 된 속성 k이 f키 값 을 호출 한 결과입니다 o[k].

우리 mapReduce가 처음 추상화하면 시퀀싱 잠재력을 엿볼 수 있습니다.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
    )

모든 것이 동일하게 작동하지만 omap더 높은 수준에서 정의 할 수 있습니다. 물론 새로운 Object.entries것은 이것을 바보처럼 보이게하지만 운동은 여전히 ​​학습자에게 중요합니다.

mapReduce여기에서 가능한 모든 잠재력을 볼 수는 없지만 적용 가능한 장소 수를 보는 것이 흥미 롭기 때문에이 답변을 공유합니다. 그것이 파생되는 방법과 그것이 유용 할 수있는 다른 방법에 관심이 있다면, 이 답변을 참조하십시오 .

@ Amberlamps 답변을 기반으로 유틸리티 기능이 있습니다.

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

사용은 다음과 같습니다.

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 }

내 답변은 대부분 여기에서 가장 높은 등급의 답변을 기반으로하며 모든 사람들이 이해하기를 바랍니다 (GitHub에 대해서도 동일한 설명이 있음). 이것이 그의 맵에 대한 그의 노력이 작동하는 이유입니다.

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

이 함수의 목적은 배열을 반환하지 않고 모든 객체 (객체 및 배열 모두)에 사용 가능한 방법을 사용하여 객체를 가져 와서 객체의 원래 내용을 수정하는 것입니다. JS 내의 거의 모든 것이 객체이므로, 상속 파이프 라인의 아래 부분에있는 요소는 기술적으로 사용할 수있는 요소를 기술적으로 사용할 수 있습니다.

이것이 작동하는 이유는 .map 함수가 단순히 기존 객체를 수정하는 대신 배열의 명시 적 또는 암시 적 RETURN을 제공해야하는 배열을 반환하기 때문입니다. Object.keys를 사용하여 객체가 배열이라고 생각하도록 기본적으로 프로그램을 속입니다.이 기능을 사용하면 개별 키와 관련된 값 (실제로 배열을 반환했지만 수정했습니다)에 따라 맵 기능을 사용할 수 있습니다. 정상적인 의미로 복귀하지 않는 한 원래 객체를 그대로 사용하여 생성되고 프로그래밍 된대로 수정 된 배열은 없습니다.

이 특정 프로그램은 images라는 객체를 가져와 해당 키의 값을 가져 와서 다른 함수 내에서 사용하기 위해 url 태그를 추가합니다. 오리지널은 이쪽

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

... 그리고 수정되었습니다 :

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

개체의 원래 구조는 그대로 유지되며 반환되지 않는 한 정상적인 속성 액세스가 가능합니다. 일반처럼 배열을 반환하지 않으면 모든 것이 정상입니다. 목표는 원래 값 (이미지 [키])을 원하는 것이 아닌 다른 것으로 재지 정하는 것입니다. 내가 아는 한, 배열 출력을 방지하기 위해 이미지 [키]를 다시 할당하고 배열을 반환하기위한 암시 적 또는 명시 적 요청이 없었습니다 (변수 할당 이이 작업을 수행하고 나에게 반짝이고있었습니다).

편집하다:

원래 객체 수정을 피하기 위해 새로운 객체 생성과 관련된 다른 방법을 다룰 것입니다 (그리고 실수로 배열을 출력으로 생성하는 것을 피하기 위해 재 할당이 여전히 필요한 것으로 보입니다). 이 함수는 화살표 구문을 사용하며 나중에 사용하기 위해 단순히 새 객체를 만들려는 경우에 사용됩니다.

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

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

이러한 기능의 작동 방식은 다음과 같습니다.

mapFn은 나중에 추가 할 함수 (이 경우 (value) => value)를 가져와 mapFn에서 해당 키의 값으로 저장된 값을 반환합니다 (또는 반환 값을 변경 한 경우 2를 곱한 값). obj) [키],

그런 다음 result [key] = mapFn (obj) [key]에서 키와 연관된 원래 값을 재정의합니다.

결과 (.reduce 함수의 끝에서 시작된 괄호 안에있는 누산기)에서 수행 된 작업을 반환합니다.

이 모든 것은 선택된 객체에서 수행되고 있으며 여전히 반환 된 배열에 대한 암시 적 요청을 할 수 없으며 내가 알 수있는 한 값을 다시 할당 할 때만 작동합니다. 이를 위해서는 약간의 정신 체조가 필요하지만 위에서 볼 수 있듯이 필요한 코드 줄이 줄어 듭니다. 출력은 아래에서 볼 수있는 것과 정확히 동일합니다.

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

NON-NUMBERS에서 작동했습니다. mapFN 함수에서 값을 간단히 반환하여 모든 객체를 복제 할 수 있습니다.

첫 번째 함수는 질문에 대답합니다. 지도를 만듭니다.

두 번째 함수는지도를 만들지 않습니다. 대신을 사용하여 기존 객체의 속성을 반복합니다 hasOwnProperty(). 이지도 대안은 일부 상황에서 더 나은 솔루션 일 수 있습니다.

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>

map값뿐만 아니라 키도 핑에 관심이 있다면 다음 Object.map(valueMapper, keyMapper)과 같이 작동합니다.

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 }

@Amberlamps 및 @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"}
}

편집 : 시작 객체 {}에 전달하기 위해 약간의 변경. 키가 정수인 경우 [] 일 수 있습니다.

특히 단일 객체의 배열에 사용했던 것과 동일한 기능을 사용하고 싶었고 간단하게 유지하고 싶었습니다. 이것은 나를 위해 일했다 :

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

OP가 요청한 내용에보다 정확하게 대응하기 위해 OP는 다음과 같은 개체를 원합니다.

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

지도 메소드 myObject.map를 사용하려면

다음과 같이 사용되는 Array.prototype.map과 유사합니다.

newObject = myObject.map (함수 (값, 레이블) {
    반환 값 * value;
});
// newObject는 이제 { 'a': 1, 'b': 4, 'c': 9}

이럴 최고 ( "에 측면에서 측정 묻는 것과 가까운 대답이 될 것"+ "는 더 ES {5,6,7}이 불필요하게 필요하지 않습니다") :

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

위의 코드는 의도적으로 최신 ECMAScript 버전에서만 사용 가능한 언어 기능을 사용하지 않습니다. 위의 코드를 사용하면 다음과 같이 문제를 해결할 수 있습니다.

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.prototype.map = function(callback)
{
  var result = {};
  for(var property in this){
    if(this.hasOwnProperty(property)){
      result[property] = callback(this[property],property,this);
    }
  }
  return result;
}

주의 깊게 감독 할 때 어떤 영향도 미치지 않아야 map하며 다른 객체의 방법 (예 : Array 's map)에 영향을 미치지 않아야 합니다.

먼저 Object.entries (collection)를 사용하여 HTMLCollection을 변환하십시오. 그런 다음 .map 메소드를 사용할 수있는 반복 가능합니다.

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

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

함수 mapEntries를 정의하십시오.

mapEntries는 매개 변수 값, 키 및 객체와 함께 객체의 각 항목에서 호출되는 콜백 함수를 사용합니다. 새로운 값을 반환해야합니다.

mapEntries는 콜백에서 반환 된 새 값으로 새 객체를 반환해야합니다.

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}

편집 : 이전 버전에서는 열거 가능한 속성이 아니라고 지정하지 않았습니다.

그는 도움이 될만한 작은 매퍼 함수를 ​​작성했습니다.

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

또 다른 방법은 깊은 객체에서도 작동 할 수있는 사용자 정의 json stringify 함수를 사용하는 것입니다. 어쨌든 json으로 서버에 게시하려는 경우 유용 할 수 있습니다

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

TypeScript의 객체 매퍼

내가 사용하는 예처럼 Object.fromEntries같은 이 하나 ,하지만 여전히 그들이 매우 쉽게 사용할 수 없습니다. 를 사용한 Object.keys다음 조회하는 답변 key은 실제로 필요하지 않은 여러 조회를 수행하고 있습니다.

나는이 였으면 Object.map기능을하지만, 우리는 자신의 우리를 만들고 호출 할 수 있습니다 objectMap모두 수정할 수있는 기능 key과 value:

사용법 (자바 스크립트) :

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

코드 (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를 사용하지 않는 경우 TypeScript Playground 에서 위의 코드를 복사 하여 JavaScript 코드를 얻으십시오.

또한, 내가 넣어 이유 keySelector후에 valSelector는 선택 사항이기 때문에 매개 변수 목록이다.

* 일부 크레딧은 alexander-mills의 답변으로 이동합니다 .

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

이 함수는 객체와 객체의 배열을 재귀 적으로 수행합니다. 정의되지 않은 상태로 반환되면 속성을 삭제할 수 있습니다