web-dev-qa-db-ja.com

2つのJavaScriptオブジェクトのプロパティを動的に結合する方法

実行時に2つの(非常に単純な)JavaScriptオブジェクトをマージできるようにする必要があります。例えば、私はしたいのですが。

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }

obj1.merge(obj2);

//obj1 now has three properties: food, car, and animal

誰かがこのためのスクリプトを持っていますか、またはこれを行うための方法で建てられたのを知っていますか?再帰は必要ありませんし、関数をマージする必要もありません。フラットオブジェクトのメソッドだけです。

2159
JC Grubbs

ECMAScript 2018標準メソッド

object spread :を使います。

let merged = {...obj1, ...obj2};

/** There's no limit to the number of objects you can merge.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = {...obj1, ...obj2, ...obj3};

ECMAScript 2015(ES6)標準方式

/* For the case in question, you would do: */
Object.assign(obj1, obj2);

/** There's no limit to the number of objects you can merge.
 *  All objects get merged into the first object. 
 *  Only the object in the first argument is mutated and returned.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);

MDN JavaScriptリファレンス を参照)


ES5以前のメソッド

for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }

これは単にobj2のすべての属性をobj1に単純に追加することになることに注意してください。あなたがまだ変更されていないobj1を使いたいのなら、これはあなたが望むものではないかもしれません。

プロトタイプのいたるところでクラップするフレームワークを使用しているのであれば、hasOwnPropertyのようなチェックをする必要がありますが、そのコードは99%のケースで機能します。

関数の例:

/**
 * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
 * @param obj1
 * @param obj2
 * @returns obj3 a new object based on obj1 and obj2
 */
function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}
2312
John Millikin

jQueryにもこのためのユーティリティがあります: http://api.jquery.com/jQuery.extend/

JQueryのドキュメントから抜粋したものです。

// Merge options object into settings object
var settings = { validate: false, limit: 5, name: "foo" };
var options  = { validate: true, name: "bar" };
jQuery.extend(settings, options);

// Now the content of settings object is the following:
// { validate: true, limit: 5, name: "bar" }

上記のコードは 既存のオブジェクト という名前のsettingsを変更します。


どちらの引数も変更せずに 新しいオブジェクト を作成したい場合は、次のようにします。

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

/* Merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);

// The content of settings variable is now the following:
// {validate: true, limit: 5, name: "bar"}
// The 'defaults' and 'options' variables remained the same.
1149
Avdi

Harmony ECMAScript 2015(ES6)Object.assign を指定します.

Object.assign(obj1, obj2);

現在のブラウザサポートは 改善 ですが、サポートしていないブラウザ用に開発している場合は polyfill を使用できます。

323
NanoWizard

私は、オブジェクトのプロパティをマージするためのコードを探して、ここに行きました。しかし、再帰的マージのためのコードがなかったので、私はそれを自分で書きました。ともかく、jQueryの拡張は再帰的なBTWなのでしょうか。

(現在、コードはObject.prototypeを使用しません:)

コード

/*
* Recursively merge properties of two objects 
*/
function MergeRecursive(obj1, obj2) {

  for (var p in obj2) {
    try {
      // Property in destination object set; update its value.
      if ( obj2[p].constructor==Object ) {
        obj1[p] = MergeRecursive(obj1[p], obj2[p]);

      } else {
        obj1[p] = obj2[p];

      }

    } catch(e) {
      // Property in destination object not set; create it and set its value.
      obj1[p] = obj2[p];

    }
  }

  return obj1;
}

o1 = {  a : 1,
        b : 2,
        c : {
          ca : 1,
          cb : 2,
          cc : {
            cca : 100,
            ccb : 200 } } };

o2 = {  a : 10,
        c : {
          ca : 10,
          cb : 20, 
          cc : {
            cca : 101,
            ccb : 202 } } };

o3 = MergeRecursive(o1, o2);

のようにオブジェクトo3を作成します

o3 = {  a : 10,
        b : 2,
        c : {
          ca : 10,
          cb : 20,
          cc : { 
            cca : 101,
            ccb : 202 } } };
241
Markus

underscore.js s extend_ method はワンライナーでこれを行います。

_.extend({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}
172
Industrial

JQuery extend()と同様に、 AngularJS にも同じ機能があります。

// Merge the 'options' object into the 'settings' object
var settings = {validate: false, limit: 5, name: "foo"};
var options  = {validate: true, name: "bar"};
angular.extend(settings, options);
84
AndreasE

今日はオブジェクトをマージする必要がありますが、この質問(および回答)が私を大きく助けてくれました。私はいくつかの答えを試してみましたが、どれも自分のニーズに合わなかったので、いくつかの答えを組み合わせ、自分で何かを追加して新しいマージ機能を思いついたのです。ここにあります:

var merge = function() {
    var obj = {},
        i = 0,
        il = arguments.length,
        key;
    for (; i < il; i++) {
        for (key in arguments[i]) {
            if (arguments[i].hasOwnProperty(key)) {
                obj[key] = arguments[i][key];
            }
        }
    }
    return obj;
};

いくつかの使用例

var t1 = {
    key1: 1,
    key2: "test",
    key3: [5, 2, 76, 21]
};
var t2 = {
    key1: {
        ik1: "hello",
        ik2: "world",
        ik3: 3
    }
};
var t3 = {
    key2: 3,
    key3: {
        t1: 1,
        t2: 2,
        t3: {
            a1: 1,
            a2: 3,
            a4: [21, 3, 42, "asd"]
        }
    }
};

console.log(merge(t1, t2));
console.log(merge(t1, t3));
console.log(merge(t2, t3));
console.log(merge(t1, t2, t3));
console.log(merge({}, t1, { key1: 1 }));
63
Emre Erkan

オブジェクトスプレッドプロパティを使用できます - 現在ステージ3のECMAScriptの提案.

const obj1 = { food: 'pizza', car: 'ford' };
const obj2 = { animal: 'dog' };

const obj3 = { ...obj1, ...obj2 };
console.log(obj3);

46
Jaime Asm

与えられた解は代入する前にfor..inループのsource.hasOwnProperty(property)をチェックするように修正されるべきです - さもなければ、あなたは全体のプロトタイプチェーンのプロパティをコピーすることになってしまいます。

39
Christoph

1行のコードでN個のオブジェクトのプロパティをマージする

Object.assignメソッドはECMAScript 2015(ES6)規格の一部であり、まさにあなたが必要とすることを行います。 (IEはサポートされていません)

var clone = Object.assign({}, obj);

Object.assign()メソッドは、列挙可能なすべての独自プロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。

続きを読む...

polyfill は古いブラウザをサポートします。

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}
37
Eugene Tiurin

