web-dev-qa-db-ja.com

(配列ではなく)オブジェクトのマップ関数

私はオブジェクトがあります:

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にはこれが欲しいので、ブラウザ間の問題は気にしません。)

761
Randomblue

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': 1, 'b': 4, 'c': 6 }

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

Array.prototype.reduce は、前の値を現在の値といくらかマージすることによって、配列を単一の値に縮小します。チェーンは空のオブジェクト{}によって初期化されます。繰り返しごとに、その平方を値として、myObjectの新しいキーが追加されます。

1110
Amberlamps

プレーンなJS( ES6/ES2015 )で即時変数割り当てを行う1つのライナーはどうですか?

スプレッド演算子 および 計算されたキー名を使用する 構文:

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

入れ子になったオブジェクト を再帰的に 関数型スタイルにマッピングしたい場合は、次のようにします。

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


継承されたプロパティとプロトタイプチェーン

まれに、継承されたオブジェクトのプロパティを prototype-chain に保持するclass-likeオブジェクトをマップする必要があるかもしれません。そのような場合、Object.keys()継承プロパティを列挙しないため、Object.keys()は機能しません。 inheritedプロパティをマッピングする必要がある場合は、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

しかし、私を支持して継承を避けてください。 :-)

205
Rotareti

ネイティブメソッドはありませんが、 lodash#mapValues は見事に機能します。

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

書くのはとても簡単です:

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コンテキストを設定することもできます。

_ edit _ - オブジェクトのmapという名前の既存のプロパティと衝突しないように、Object.prototypeの使用を削除するように変更しました。

55
Alnitak

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は、オブジェクト自身の列挙可能なプロパティのみを含む配列を返すので、hasOwnPropertyチェックを伴うfor..inループのように動作します。

21
Mattias Buelens

これはまっすぐな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;
});

しかし、このmap関数をObjectに追加しても安全です。単にObject.prototypeに追加しないでください。

Object.map = ... // fairly safe
Object.prototype.map ... // not ok
15
Alexander Mills

オブジェクトを配列にマッピングするための検索と回答を探しているので、結果としてこのページを入手しました。あなたが私と同じ答えを探してここに来た場合は、ここにあなたが配列にマッピングしてオブジェクト化する方法があります。

Mapを使ってオブジェクトから新しい配列を返すことができます。

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

受け入れられた答えには2つの欠点があります。

  • これは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を変更することなく、omap内でoを変更できるようになりました。
  • mapmapの変換を実行するので、行B oの戻り値は無視されます。この副作用はomap内にとどまり、親のスコープには表示されないため、完全に受け入れられます。

これは最速の解決策ではなく、宣言的で再利用可能な解決策です。これは、1行で簡潔ですが読みにくいものと同じ実装です。

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

補遺 - オブジェクトがデフォルトで反復可能ではないのはなぜですか?

ES2015はイテレータとイテラブルプロトコルを規定しました。しかし、オブジェクトはまだ反復可能ではないのでマッピングできません。 その理由はデータとプログラムレベルが混在しているためです

10
user6445533

最高のパフォーマンスを実現します。

オブジェクトがそれほど頻繁には変更されないが頻繁に繰り返される必要がある場合は、ネイティブMapをキャッシュとして使用することをお勧めします。

// 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からのものなので、入力してください https://github.com/es-shims/Object.entries IEの場合は動作しません。

8
Pawel

最小バージョン(es6):

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

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}
5
Haritsinh Gohil

この答えは強力なコンビネータmapReduceを示すために書き直されました。

  1. m mapping 関数 - 前に入力要素を変換する機会を与えます…
  2. r reduction 関数 - この関数は、アキュムレータとマップされた要素の結果を組み合わせます。

直感的に、mapReduceArray.prototype.reduceに直接接続できる新しいリデューサーを作成します。しかしもっと重要なことは、オブジェクトモノイドObject.assign{}を利用することで、オブジェクトファンクタの実装omapをわかりやすく実装できることです。

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

私たちが実際に書かなければならなかったプログラムの唯一の部分がマッピング実装自体であることに注意してください -

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

つまり、既知のオブジェクトoといくつかのキーkを指定して、オブジェクトを作成し、そのプロパティkは、キーの値o [k]に対してfを呼び出した結果です。

最初にmapReduceを抽象化すると、oreduceのシーケンス処理の可能性を垣間見ることができます。

const oreduce = (o, f = first, acc = {}) =>
  Object.keys (o)
    .reduce ( mapReduce ( k => [ k, o[k] ]
                        , f
                        )
            , acc
            )

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

すべてが同じように機能しますが、omapはより高いレベルで定義できます。もちろん新しいObject.entriesはこれを馬鹿げた感じにしますが、それでも運動は学習者にとって重要です。

ここではmapReduceの潜在的な可能性を完全には見ることができませんが、この答えを共有します。なぜなら、それが適用できる場所の数を調べるのは興味深いからです。それがどのようにして導き出されるのか、そして他の方法でそれが役に立つことに興味があるなら、 この答え を見てください。

4
user633183

map functionObject.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;
});
3
whitneyit

値だけでなくキーもmappingに興味があるなら、私は 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 }
2
MattiSG

私はこれをやろうとしているグーグル検索の最初の項目としてこれに遭遇しました、そして私がこれを最近見つけた他のフォークのために私が共有するnpmパッケージ不変を使用する解決策を考えます。

Immutableは自分のドキュメントで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には、中間コレクションを作成しないことで(mapやfilterなどの)すべての高次のコレクションメソッドを効率的に使用することを可能にする怠惰な操作が記述されている")がある構造体も非常に効率的に仕事をするかもしれません。

