web-dev-qa-db-fra.com

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

Je cherche le meilleur moyen "d'ajouter" plusieurs objets JavaScript (tableaux associatifs).

Par exemple, étant donné:

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 }
javascriptobjectdictionaryassociative-array
73
Vlad

ECMAscript 6 a introduit Object.assign() pour y parvenir de manière native en Javascript.

La méthode Object.assign () permet de copier les valeurs de toutes les propriétés propres énumérables d'un ou de plusieurs objets source vers un objet cible. Il retournera l'objet cible.

Documentation MDN sur Object.assign ()

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 pris en charge par de nombreux navigateurs modernes mais pas encore tous. Utilisez un transpiler tel que Babel et Traceur pour générer du code JavaScript ES5 rétrocompatible. 

113
filoxo

jQuery a une bonne façon de faire cela.

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

34
user159088

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

Contribution:

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
32
cletus

ECMAScript 6 a propagation opérateur . Et maintenant tu peux faire ça:

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}
13
valex

Underscore a peu de méthodes pour le faire;

1. _.extend (destination, * sources) 

Copiez toutes les propriétés des objets source sur l'objet destination, puis renvoyez-les 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) 

Renseignez les propriétés non définies dans objet avec les valeurs des objets paramètres par défaut et renvoyez-les 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 }
11
gihanchanuka

Pourquoi la fonction devrait-elle être limitée à 3 arguments? Aussi, vérifiez pour 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;
}

Remarque: les propriétés existantes dans les objets précédents seront écrasées.

3
Björn

Le clonage superficiel (à l’exception du prototype) ou la fusion d’objets est désormais possible avec une syntaxe plus courte que Object.assign () .

La syntaxe de propagation pour les littéraux d'objet a été introduite dans 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 }

L'opérateur Spread (...) est pris en charge dans de nombreux navigateurs modernes mais pas tous. 

Il est donc recommandé d’utiliser un transpiler like Babel pour convertir le code ECMAScript 2015+ en une version rétro-compatible de JavaScript dans les navigateurs ou les environnements actuels et anciens. 

C'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 }
3
Thiago Santos

Le plus simple: les opérateurs de spread

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

La manière la plus rapide, efficace et générique est probablement la suivante (vous pouvez fusionner un nombre illimité d’objets et même les copier dans le premier -> assigner): 

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 lorsqu’il est passé par référence. Si vous ne voulez pas cela, mais voulez avoir un tout nouvel objet contenant toutes les propriétés, 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);

combine_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, combine_object contient les propriétés de object1, object2, object3 mais object1 n'est pas modifié. 

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

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

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 ++

La question est d'ajouter divers différents objets en un.

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

disons que vous avez un objet avec plusieurs clés qui sont des objets:

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

c’est la solution que j’ai trouvée (il me reste encore à chercher: /)

let objAll = {};

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

En faisant cela, nous pouvons ajouter dynamiquement TOUTES les clés d'objet en une.

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