次の2つはおそらく良い出発点です。 lodashには、これらの特別なニーズに合わせたカスタマイザ機能もあります。

_.extendhttp://underscorejs.org/#extend ) 
_.mergehttps://lodash.com/docs#merge

31
appsmatics

ちなみに、あなたがしていることは、マージではなく、プロパティの上書きです。

これがJavaScriptオブジェクト領域が実際にマージされる方法です。オブジェクト自身ではないtoオブジェクト内のキーのみがfromによって上書きされます。他のすべては 実際にマージされた になります。 to[n] is undefinedなどの場合にのみ存在するものを上書きしないように、もちろんこの動作を変更することができます。

var realMerge = function (to, from) {

    for (n in from) {

        if (typeof to[n] != 'object') {
            to[n] = from[n];
        } else if (typeof from[n] == 'object') {
            to[n] = realMerge(to[n], from[n]);
        }
    }
    return to;
};

使用法:

var merged = realMerge(obj1, obj2);
23
Andreas Linden

これが私の刺し傷です

  1. ディープマージをサポート
  2. 引数を変更しません
  3. 任意の数の引数を取ります
  4. オブジェクトのプロトタイプを拡張しません
  5. 他のライブラリには依存しません( jQueryMooToolsUnderscore.js など)
  6. HasOwnPropertyのチェックを含みます
  7. 短いです :)

    /*
        Recursively merge properties and return new object
        obj1 &lt;- obj2 [ &lt;- ... ]
    */
    function merge () {
        var dst = {}
            ,src
            ,p
            ,args = [].splice.call(arguments, 0)
        ;
    
        while (args.length > 0) {
            src = args.splice(0, 1)[0];
            if (toString.call(src) == '[object Object]') {
                for (p in src) {
                    if (src.hasOwnProperty(p)) {
                        if (toString.call(src[p]) == '[object Object]') {
                            dst[p] = merge(dst[p] || {}, src[p]);
                        } else {
                            dst[p] = src[p];
                        }
                    }
                }
            }
        }
    
       return dst;
    }
    

例:

a = {
    "p1": "p1a",
    "p2": [
        "a",
        "b",
        "c"
    ],
    "p3": true,
    "p5": null,
    "p6": {
        "p61": "p61a",
        "p62": "p62a",
        "p63": [
            "aa",
            "bb",
            "cc"
        ],
        "p64": {
            "p641": "p641a"
        }
    }
};

b = {
    "p1": "p1b",
    "p2": [
        "d",
        "e",
        "f"
    ],
    "p3": false,
    "p4": true,
    "p6": {
        "p61": "p61b",
        "p64": {
            "p642": "p642b"
        }
    }
};

c = {
    "p1": "p1c",
    "p3": null,
    "p6": {
        "p62": "p62c",
        "p64": {
            "p643": "p641c"
        }
    }
};

d = merge(a, b, c);


/*
    d = {
        "p1": "p1c",
        "p2": [
            "d",
            "e",
            "f"
        ],
        "p3": null,
        "p5": null,
        "p6": {
            "p61": "p61b",
            "p62": "p62c",
            "p63": [
                "aa",
                "bb",
                "cc"
            ],
            "p64": {
                "p641": "p641a",
                "p642": "p642b",
                "p643": "p641c"
            }
        },
        "p4": true
    };
*/
21
Paul Spaulding

Object.assign()

ECMAScript 2015(ES6)

これはECMAScript 2015(ES6)標準の一部である新しいテクノロジです。このテクノロジの仕様は完成しましたが、さまざまなブラウザでの使用状況と実装状況については互換性テーブルを確認してください。

Object.assign()メソッドは、列挙可能なすべての独自プロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。ターゲットオブジェクトを返します。

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.
17
Reza Roshan

それほど複雑ではないオブジェクトの場合は、 _ json _ を使用できます。

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog', car: 'chevy'}
var objMerge;

objMerge = JSON.stringify(obj1) + JSON.stringify(obj2);

// {"food": "pizza","car":"ford"}{"animal":"dog","car":"chevy"}

objMerge = objMerge.replace(/\}\{/, ","); //  \_ replace with comma for valid JSON

objMerge = JSON.parse(objMerge); // { food: 'pizza', animal: 'dog', car: 'chevy'}
// Of same keys in both objects, the last object's value is retained_/

