ProgramingTip

객체에 대한지도 기능 (배열 대신)

bestdevel 2020. 9. 28. 09:36
반응형

객체에 대한지도 기능 (배열 대신)

개체가 있습니다.

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 }

자바 확장 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값의 두 배로 추가됩니다.

일반 JS ( ES6 / ES2015 ) 에서 실행 인 변수 할당을 사용하는 한 라이너는 어떻습니까?

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

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

jsbin

감소를 사용하는 다른 버전 :

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

함수 스타일 에서 중첩 된 객체를 재귀 적으로 매핑하려는 다음 과 같이 할 수 있습니다.

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(([key, val]) => [k, v * v]));


상속 된 속성 및 유형 체인 :

드물지만 프로토-type 체인 에 상속 된 object-의 속성을 보유 하는 클래스 류 object- 를 매핑해야 우리 할 수도 있습니다 . 경우 이러한 상속 된 속성을 열거하지 않기 때문에 작동하지 않습니다 . 상속 된 속성 을 매핑 해야하는 경우 .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 }

주의 : 버전을 사용이하면 메서드 this와 마찬가지로 콜백에 , 대한 컨텍스트 를 (선택적으로) 설정할 수도 있습니다 Array.

편집 - 배열에 Object.prototype명명 map된 기존 특성과 충돌하지 않도록 제거 .

당신이 사용할 수있는 다음과 키 반환 된 배열 이상 :Object.keysforEach

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

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

객체 클래스를 방해하지 않는 좀 더 정교한 것을 시도하십시오.

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.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
  • 의 변형을 수행 map하기 때문에 라인 B 의 반환 값은 무시 합니다. 부작용이 은 상위 범위 내에 남아 있고 상위 범위에서 보이지 않기 때문에 완전히 허용됩니다.mapoomap

이것은 가장 빠른 솔루션은입니다. 다음은 한 줄로 간결하지만 가독성이 어떤 것과 동일한 구현입니다.

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)

설명

위의 코드는 중첩을 [[<key>,<value>], ...]매핑 할 수 있는 중첩 배열 ( ) 로 변환합니다 . Object.fromEntries배열을 다시 개체로 변환합니다.

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

선적 서류 비치

브라우저 지원

Object.fromEntries현재 브라우저 / 엔진에서 선택할 수 있습니다. 사용 가능한 polyfill이 있습니다 (예 : @ babel / polyfill ).

최대 성능을 위해.

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

// 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합니다 .

최소 버전 (es6) :

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

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

Javascript (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예제 와 같은 방법과 같은 다른 루프를 사용할 수 있습니다 .

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

편집 : 최신 JavaScript 기능을 사용하는 표준 방법은 다음과 같습니다.

const identity = x =>
  x

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

o어떤 개체와 f매핑 기능은 어디에 있습니까? 또는의 함수 a -> b와 type 값을 가진 객체가 주어지면 type 값을 a가진 객체를 생성 할 수 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]) })

object-알려진 o와 키가 주어지면 object-를 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여기 에서 모든 잠재력을 잠재력이 있다고 생각합니다. 그것이 파생되는 방법과 유용한 방법에 관심이있는 권한이있는 방법 을 참조하십시오 .

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

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

나는 선택하는 배우기 위해 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/

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

편집 : 시작 개체 {}에 약간의 변경. [] 허용 (키가 정수인 경우)

정렬 된 쌍을 통해 간단한 for-in 루프를 사용할 수 있습니다. hasOwnProperty()개체에 대해 세 가지 속성 (값 포함)을 만들었 기 때문에 사용했습니다 . 첫 번째 방법은지도를 생성하지 않습니다. 대신 단일 요소에 함수를 적용하기 만하면 여러 상황에서 실행 속도를 크게 사용할 수 있습니다.

두 번째 방법은 첫 번째 방법과 방식으로 다른지도를 생성하지만 여기에있는 다른 답변보다 상당히 느릴 수 있습니다.

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

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

//creates a map (answers question, but above function is 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
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>

먼저 Object.entries (컬렉션)를 사용하여 HTMLCollection을 변환하십시오. 그런 다음 반복 가능 이제 .map 메소드를 사용할 수 있습니다.

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

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