このメソッドを使う人はもちろんnpm install immutableを持っていなければならず、ドキュメントを読みたいかもしれません:

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

2
alex.h

@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}
2
yonatanmn
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 }
2
Dmitry Ragozin

具体的には、単一のオブジェクトの配列に使用していたのと同じ機能を使用したいと思い、それを単純にしたいと思いました。これは私のために働いた:

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

順序付けられたペアを通した単純なfor-inループを使うことができます。 hasOwnProperty()を使用したのは、あなたがあなたのオブジェクトに対して3つのプロパティ(値を持つ)を作成したからです。最初の方法はマップを作成しません。その代わりに、それは単にその機能を単一の要素に適用するだけであり、それは多くの状況において実行を非常に速くすることができる。

2番目の方法では、最初の方法と同じ方法でマップを作成しますが、他の方法よりもおそらくかなり遅くなります。

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>
1
Victor Stoddard

ちょっと助けになるかもしれない小さなマッパー関数を書きました。

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

まず、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

1
Jimubao

私は(@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"}
}

編集:開始オブジェクト{}に渡すためのわずかな変更。 []にすることができます(キーが整数の場合)

1
Symmetric

JavaScriptは新しいObject.fromEntriesメソッドを手に入れました。

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

説明

上記のコードはObjectを入れ子の配列([[<key>,<value>], ...])に変換します。 Object.fromEntriesは配列をオブジェクトに変換します。

このパターンの素晴らしいところは、マッピング中にオブジェクトキーを簡単に考慮できるようになったことです。

ドキュメンテーション

ブラウザのサポート

Object.fromEntriesは現在 これらのブラウザ/エンジン でのみサポートされていますが、それにもかかわらず利用可能なpolyfillがあります(例えば @ babel/polyfill )。

1
HaNdTriX

TypeScriptのオブジェクトマッパー

this one のようなObject.fromEntriesを使用する例は好きですが、それでも、それらは非常に使いやすいものではありません。 Object.keysを使用してからkeyを検索する回答は、実際には不要な複数の検索を実行しています。

Object.map関数があればよかったのですが、独自の関数を作成して、objectMapkeyの両方を変更できる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 ' answer に帰属します。

1
orad

私の回答はここで最も評価の高い回答に基づいているので、みんなが理解していることを願います(私のGitHubでも同じ説明があります)。これが彼のmapによる推進が機能する理由です。

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

この関数の目的は、オブジェクトを取得し、配列を返さずにすべてのオブジェクト(オブジェクトと配列を問わず)で使用可能なメソッドを使用してオブジェクトの元の内容を変更することです。 JS内のほとんどすべてがオブジェクトであり、そのため継承のパイプラインのさらに下にある要素は潜在的に技術的に利用可能な要素を使用することができます(そしてその逆もあります)。

これが機能するのは、既存のオブジェクトを単純に変更するのではなく、.map関数が配列を返すことが原因で、配列の明示的または暗黙的なRETURNを指定する必要があるためです。 Object.keysを使用して個々のキーが関連付けられている値に基づいて機能するmap関数を使用できるようにするために、プログラムを基本的にだますことができます(実際には誤って配列を返しましたが修正しました)。通常の意味で戻り値がない限り、元のオブジェクトstilをそのまま使用してプログラムされたとおりに変更された配列は作成されません。

この特定のプログラムは、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') 
};

戻り値がない限り、オブジェクトの元の構造はそのまま残り、通常のプロパティアクセスが可能です。通常のようにそれが配列を返さないようにしてください。そうすればすべてうまくいくでしょう。目標は、元の値(images [key])を必要なものに再割り当てすることです。私の知る限りでは、配列の出力を防ぐために、画像のREASSIGNMENT [key]や、配列を返すための暗黙的または明示的な要求がないようにしなければなりません。

編集:

元のオブジェクトを変更しないように、新しいオブジェクトの作成に関する彼の他の方法に対処しようとしています(誤って出力として配列を作成しないようにするには、再割り当てが依然として必要と思われます)。これらの関数は矢印構文を使用しており、将来使用するために単に新しいオブジェクトを作成したい場合に使用します。

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)を取り、そのキーの値としてそこに格納されているもの(または、戻り値を変更した場合は2倍)をmapFnに返します( obj)[key]、

次に、result [key] = mapFn(obj)[key]のキーに関連付けられている元の値を再定義します。

そしてresult(.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関数で値を単純に戻すことによって、任意のオブジェクトを複製できます。

1
Andrew Ramshaw

関数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}
0
Arye Eidelman

私は免除を減らすために文字列のみを処理します:

Object.keys(params).map(k => typeof params[k] == "string" ? params[k] = params[k].trim() : null);
0
Idan
settings = {
  message_notification: {
    value: true,
    is_active: true,
    slug: 'message_notification',
    title: 'Message Notification'
  },
  support_notification: {
    value: true,
    is_active: true,
    slug: 'support_notification',
    title: 'Support Notification'
  },
};

let keys = Object.keys(settings);
keys.map(key=> settings[key].value = false )
console.log(settings)
0
Akın Köker

ES6:

Object.prototype.map = function(mapFunc) {
    return Object.keys(this).map((key, index) => mapFunc(key, this[key], index));
}

ES2015:

Object.prototype.map = function (mapFunc) {
    var _this = this;

    return Object.keys(this).map(function (key, index) {
        return mapFunc(key, _this[key], index);
    });
};

ノードでテストします。

> a = {foo: "bar"}
{ foo: 'bar' }
> a.map((k,v,i) => v)
[ 'bar' ]
0
Malix Ren