この例では、 "} {"出現してはいけませんが文字列内にあることに注意してください。

17
Algy

これを行うための最善の方法は、Object.definePropertyを使用して列挙できない適切なプロパティを追加することです。 

この方法でも、Object.prototype.extendでプロパティを作成した場合に新たに作成される「extend」を取得しなくても、オブジェクトのプロパティを繰り返し処理することができます。

うまくいけば、これが役立ちます。

 Object.defineProperty(Object.prototype、 "extend"、{
列挙可能:false、
値:function(from){
 var props = Object.getOwnPropertyNames (from); 
 var dest = this; 
 props.forEach(function(name){
 if(dest in name){
 var destination = Object。 getOwnPropertyDescriptor(from、name); 
 Object.defineProperty(dest、name、destination); 
} 
}); 
これを返してください; 
 } 
}); 

それがうまくいったら、次のことができます。

 var obj = {
 name: 'stack'、
 finish: 'overflow' 
} 
 var replacement = {
名前: 'stock' 
}; 
 
 obj.extend(置き換え); 

私はちょうどそれについてのブログ記事をここに書いた: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js

15
David Coallier

単純にjQueryを使うことができますextend

var obj1 = { val1: false, limit: 5, name: "foo" };
var obj2 = { val2: true, name: "bar" };

jQuery.extend(obj1, obj2);

obj1obj1obj2のすべての値を含みます

14
Dinusha

deepmerge on GitHub というライブラリがあります。これはスタンドアロンで、 npm とbowerパッケージマネージャの両方から利用できます。

答えからコードをコピーペーストするのではなく、これを使用または改善したいと思います。

14
antitoxic

プロトタイプ これがあります:

Object.extend = function(destination,source) {
    for (var property in source)
        destination[property] = source[property];
    return destination;
}

obj1.extend(obj2)はあなたが望むことをするでしょう。

11
ephemient

だれでも Google Closure Library を使用している場合

goog.require('goog.object');
var a = {'a': 1, 'b': 2};
var b = {'b': 3, 'c': 4};
goog.object.extend(a, b);
// Now object a == {'a': 1, 'b': 3, 'c': 4};

同様のヘルパー関数が配列に存在します

var a = [1, 2];
var b = [3, 4];
goog.array.extend(a, b); // Extends array 'a'
goog.array.concat(a, b); // Returns concatenation of array 'a' and 'b'
10
Paweł Szczur

David Coallierの方法を拡張しました。

  • 複数のオブジェクトをマージする可能性を追加しました
  • 深いオブジェクトをサポート
  • オーバーライドパラメータ(最後のパラメータがブール値の場合に検出されます)

Overrideがfalseの場合、プロパティは上書きされませんが新しいプロパティが追加されます。

使用法: obj.merge(Merges ... [、override]);

これが私のコードです:

Object.defineProperty(Object.prototype, "merge", {
    enumerable: false,
    value: function () {
        var override = true,
            dest = this,
            len = arguments.length,
            props, merge, i, from;

        if (typeof(arguments[arguments.length - 1]) === "boolean") {
            override = arguments[arguments.length - 1];
            len = arguments.length - 1;
        }

        for (i = 0; i < len; i++) {
            from = arguments[i];
            if (from != null) {
                Object.getOwnPropertyNames(from).forEach(function (name) {
                    var descriptor;

                    // nesting
                    if ((typeof(dest[name]) === "object" || typeof(dest[name]) === "undefined")
                            && typeof(from[name]) === "object") {

                        // ensure proper types (Array rsp Object)
                        if (typeof(dest[name]) === "undefined") {
                            dest[name] = Array.isArray(from[name]) ? [] : {};
                        }
                        if (override) {
                            if (!Array.isArray(dest[name]) && Array.isArray(from[name])) {
                                dest[name] = [];
                            }
                            else if (Array.isArray(dest[name]) && !Array.isArray(from[name])) {
                                dest[name] = {};
                            }
                        }
                        dest[name].merge(from[name], override);
                    } 

                    // flat properties
                    else if ((name in dest && override) || !(name in dest)) {
                        descriptor = Object.getOwnPropertyDescriptor(from, name);
                        if (descriptor.configurable) {
                            Object.defineProperty(dest, name, descriptor);
                        }
                    }
                });
            }
        }
        return this;
    }
});

例とテストケース:

function clone (obj) {
    return JSON.parse(JSON.stringify(obj));
}
var obj = {
    name : "trick",
    value : "value"
};

var mergeObj = {
    name : "truck",
    value2 : "value2"
};

var mergeObj2 = {
    name : "track",
    value : "mergeObj2",
    value2 : "value2-mergeObj2",
    value3 : "value3"
};

assertTrue("Standard", clone(obj).merge(mergeObj).equals({
    name : "truck",
    value : "value",
    value2 : "value2"
}));

assertTrue("Standard no Override", clone(obj).merge(mergeObj, false).equals({
    name : "trick",
    value : "value",
    value2 : "value2"
}));

assertTrue("Multiple", clone(obj).merge(mergeObj, mergeObj2).equals({
    name : "track",
    value : "mergeObj2",
    value2 : "value2-mergeObj2",
    value3 : "value3"
}));

assertTrue("Multiple no Override", clone(obj).merge(mergeObj, mergeObj2, false).equals({
    name : "trick",
    value : "value",
    value2 : "value2",
    value3 : "value3"
}));

var deep = {
    first : {
        name : "trick",
        val : "value"
    },
    second : {
        foo : "bar"
    }
};

