Comment concaténer propriétés de plusieurs objets JavaScript

Question

Je cherche la meilleure façon de « ajouter » plusieurs objets JavaScript (tableaux associatifs).

Par exemple, avec:

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

Quelle est la meilleure façon de calculer:

{ "one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

Answer 1

ECMAScript 6 Object.assign() introduit pour y parvenir nativement en Javascript.

  

Object.assign () Méthode est utilisé pour copier les valeurs de toutes les propriétés propres dénombrables d'un ou plusieurs objets de source à un objet cible. Il retourne l'objet cible.

sur 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 est prise en charge dans de nombreux navigateurs modernes , mais pas encore tous. Utilisez un transpiler comme Babel et Traceur pour générer JavaScript ES5 rétrocompatible.

Answer 2

jQuery a une bonne façon de le faire.

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

Answer 3

Cela devrait le faire:

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

Entrée:

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

Sortie:

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

Answer 4

ECMAScript 6 a OPERATEUR . Et vous pouvez maintenant faire ceci:

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}

Answer 5

Soulignez a quelques méthodes pour le faire;

1. _.extend (destination, * sources)

Copie toutes les propriétés dans les objets source sur l'objet destination , et retourner l'objet destination .

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

ou

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

2. _.defaults (objet, * par défaut)

Remplir non défini propriétés dans l'objet avec des valeurs de par défaut objets, et retourner l'objet .

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

ou

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

Answer 6

Pourquoi la fonction doit être limitée à 3 arguments? En outre, vérifiez 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;
}

Answer 7

function Collect(a, b, c) {
    for (property in b)
        a[property] = b[property];

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

    return a;
}

Avis:. Propriétés existantes dans les objets précédents seront écrasées

Answer 8

Shallow-clonage (hors prototype) ou la fusion d'objets est désormais possible en utilisant une syntaxe plus courte que Object.assign () .

Étendre la syntaxe littéraux objet était introduit en 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 (...) opérateur est supporté dans transpiler comme Babel pour convertir le code ECMAScript 2015+ en version rétrocompatible de JavaScript dans les navigateurs actuels et anciens ou des environnements.

Ceci est le code équivalent Babel va générer pour vous:

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

Answer 9

Probablement, le plus rapide, efficace et plus générique est ce (vous pouvez fusionner un certain nombre d'objets et même copier dans le premier -> 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];
}

Il vous permet également de modifier le premier objet comme il est passé par référence. Si vous ne voulez pas cela, mais veulent avoir un tout nouvel objet contenant toutes les propriétés, alors vous pouvez passer {} comme premier argument.

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 et object1 contiennent tous deux les propriétés de 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); 

Dans ce cas, le combined_object contient les propriétés de object1, object2, object3 mais object1 est pas modifiée.

Vérifiez ici: https://jsfiddle.net/ppwovxey/1/

Remarque: Les objets JavaScript sont passés par référence.

Answer 10

Simplest: opérateurs de propagation

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

Answer 11

ES6 ++

La question ajoute divers différents objets en un seul.

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

permet de dire que vous avez un objet avec plusieurs clés qui sont des objets:

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

est la solution que je trouve (encore ont foreach: /)

let objAll = {};

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

En faisant cela, nous pouvons ajouter dynamiquement toutes les clés d'objets en un seul.

// Output => { bar: 'foo', foo: 'bar' }

Answer 12

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