web-dev-qa-db-ja.com

複数のJavaScriptオブジェクトのプロパティを連結する方法

複数のJavaScriptオブジェクト（連想配列）を「追加」する最良の方法を探しています。

たとえば、次の場合：

a = { "one" : 1, "two" : 2 };
b = { "three" : 3 };
c = { "four" : 4, "five" : 5 };

計算する最良の方法は何ですか：

{ "one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
javascriptobjectdictionaryassociative-array
85
Vlad

ECMAscript 6では、これをJavascriptでネイティブに実現するためにObject.assign()が導入されました。

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

Object.assign（）のMDNドキュメント

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 }

Object.assignは多くの最新のブラウザでサポートされています しかし、まだすべてではありません。 Babel や Traceur のようなトランスパイラーを使用して、後方互換性のあるES5 JavaScriptを生成します。

126
filoxo

jQuery には、これを行う良い方法があります。

http://api.jquery.com/jQuery.extend/

34
user159088

これはそれを行う必要があります：

function collect() {
  var ret = {};
  var len = arguments.length;
  for (var i=0; i<len; i++) {
    for (p in arguments[i]) {
      if (arguments[i].hasOwnProperty(p)) {
        ret[p] = arguments[i][p];
      }
    }
  }
  return ret;
}

入力：

a = { "one" : 1, "two" : 2 };
b = { "three" : 3 };
c = { "four" : 4, "five" : 5 };
d = collect(a, b, c);
console.log(d);

出力：

Object one=1 two=2  three=3 four=4 five=5
33
cletus

ECMAScript 6には スプレッド演算子 があります。そして今、あなたはこれを行うことができます：

const obj1 = {1: 11, 2: 22}
const obj2 = {3: 33, 4: 44}
const obj3 = {...obj1, ...obj2} 
console.log(obj3)

// {1: 11, 2: 22, 3: 33, 4: 44}
16
valex

アンダースコア にはこれを行うメソッドがほとんどありません。

1。 _。extend（destination、* sources）

sourceオブジェクトのすべてのプロパティをdestinationオブジェクトにコピーします、およびdestinationオブジェクトを返します。

_.extend(a, _.extend(b, c));
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

または

_.extend(a, b);
=> {"one" : 1, "two" : 2, "three" : 3}
_.extend(a, c);
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

2。 _。defaults（object、* defaults）

objectのndefinedプロパティにdefaultsオブジェクト、およびobjectを返します。

_.defaults(a, _.defaults(b, c));
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

または

_.defaults(a, b);
=> {"one" : 1, "two" : 2, "three" : 3}
_.defaults(a, c);
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
12
gihanchanuka

関数を3つの引数に制限する必要があるのはなぜですか？また、hasOwnPropertyを確認してください。

function Collect() {
    var o={};
    for(var i=0;i<arguments.length;i++) {
      var arg=arguments[i];
      if(typeof arg != "object") continue;
      for(var p in arg) {
        if(arg.hasOwnProperty(p)) o[p] = arg[p];
      }
    }
    return o;
}
4
Alsciende
function Collect(a, b, c) {
    for (property in b)
        a[property] = b[property];

    for (property in c)
        a[property] = c[property];

    return a;
}

注意：以前のオブジェクトの既存のプロパティは上書きされます。

3
Björn

Object.assign（） よりも短い構文を使用して、オブジェクトの浅い複製（プロトタイプを除く）またはマージが可能になりました。

スプレッド構文 for オブジェクトリテラル は ECMAScript 2018 で導入されました：

const a = { "one": 1, "two": 2 };
const b = { "three": 3 };
const c = { "four": 4, "five": 5 };

const result = {...a, ...b, ...c};
// Object { "one": 1, "two": 2 , "three": 3, "four": 4, "five": 5 }

Spread（...）operatorは 多くの最新ブラウザ でサポートされていますが、すべてではありません。

したがって、 transpiler のような Babel を使用して、現在および以前のブラウザーまたは環境でECMAScript 2015+コードをJavaScriptの後方互換バージョンに変換することをお勧めします。

これは同等のコードです Babelが生成します あなたのために：

"use strict";

var _extends = Object.assign || function(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];
    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }
  return target;
};

var a = { "one": 1, "two": 2 };
var b = { "three": 3 };
var c = { "four": 4, "five": 5 };

var result = _extends({}, a, b, c);
// Object { "one": 1, "two": 2 , "three": 3, "four": 4, "five": 5 }
3
Thiago Santos

おそらく、最速で効率的でより一般的な方法は次のとおりです（任意の数のオブジェクトをマージし、最初のオブジェクトにコピーすることもできます-> assign）。

function object_merge(){
    for (var i=1; i<arguments.length; i++)
       for (var a in arguments[i])
         arguments[0][a] = arguments[i][a];
   return arguments[0];
}

また、参照渡しの最初のオブジェクトを変更することもできます。これを望まないが、すべてのプロパティを含む完全に新しいオブジェクトが必要な場合は、最初の引数として{}を渡すことができます。

var object1={a:1,b:2};
var object2={c:3,d:4};
var object3={d:5,e:6};
var combined_object=object_merge(object1,object2,object3);

combined_objectとobject1の両方には、object1、object2、object3のプロパティが含まれています。

var object1={a:1,b:2};
var object2={c:3,d:4};
var object3={d:5,e:6};
var combined_object=object_merge({},object1,object2,object3);

この場合、combined_objectにはobject1、object2、object3のプロパティが含まれますが、object1は変更されません。

ここで確認してください： https://jsfiddle.net/ppwovxey/1/

注：JavaScriptオブジェクトは参照によって渡されます。

1
Selay
function collect(a, b, c){
    var d = {};

    for(p in a){
        d[p] = a[p];
    }
    for(p in b){
        d[p] = b[p];
    }
    for(p in c){
        d[p] = c[p];
    }

    return d;
}
0
Álvaro González

ES6 ++

問題は、さまざまなdifferentオブジェクトを1つに追加することです。

let obj = {};
const obj1 = { foo: 'bar' };
const obj2 = { bar: 'foo' };
Object.assign(obj, obj1, obj2);
//output => {foo: 'bar', bar: 'foo'};

オブジェクトである複数のキーを持つ1つのオブジェクトがあるとしましょう：

let obj = {
  foo: { bar: 'foo' },
  bar: { foo: 'bar' }
}

これは私が見つけた解決策でした（まだforeachする必要があります：/）

let objAll = {};

Object.values(obj).forEach(o => {
  objAll = {...objAll, ...o};
});

これにより、すべてのオブジェクトキーを動的に1つに追加できます。

// Output => { bar: 'foo', foo: 'bar' }
0
Joseph Briggs

最も単純な：スプレッド演算子

var obj1 = {a: 1}
var obj2 = {b: 2}
var concat = { ...obj1, ...obj2 } // { a: 1, b: 2 }
0
Rodolfo Paranhos