var deepMerge = {
    first : {
        name : "track",
        anotherVal : "wohoo"
    },
    second : {
        foo : "baz",
        bar : "bam"
    },
    v : "on first layer"
};

assertTrue("Deep merges", clone(deep).merge(deepMerge).equals({
    first : {
        name : "track",
        val : "value",
        anotherVal : "wohoo"
    },
    second : {
        foo : "baz",
        bar : "bam"
    },
    v : "on first layer"
}));

assertTrue("Deep merges no override", clone(deep).merge(deepMerge, false).equals({
    first : {
        name : "trick",
        val : "value",
        anotherVal : "wohoo"
    },
    second : {
        foo : "bar",
        bar : "bam"
    },
    v : "on first layer"
}));

var obj1 = {a: 1, b: "hello"};
obj1.merge({c: 3});
assertTrue(obj1.equals({a: 1, b: "hello", c: 3}));

obj1.merge({a: 2, b: "mom", d: "new property"}, false);
assertTrue(obj1.equals({a: 1, b: "hello", c: 3, d: "new property"}));

var obj2 = {};
obj2.merge({a: 1}, {b: 2}, {a: 3});
assertTrue(obj2.equals({a: 3, b: 2}));

var a = [];
var b = [1, [2, 3], 4];
a.merge(b);
assertEquals(1, a[0]);
assertEquals([2, 3], a[1]);
assertEquals(4, a[2]);


var o1 = {};
var o2 = {a: 1, b: {c: 2}};
var o3 = {d: 3};
o1.merge(o2, o3);
assertTrue(o1.equals({a: 1, b: {c: 2}, d: 3}));
o1.b.c = 99;
assertTrue(o2.equals({a: 1, b: {c: 2}}));

// checking types with arrays and objects
var bo;
a = [];
bo = [1, {0:2, 1:3}, 4];
b = [1, [2, 3], 4];

a.merge(b);
assertTrue("Array stays Array?", Array.isArray(a[1]));

a = [];
a.merge(bo);
assertTrue("Object stays Object?", !Array.isArray(a[1]));

a = [];
a.merge(b);
a.merge(bo);
assertTrue("Object overrides Array", !Array.isArray(a[1]));

a = [];
a.merge(b);
a.merge(bo, false);
assertTrue("Object does not override Array", Array.isArray(a[1]));

a = [];
a.merge(bo);
a.merge(b);
assertTrue("Array overrides Object", Array.isArray(a[1]));

a = [];
a.merge(bo);
a.merge(b, false);
assertTrue("Array does not override Object", !Array.isArray(a[1]));

私のequalsメソッドはここで見つけることができます: JavaScriptでのオブジェクト比較

8
gossi

MooTools に、 Object.merge() :があります。

Object.merge(obj1, obj2);
8
philfreo

オブジェクトのマージは簡単です。

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog', car: 'BMW' }
var obj3 = {a: "A"}


var mergedObj = Object.assign(obj1,obj2,obj3)

console.log(mergedObj);

オブジェクトは右から左にマージされます。つまり、右にあるオブジェクトと同じプロパティを持つオブジェクトは上書きされます。

この例では、obj2.carobj1.carをオーバーライドします。

8
Legends

Ext JS 4では次のようになります。

var mergedObject = Ext.Object.merge(object1, object2)

// Or shorter:
var mergedObject2 = Ext.merge(object1, object2)

merge(object):Objectを参照してください。

7
Mark

Markus ' および vsync' answer に基づいて、これは拡張バージョンです。この関数は任意の数の引数を取ります。 _ dom _ ノードにプロパティを設定するために使用でき、値の詳細コピーを作成します。ただし、最初の引数は参照によって与えられます。

DOMノードを検出するには、isDOMNode()関数を使用します(スタックオーバーフローの質問JavaScript isDOM - JavaScriptオブジェクトがDOMオブジェクトかどうかをどうやって確認しますか?を参照)。

Opera 11、Firefox 6、 Internet Explorer 8 およびGoogle Chrome 16でテストされています。

コード

function mergeRecursive() {

  // _mergeRecursive does the actual job with two arguments.
  var _mergeRecursive = function (dst, src) {
    if (isDOMNode(src) || typeof src !== 'object' || src === null) {
      return dst;
    }

    for (var p in src) {
      if (!src.hasOwnProperty(p))
        continue;
      if (src[p] === undefined)
        continue;
      if ( typeof src[p] !== 'object' || src[p] === null) {
        dst[p] = src[p];
      } else if (typeof dst[p]!=='object' || dst[p] === null) {
        dst[p] = _mergeRecursive(src[p].constructor===Array ? [] : {}, src[p]);
      } else {
        _mergeRecursive(dst[p], src[p]);
      }
    }
    return dst;
  }

  // Loop through arguments and merge them into the first argument.
  var out = arguments[0];
  if (typeof out !== 'object' || out === null)
    return out;
  for (var i = 1, il = arguments.length; i < il; i++) {
    _mergeRecursive(out, arguments[i]);
  }
  return out;
}

いくつかの例

HTML要素のinnerHTMLとスタイルを設定する

mergeRecursive(
  document.getElementById('mydiv'),
  {style: {border: '5px solid green', color: 'red'}},
  {innerHTML: 'Hello world!'});

配列とオブジェクトを結合します。 undefinedは左側の配列/オブジェクトの値を保存するために使用できることに注意してください。

o = mergeRecursive({a:'a'}, [1,2,3], [undefined, null, [30,31]], {a:undefined, b:'b'});
// o = {0:1, 1:null, 2:[30,31], a:'a', b:'b'}

