Cara menggabungkan properti dari beberapa objek JavaScript

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

Sebagai contoh, 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 }

Jawaban #1

ECMAscript 6 memperkenalkan Object.assign() untuk mencapai ini secara native di Javascript.

Metode Object.assign() digunakan untuk menyalin nilai dari semua properti milik sendiri yang dapat di-iterasi dari satu atau lebih objek sumber ke objek target. Metode ini akan mengembalikan objek target.

Dokumentasi MDN tentang 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 didukung di banyak browser modern tetapi belum semuanya. Gunakan transpiler seperti Babel dan Traceur untuk menghasilkan JavaScript ES5 yang kompatibel ke belakang.

Jawaban #2

ECMAScript 6 memiliki sintaks sebar. 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}

Jawaban #3

Ini seharusnya cukup:

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
}

Jawaban #4

Anda bisa menggunakan $.extend dari jQuery seperti 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>

Jawaban #5

Underscore memiliki beberapa metode untuk melakukan ini;

1. _.extend(tujuan, *sumber)

Salin semua properti dalam 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, *nilai_default)

Isi properti undefined di object dengan nilai dari objek defaults, dan kembalikan object.

_.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 }

Artikel terkait