Birden çok JavaScript nesnesinden özellikler nasıl birleştirilir

Birden çok JavaScript nesnesini (ilişkilendirilebilir diziler) "eklemenin" en iyi yolunu arıyorum.

Örneğin, verilen:

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

hesaplamanın en iyi yolu nedir:

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

ECMAscript 6, Object.assign()bunu yerel olarak Javascript'te gerçekleştirmek için tanıtıldı .

Object.assign () yöntemi, bir hedef nesne, bir ya da daha fazla kaynak nesnelerden her numaralandırılabilir kendi özelliklerinin değerlerini kopyalamak için kullanılır. Hedef nesneyi döndürür.

Object.assign () üzerindeki MDN belgeleri

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.assignbirçok modern tarayıcıda destekleniyor, ancak henüz hepsi değil. Böyle bir transpiler kullanın Babel ve traceur geriye doğru uyumlu ES5 JavaScript üretilmesi.

Jquery'leri şu şekilde kullanabilirsiniz $.extend:

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

let d = $.extend({}, a, b, c)

console.log(d)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Bunu yapmalı:

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

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

let d = collect(a, b, c);
console.log(d);

Çıktı:

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

ECMAScript 6, yayılma sözdizimine sahiptir . Ve şimdi bunu yapabilirsiniz:

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}

Alt Çizginin bunu yapmak için birkaç yöntemi vardır;

1. _.extend (hedef, * kaynaklar)

İçinde özelliklerin tümünü kopyala kaynağına yanına nesneleri hedef nesne ve iade hedef nesne.

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

Veya

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

2. _.defaults (nesne, * varsayılanlar)

Doldurun tanımlanmamış özellikler nesne değerlerle varsayılan nesne ve dönüş nesnesi .

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

Veya

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

İşlev neden 3 bağımsız değişkenle sınırlandırılsın? Ayrıca, kontrol edin 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;
}

Yüzeysel klonlama (prototip hariç) veya nesnelerin birleştirilmesi artık Object.assign () ' den daha kısa bir sözdizimi kullanılarak mümkündür .

Nesne değişmezleri için yayılma sözdizimi ECMAScript 2018'de tanıtıldı):

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 }

Yayılma (...) operatörü birçok modern tarayıcıda desteklenmektedir ancak hepsinde .

Bu yüzden Babel gibi bir aktarıcı kullanmanız tavsiye edilir. ECMAScript 2015+ kodunu mevcut ve daha eski tarayıcılarda veya ortamlarda geriye dönük olarak uyumlu bir JavaScript sürümüne dönüştürmek için .

Bu, Babel'in sizin için oluşturacağı eşdeğer koddur :

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

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

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

    return a;
}

Uyarı: Önceki nesnelerdeki mevcut özelliklerin üzerine yazılacaktır.

Bir nesne için ES7 yayılma operatörünü kullanmak kolaydır , tarayıcı konsolunuza

({ name: "Alex", ...(true  ? { age: 19 } : { })}) // {name: "Alex", age: 19}
({ name: "Alex", ...(false ? { age: 19 } : { })}) // {name: "Alex",        }

Dinamik sayıda nesneyi birleştirmek için Object.assign, yayılma sözdizimi ile kullanabiliriz .

const mergeObjs = (...objs) => Object.assign({}, ...objs);

Yukarıdaki işlev, herhangi bir sayıda nesneyi kabul eder ve tüm özelliklerini, önceki nesnelerin üzerine yazarak sonraki nesnelerin özelliklerine sahip yeni bir nesnede birleştirir.

Demo:

const mergeObjs = (...objs) => Object.assign({}, ...objs);
const a = {prop: 1, prop2: '2'},
      b = {prop3: 3, prop4: [1,2,3,4]}
      c = {prop5: 5},
      d = {prop6: true, prop7: -1},
      e = {prop1: 2};
const abcd = mergeObjs(a,b,c,d);
console.log("Merged a,b,c,d:", abcd);
const abd = mergeObjs(a,b,d);
console.log("Merged a,b,d:", abd);
const ae = mergeObjs(a,e);//prop1 from e will overwrite prop1 from a
console.log("Merged a,e:", ae);

Bir dizi nesneyi birleştirmek için benzer bir yöntem uygulanabilir.

const mergeArrayOfObjs = arr => Object.assign({}, ...arr);

Demo:

const mergeArrayOfObjs = arr => Object.assign({}, ...arr);
const arr = [
  {a: 1, b: 2},
  {c:1, d:3},
  {abcd: [1,2,3,4], d: 4}
];
const merged = mergeArrayOfObjs(arr);
console.log(merged);

Muhtemelen, en hızlı, verimli ve daha genel yol şudur (istediğiniz sayıda nesneyi birleştirebilir ve hatta ilkine kopyalayabilirsiniz -> atama):

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

Ayrıca, ilk nesneyi referansla geçerken değiştirmenize olanak tanır. Bunu istemiyor ancak tüm özellikleri içeren tamamen yeni bir nesneye sahip olmak istiyorsanız, ilk argüman olarak {} 'ı iletebilirsiniz.

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

kombine_nesne ve nesne1, nesne1, nesne2, nesne3 özelliklerini içerir.

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

Bu durumda, birleşik_nesne, nesne1, nesne2, nesne3 özelliklerini içerir ancak nesne1 değiştirilmez.

Burayı kontrol edin: https://jsfiddle.net/ppwovxey/1/

Not: JavaScript nesneleri referans olarak aktarılır.

ES6 ++

Soru, çeşitli farklı nesneleri bir tanesine eklemektir .

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

nesneler olan birden çok anahtarı olan bir nesneniz olduğunu varsayalım:

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

bulduğum çözüm buydu (hala foreach yapmam gerekiyor: /)

let objAll = {};

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

Bunu yaparak, TÜM nesne anahtarlarını bire dinamik olarak ekleyebiliriz.

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

En basit: yayma operatörleri

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

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