JavaScriptオブジェクト以外の引数(nullを含む)は無視されます。最初の引数を除いて、DOMノードも破棄されます。 new String()のように作成された文字列は、実際にはオブジェクトであることに注意してください。

o = mergeRecursive({a:'a'}, 1, true, null, undefined, [1,2,3], 'bc', new String('de'));
// o = {0:'d', 1:'e', 2:3, a:'a'}

2つのオブジェクトを(2つのうちのどちらにも影響を与えずに)新しいオブジェクトにマージしたい場合は、最初の引数として{}を指定してください。

var a={}, b={b:'abc'}, c={c:'cde'}, o;
o = mergeRecursive(a, b, c);
// o===a is true, o===b is false, o===c is false

編集 (ReaperSoonによる):

配列もマージする

function mergeRecursive(obj1, obj2) {
  if (Array.isArray(obj2)) { return obj1.concat(obj2); }
  for (var p in obj2) {
    try {
      // Property in destination object set; update its value.
      if ( obj2[p].constructor==Object ) {
        obj1[p] = mergeRecursive(obj1[p], obj2[p]);
      } else if (Array.isArray(obj2[p])) {
        obj1[p] = obj1[p].concat(obj2[p]);
      } else {
        obj1[p] = obj2[p];
      }
    } catch(e) {
      // Property in destination object not set; create it and set its value.
      obj1[p] = obj2[p];
    }
  }
  return obj1;
}
6
Snoozer Man

うわー..これは私が複数のページで見た最初のStackOverflow投稿です。別の「答え」を追加したことをお詫び申し上げます

このメソッドはES5以前 - に対応していますES6に対処するための他の多くの回答があります。 

arguments プロパティを利用した"deep"オブジェクトのマージは見られませんでした。これが私の答えです - compact recursive 、無制限のオブジェクト引数を渡すことができます。

function extend() {
    for (var o = {}, i = 0; i < arguments.length; i++) {
        // if (arguments[i].constructor !== Object) continue;
        for (var k in arguments[i]) {
            if (arguments[i].hasOwnProperty(k)) {
                o[k] = arguments[i][k].constructor === Object ? extend(o[k] || {}, arguments[i][k]) : arguments[i][k];
            }
        }
    }
    return o;
}

コメントアウトされている部分はオプションです。オブジェクトではない渡された引数を単にスキップします(エラーを防ぎます)。 

例:

extend({
    api: 1,
    params: {
        query: 'hello'
    }
}, {
    params: {
        query: 'there'
    }
});

// outputs {api: 1, params: {query: 'there'}}

この答えは海に落ちただけです...

6
Logan

Underscore.js を使用すると、オブジェクトの配列をマージすることができます。

var arrayOfObjects = [ {a:1}, {b:2, c:3}, {d:4} ];
_(arrayOfObjects).reduce(function(memo, o) { return _(memo).extend(o); });

その結果、

Object {a: 1, b: 2, c: 3, d: 4}
5
devmao

140byt.esコレクション からのバージョンは最小スペース内でタスクを解決しているので、この目的のために試す価値があることを言及する価値があります。

コード:

function m(a,b,c){for(c in b)b.hasOwnProperty(c)&&((typeof a[c])[0]=='o'?m(a[c],b[c]):a[c]=b[c])}

あなたの目的のための使用法:

m(obj1,obj2);

これが オリジナルの要旨 です。

4
pagid

あなたはlodashの defaultsDeep を使うべきです

_.defaultsDeep({ 'user': { 'name': 'barney' } }, { 'user': { 'name': 'fred', 'age': 36 } });
// → { 'user': { 'name': 'barney', 'age': 36 } }
4
Raphaël

私は純粋なJavaScriptにある以下を使います。それは一番右の引数から始まり、それらを最初の引数まで結合します。戻り値はありません。最初の引数だけが変更され、左端のパラメータ(最初のものを除く)がプロパティに対して最も高い重みを持ちます。

var merge = function() {
  var il = arguments.length;

  for (var i = il - 1; i > 0; --i) {
    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key)) {
        arguments[0][key] = arguments[i][key];
      }
    }
  }
};
3
Etherealone

ES2018/TypeScript:多くの答えは問題ありませんが、2つのオブジェクトをマージする必要がある場合、この問題に対するよりエレガントなソリューションを思いつきました重複するオブジェクトキーを上書きせずに

私の関数は無制限のオブジェクト数も受け入れて、関数の引数としてマージします。

(ここではTypeScript表記を使用しています。プレーンJavaScriptを使用している場合は、関数引数の:object[]タイプを自由に削除してください)。

const merge = (...objects: object[]) => {
  return objects.reduce((prev, next) => {
    Object.keys(prev).forEach(key => {
      next[key] = { ...next[key], ...prev[key] }
    })
    return next
  })
}
3
Paweł Otto
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }

// result
result: {food: "pizza", car: "ford", animal: "dog"}

jQuery.extend()を使う - リンク

// Merge obj1 & obj2 to result
var result1 = $.extend( {}, obj1, obj2 );

_.merge()を使用する - リンク

// Merge obj1 & obj2 to result
var result2 = _.merge( {}, obj1, obj2 );

_.extend()を使用する - リンク

// Merge obj1 & obj2 to result
var result3 = _.extend( {}, obj1, obj2 );

Object.assign()を使用するECMAScript 2015(ES6) - リンク

// Merge obj1 & obj2 to result
var result4 = Object.assign( {}, obj1, obj2 );

すべての出力

