Bagaimana menggabungkan properti dari beberapa objek JavaScript

Saya mencari cara terbaik untuk "menambahkan" beberapa objek JavaScript (array asosiatif).

Misalnya, diberikan:

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

apa cara terbaik untuk menghitung:

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

ECMAscript 6 diperkenalkan Object.assign()untuk mencapai ini secara native dalam Javascript.

Metode Object.assign () digunakan untuk menyalin nilai dari semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target. Ini akan mengembalikan objek target.

Dokumentasi MDN di 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.assigndidukung di banyak browser modern, tetapi belum semuanya. Gunakan transpiler seperti Babel dan Traceur untuk menghasilkan JavaScript ES5 yang kompatibel dengan versi sebelumnya.

Anda bisa menggunakan jquery $.extendseperti ini:

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>

Ini harus melakukannya:

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

Keluaran:

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

ECMAScript 6 telah menyebarkan sintaks . Dan sekarang Anda bisa melakukan ini:

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}

Menggarisbawahi memiliki beberapa metode untuk melakukan ini;

1. _.extend (tujuan, * sumber)

Salin semua properti di objek sumber ke objek tujuan , dan kembalikan objek tujuan .

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

Atau

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

2. _.defaults (objek, * defaults)

Isi properti yang tidak ditentukan dalam objek dengan nilai dari objek default , dan kembalikan objek tersebut .

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

Atau

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

Mengapa fungsi harus dibatasi ke 3 argumen? Periksa juga 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;
}

Kloning dangkal (tidak termasuk prototipe) atau penggabungan objek sekarang dapat dilakukan menggunakan sintaks yang lebih pendek dari Object.assign () .

Sintaks penyebaran untuk literal objek diperkenalkan di 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 }

Operator Spread (...) didukung di banyak browser modern tetapi tidak semuanya.

Jadi, disarankan untuk menggunakan transpiler seperti Babel untuk mengubah kode ECMAScript 2015+ menjadi versi JavaScript yang kompatibel dengan versi sebelumnya di browser atau lingkungan lama dan lama.

Ini adalah kode setara yang akan dihasilkan Babel untuk Anda:

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

Perhatian: Properti yang ada di objek sebelumnya akan ditimpa.

Sangat mudah menggunakan operator penyebaran ES7 untuk suatu objek, di konsol browser Anda

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

Untuk menggabungkan sejumlah dinamis objek, kita dapat menggunakan Object.assigndengan spread sintaks .

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

Fungsi di atas menerima sejumlah objek, menggabungkan semua propertinya menjadi objek baru dengan properti dari objek selanjutnya menimpa objek dari objek sebelumnya.

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

Untuk menggabungkan larik objek, metode serupa dapat diterapkan.

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

Mungkin, cara tercepat, efisien, dan lebih umum adalah ini (Anda dapat menggabungkan sejumlah objek dan bahkan menyalin ke yang pertama -> 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];
}

Ini juga memungkinkan Anda untuk memodifikasi objek pertama saat melewati referensi. Jika Anda tidak menginginkan ini tetapi ingin memiliki objek yang benar-benar baru yang berisi semua properti, maka Anda bisa meneruskan {} sebagai argumen pertama.

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

gabungan_objek dan objek1 keduanya berisi properti objek1, objek2, objek3.

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

Dalam kasus ini, gabungan_object berisi properti object1, object2, object3 tetapi object1 tidak dimodifikasi.

Periksa di sini: https://jsfiddle.net/ppwovxey/1/

Catatan: objek JavaScript diteruskan dengan referensi.

ES6 ++

Pertanyaannya adalah menambahkan berbagai berbeda benda menjadi satu.

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

katakanlah Anda memiliki satu objek dengan beberapa kunci yang merupakan objek:

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

ini adalah solusi yang saya temukan (masih harus foreach: /)

let objAll = {};

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

Dengan melakukan ini kita dapat secara dinamis menambahkan SEMUA kunci objek menjadi satu.

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

Paling sederhana: operator penyebaran

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