내 모두 응답은 주로 여기에서 가장 높은 등급의 응답을 기반으로하며 이해하기를 바랍니다. (내 GitHub는 동일한 설명이 있음). 이것이 그가지도를 사용하는 이유입니다.

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

이 함수의 목적은 배열을 반환하지 않고 모든 객체 (객체 및 배열 유사)에 사용할 수있는 메서드를 사용하여 객체를 갖는 객체의 원래 내용을 수정하는 것입니다. JS 내의 거의 모든 것이 객체라고, 그 이유 때문에 상속 라인 아래 항목에있는 요소는 강력한 상위 클래스 라인 아래 항목에 존재하는 요소를 기술적으로 사용할 수 있습니다 (반대로 표시됨).

그것이 작동하는 이유는 존재하는 객체를 수정하는 대신 배열의 명시 적 또는 암시 적 반환을 제공해야하는 배열을 반환하는 .map 함수 때문입니다. 기본적으로 Object.keys를 사용하여 배열이라고 생각하도록 프로그램을 속여서 식별 키가 값에 대해 매핑 기능 사용할 수 있습니다 (실제로는 실수로 배열을 반환했지만 수정했습니다). 생성 된 의미에서 반환되지 않는 프로그래밍 된대로 수정 된 배열은 생성됩니다.

이 특정 프로그램은 이미지라는 객체를 취하고 키 값을 취하고 내에서 사용할 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은 나중에 추가 할 함수 (이 경우 (값) => 값)를 취하고 mapFn ()에서 해당 키에 대한 값 (또는 값을 변경하는 경우 2를 곱한 값)으로 모든 것을 반환합니다. obj) [키],

그런 다음 결과 [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 함수에서 값을 간단히 반환하여 모든 개체를 복제 할 수 있습니다.

TypeScript의 개체 매퍼

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

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

사용법 (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' }

코드 (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의 답변 으로 이동합니다 .

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

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

저는 특히 배열에 사용했던 것과 동일한 함수를 사용하고 싶고 싶었습니다. 이것은 나를 위해 일했습니다.

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

더 이익 은 무엇에 응답에 정확하게 영업 이익은 요청, 영업 이익은 개체를 원하는 :

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

지도 방법을 가지고 myObject.map,

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

newObject = myObject.map (함수 (값, 레이블) {
    반환 값 * 값;
});
// 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.keys(params).map(k => typeof params[k] == "string" ? params[k] = params[k].trim() : null);

함수 mapEntries를 정의하십시오.

mapEntries는 고유 한 변수 값, 키 및 사용하여 함수의 각 항목에서 호출되는 콜백을받습니다. 새 값을 반환해야합니다.

mapEntries는 반환 된 새 값과 함께 새 개체를 반환해야합니다.

Object.prototype.mapEntries = function(mapEntriesCB) {
    return Object.fromEntries(Object.entries(this).map(
        ([key, value]) => [key, mapEntriesCB(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}


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

const result = _.transform(orig, (r, v, k) => r[k.trim()] = v * 2);

console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

new _.transform ()을 사용 하여 개체를 변환하십시오 .

객체를 새 배열 또는 배열에 매핑하는 간단한 솔루션을 찾는 사람이 소유권 :

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

이는 모든 매핑 기능에 대해 작동하지 않을 것입니다.

참고 URL : https://stackoverflow.com/questions/14810506/map-function-for-objects-instead-of-arrays

반응형

'ProgramingTip' 카테고리의 다른 글

C ++에서 다른 생성자 (생성자 체인)에서 생성 할 위험이없는 할 수 있습니까?  (0) 2020.09.28
Node.js에서 다른 파일의 함수를 어떻게 "포함"합니까?  (0) 2020.09.28
Git에서 파일을 언 스테이징하는 두 가지 방법이있는 이유는 무엇입니까?  (0) 2020.09.27
Python 클래스는 객체를 상속합니다.  (0) 2020.09.27
정적지도를 초기화해야합니까?  (0) 2020.09.27

'ProgramingTip'의 다른글

  • 현재글객체에 대한지도 기능 (배열 대신)

관련글

댓글

티스토리툴바