obj1: { animal: 'dog' }
obj2: { food: 'pizza', car: 'ford' }
result1: {food: "pizza", car: "ford", animal: "dog"}
result2: {food: "pizza", car: "ford", animal: "dog"}
result3: {food: "pizza", car: "ford", animal: "dog"}
result4: {food: "pizza", car: "ford", animal: "dog"}
3
TinhNQ

function extend(o, o1, o2){
    if( !(o instanceof Object) ) o = {};

    copy(o, o1);
    if( o2 )
        copy(o, o2)

    function isObject(obj) {
        var type = Object.prototype.toString.call(obj);
        return obj === Object(obj) && type != '[object Array]' && type != '[object Function]';
    };

    function copy(a,b){
        // copy o2 to o
        for( var key in b )
            if( b.hasOwnProperty(key) ){
                if( isObject(b[key]) ){
                    if( !isObject(a[key]) )
                        a[key] = Object.assign({}, b[key]); 
                    else copy(a[key], b[key])
                }
                else
                    a[key] = b[key];
            }
    }

    return o;
};


var o1 = {a:{foo:1}, b:1},
    o2 = {a:{bar:2}, b:[1], c:()=>{}},
    newMerged = extend({}, o1, o2);
    
console.log( newMerged )
console.log( o1 )
console.log( o2 )

2
vsync

gossiのDavid Coallierの方法の拡張

次の2行を確認してください。

from = arguments[i];
Object.getOwnPropertyNames(from).forEach(function (name) {

Nullオブジェクトに対して "from"をチェックする必要があります。たとえば、以前にサーバー上で作成された Ajax レスポンスからのオブジェクトをマージする場合、オブジェクトプロパティの値は "null"になります。その場合、上記のコードは次のようなエラーを生成します。

"from"は有効なオブジェクトではありません

そのため、例えば、 "... Object.getOwnPropertyNames(from).forEach ..."関数を "if(from!= null){...}"でラップすると、このエラーは発生しなくなります。

2
user909278

つかいます:

//Takes any number of objects and returns one merged object
var objectMerge = function(){
    var out = {};
    if(!arguments.length)
        return out;
    for(var i=0; i<arguments.length; i++) {
        for(var key in arguments[i]){
            out[key] = arguments[i][key];
        }
    }
    return out;
}

それはでテストされました:

console.log(objectMerge({a:1, b:2}, {a:2, c:4}));

その結果、

{ a: 2, b: 2, c: 4 }
2
RobKohr

私のやり方:

function mergeObjects(defaults, settings) {
    Object.keys(defaults).forEach(function(key_default) {
        if (typeof settings[key_default] == "undefined") {
            settings[key_default] = defaults[key_default];
        } else if (isObject(defaults[key_default]) && isObject(settings[key_default])) {
            mergeObjects(defaults[key_default], settings[key_default]);
        }
    });

    function isObject(object) {
        return Object.prototype.toString.call(object) === '[object Object]';
    }

    return settings;
}

:)

2
bravedick

ここで私は自分のコードベースでマージするために使用したものです。

function merge(to, from) {
  if (typeof to === 'object' && typeof from === 'object') {
    for (var pro in from) {
      if (from.hasOwnProperty(pro)) {
        to[pro] = from[pro];
      }
    }
  }
  else{
      throw "Merge function can apply only on object";
  }
}
1
Nishant Kumar

私はJavaScriptを使い始めたようなので、間違っていたら訂正してください。

しかし、オブジェクトをいくつでもマージできるのであれば、もっといいのではないでしょうか。これがネイティブArgumentsオブジェクトを使ったやり方です。

重要な点は、関数宣言で引数を定義しなくても、JavaScript関数に実際に引数をいくつでも渡すことができるということです。 Argumentsオブジェクトを使わずにそれらにアクセスすることはできません。

function mergeObjects() (
    var tmpObj = {};

    for(var o in arguments) {
        for(var m in arguments[o]) {
            tmpObj[m] = arguments[o][m];
        }
    }
    return tmpObj;
}
1
antony

_ yui _Y.merge では、仕事をこなすべきです

Y.merge(obj1, obj2, obj3....) 
1
Prabhakar Kasi

Prototype の正しい実装は次のようになります。

var obj1 = {food: 'pizza', car: 'ford'}
var obj2 = {animal: 'dog'}

obj1 = Object.extend(obj1, obj2);
1
Tobi

Node.js を使っている人のために、NPMモジュールがあります: node.extend

インストール:

npm install node.extend

使用法:

var extend = require('node.extend');
var destObject = extend(true, {}, sourceObject);
// Where sourceObject is the object whose properties will be copied into another.
1
Ryan Walls

あなたは私の方法に従ってオブジェクトをマージすることができます

var obj1 = { food: 'pizza', car: 'ford' };
var obj2 = { animal: 'dog' };

var result = mergeObjects([obj1, obj2]);

console.log(result);
document.write("result: <pre>" + JSON.stringify(result, 0, 3) + "</pre>");

function mergeObjects(objectArray) {
    if (objectArray.length) {
        var b = "", i = -1;
        while (objectArray[++i]) {
            var str = JSON.stringify(objectArray[i]);
            b += str.slice(1, str.length - 1);
            if (objectArray[i + 1]) b += ",";
        }
        return JSON.parse("{" + b + "}");
    }
    return {};
}

1

ES5互換ネイティブワンライナー:

var merged = [obj1, obj2].reduce(function(a, o) { for(k in o) a[k] = o[k]; return a; }, {})
0
toster-cx

JSON互換のJavaScriptオブジェクトのマージ

元のソースを変更しない非破壊的な方法の使用と利用をお勧めします。 'Object.assign'は 破壊的な方法 であり、またそうではありません プロダクションにやさしい それ以前のブラウザでは動作しなくなりますし、代替方法できれいにパッチを当てる方法はありません。

どのような解決策であっても、JSオブジェクトをマージすることは常に手の届かない、または不完全になります。しかし、JSON準拠の互換性のあるオブジェクトをマージすることは、一連のJSオブジェクトをすべての固有のプロパティ名とそれに対応する値を含む返されたマスターにマージする非破壊メソッドの簡単で移植性のあるコードを書くことができることからすぐ意図した目的のための単一のマスターオブジェクト。

MSIE8がJSONオブジェクトのネイティブサポートを追加した最初のブラウザであることを念頭に置いておくことは非常に安心であり、既存のテクノロジを再利用することは常に歓迎される機会です。

コードをJSON準拠の標準オブジェクトに制限することは、制限よりも有利です。これらのオブジェクトはインターネットを介して転送することもできるからです。もちろん、より下位互換性を望んでいる人のために、常にjsonプラグインがあります。そのメソッドは、使用中のメソッドを変更または書き直すことなく、外部コード内のJSON変数に簡単に割り当てることができます。

function Merge( ){
    var a = [].slice.call( arguments ), i = 0;
        while( a[i] )a[i] = JSON.stringify( a[i++] ).slice( 1,-1 );
        return JSON.parse( "{"+ a.join() +"}" );
    }

(もちろん、もっと意味のある名前をつけることもできますが、私はまだ決めていません。おそらくJSONmergeと名付けるべきです)

ユースケース:

var master = Merge( obj1, obj2, obj3, ...objn );

Object.assignとは反対に、これはすべてのオブジェクトを変更せずに元の状態のままにします(何かを間違って行ってマージオブジェクトを並べ替える必要がある場合や、再度マージする前に別の操作に使用する場合)。

Merge引数の数も引数の長さの制限によって制限されます only ネイティブにサポートされているJSONのparse/stringifyはすでにマシンに最適化されています。つまり、スクリプト形式のJSループよりも高速であるはずです。 与えられた引数に対する繰り返しは、whileを使って行われています - これは、JSで最も速いループであることが証明されています。 

一意のオブジェクトラベル(keys)の重複したプロパティが、同じキーラベルを含む後のオブジェクトによって上書きされることを既に知っているという事実を簡単に言及しても害はありません。引数リストを単純に並べ替えたり並べ替えたりすることによって前のものになります。そして最後の出力として、複製なしでクリーンで更新されたマスターオブジェクトを取得することの利点。

0
Bekim Bacaj

このソリューションは 新しいオブジェクト を作成し、 複数のオブジェクト を処理することができます。

さらに、それは 再帰 であり、あなたは天気を 欲しい から 上書きする値 オブジェクト を選択できます。

    function extendObjects() {

        var newObject        = {};
        var overwriteValues  = false;
        var overwriteObjects = false;

        for ( var indexArgument = 0; indexArgument < arguments.length; indexArgument++ ) {

            if ( typeof arguments[indexArgument] !== 'object' ) {

                if ( arguments[indexArgument] == 'overwriteValues_True' ) {

                    overwriteValues = true;            
                } else if ( arguments[indexArgument] == 'overwriteValues_False' ) {

                    overwriteValues = false;                             
                } else if ( arguments[indexArgument] == 'overwriteObjects_True' ) {

                    overwriteObjects = true;     
                } else if ( arguments[indexArgument] == 'overwriteObjects_False' ) {

                    overwriteObjects = false; 
                }

            } else {

                extendObject( arguments[indexArgument], newObject, overwriteValues, overwriteObjects );
            }

        }

        function extendObject( object, extendedObject, overwriteValues, overwriteObjects ) {

            for ( var indexObject in object ) {

                if ( typeof object[indexObject] === 'object' ) {

                    if ( typeof extendedObject[indexObject] === "undefined" || overwriteObjects ) {
                        extendedObject[indexObject] = object[indexObject];
                    }

                    extendObject( object[indexObject], extendedObject[indexObject], overwriteValues, overwriteObjects );

                } else {

                    if ( typeof extendedObject[indexObject] === "undefined" || overwriteValues ) {
                        extendedObject[indexObject] = object[indexObject];
                    }

                }

            }     

            return extendedObject;

        }

        return newObject;
    }

    var object1           = { a : 1, b : 2, testArr : [888, { innArr : 1 }, 777 ], data : { e : 12, c : { lol : 1 }, rofl : { O : 3 } } };
    var object2           = { a : 6, b : 9, data : { a : 17, b : 18, e : 13, rofl : { O : 99, copter : { mao : 1 } } }, hexa : { tetra : 66 } };
    var object3           = { f : 13, g : 666, a : 333, data : { c : { xD : 45 } }, testArr : [888, { innArr : 3 }, 555 ]  };

    var newExtendedObject = extendObjects( 'overwriteValues_False', 'overwriteObjects_False', object1, object2, object3 );

newExtendedObjectの内容:

{"a":1,"b":2,"testArr":[888,{"innArr":1},777],"data":{"e":12,"c":{"lol":1,"xD":45},"rofl":{"O":3,"copter":{"mao":1}},"a":17,"b":18},"hexa":{"tetra":66},"f":13,"g":666}

フィドル: http://jsfiddle.net/o0gb2umb/ /

0
Scdev

私はObject.create()を使用してデフォルト設定を維持しました(__proto__またはObject.getPrototypeOf()を利用)。 

function myPlugin( settings ){
    var defaults = {
        "keyName": [ "string 1", "string 2" ]
    }
    var options = Object.create( defaults );
    for (var key in settings) { options[key] = settings[key]; }
}
myPlugin( { "keyName": ["string 3", "string 4" ] } );

こうすれば、後で 'concat()'または 'Push()'を実行できます。

var newArray = options['keyName'].concat( options.__proto__['keyName'] );

:重複を避けるために、連結の前にhasOwnPropertyチェックを行う必要があります。

0
Egor Kloos

これを達成するための可能な方法は以下の通りです。

if (!Object.prototype.merge){
    Object.prototype.merge = function(obj){
        var self = this;
        Object.keys(obj).forEach(function(key){
            self[key] = obj[key]
        });
    }
};

それが他の答えよりも優れているかどうかはわかりません。このメソッドではmerge functionObjectsプロトタイプに追加します。こうすればobj1.merge(obj2);を呼び出せます

注:引数がオブジェクトであるかどうかを確認し、適切なErrorを「スロー」するように引数を検証する必要があります。そうでなければObject.keysは 'エラー'を 'スロー'します

0
Yaki Klein

次のヘルパーを使うと、2つのオブジェクトを1つの新しいオブジェクトにマージすることができます。

function extend(obj, src) {
    for (var key in src) {
        if (src.hasOwnProperty(key)) obj[key] = src[key];
    }
    return obj;
}

// example
var a = { foo: true }, b = { bar: false };
var c = extend(a, b);

console.log(c);
// { foo: true, bar: false }

これは、オプションや辞書を関数やプラグインのデフォルト設定とマージするときに便利です。

IE 8のサポートが不要な場合は、代わりに同じ機能にObject.keysを使用できます。

function extend(obj, src) {
    Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
    return obj;
}

これは少し少ないコードを含み、少し速いです。

0
gildniy

let obj1 = {a:1, b:2};
let obj2 = {c:3, d:4};
let merged = {...obj1, ...obj2};
console.log(merged);

0
Tejas Savaliya
A={a:1,b:function(){alert(9)}}
B={a:2,c:3}
A.merge = function(){for(var i in B){A[i]=B[i]}}
A.merge()

結果は次のとおりです。{a:2、c:3、b:function()}

0
jleviaguirre

これはobjを "デフォルト"のdefにマージします。 objobjにコピーされるため、defは両方に存在するものよりも優先されます。これは再帰的です。

function mergeObjs(def, obj) {
    if (typeof obj == 'undefined') {
        return def;
    } else if (typeof def == 'undefined') {
        return obj;
    }
    for (var i in obj) {
        if (obj[i] != null && obj[i].constructor == Object) {
            def[i] = mergeObjs(def[i], obj[i]);
        } else {
            def[i] = obj[i];
        }
    }
    return def;
}

a = {x : {y : [123]}}
b = {x : {z : 123}}
console.log(mergeObjs(a, b));
// {x: {y : [123], z : 123}}
0
Aram Kocharyan

空のオブジェクトを作成し、それらをfor-loopで結合することができます。

var obj1 = {
  id: '1',
  name: 'name'
}

var obj2 = {
  c: 'c',
  d: 'd'
}

var obj3 = {}

for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }


console.log( obj1, obj2, obj3)

0
aircraft

Dojo Toolkit を使用している場合、2つのオブジェクトをマージする最良の方法はミックスインを使用することです。 

以下はDojo Toolkit mixinのサンプルです。

// Dojo 1.7+ (AMD)
require(["dojo/_base/lang"], function(lang){
  var a = { b:"c", d:"e" };
  lang.mixin(a, { d:"f", g:"h" });
  console.log(a); // b:c, d:f, g:h
});

// Dojo < 1.7
var a = { b:"c", d:"e" };
dojo.mixin(a, { d:"f", g:"h" });
console.log(a); // b:c, d:f, g:h

詳しくはmixinをご覧ください。

0
Vikash Pandey

すべてのオブジェクトにデフォルトのマージ(より良い名前を「継承」)する方法を割り当てることができます。

オブジェクトかインスタンス化された関数のどちらでも動作するはずです。

以下のコードは、必要に応じてマージ値の上書きを処理します。

Object.prototype.merge = function(obj, override) {
// Don't override by default

    for (var key in obj) {
        var n = obj[key];
        var t = this[key];
        this[key] = (override && t) ? n : t;
    };

};

テストデータは以下のとおりです。

var Mammal = function () {
    this.eyes = 2;
    this.thinking_brain = false;
    this.say = function () {
    console.log('screaming like a mammal')};
}

var Human = function () {
    this.thinking_brain = true;
    this.say = function() {console.log('shouting like a human')};
}

john = new Human();

// Extend mammal, but do not override from mammal
john.merge(new Mammal());
john.say();

// Extend mammal and override from mammal
john.merge(new Mammal(), true);
john.say();
0
Paul

別の方法:

function concat_collection(obj1, obj2) {
    var i;
    var arr = new Array();

    var len1 = obj1.length;
    for (i=0; i<len1; i++) {
        arr.Push(obj1[i]);
    }

    var len2 = obj2.length;
    for (i=0; i<len2; i++) {
        arr.Push(obj2[i]);
    }

    return arr;
}

var ELEMENTS = concat_collection(A,B);
for(var i = 0; i < ELEMENTS.length; i++) {
    alert(ELEMENTS[i].value);
}
0
T.Todua