Cara menggunakan OBJECT.ASSIGN pada JavaScript

30/10/2016    Reza Indra    3058    Website

Object.assign() adalah method dari object yang berfungsi untuk mengcopy atau menggabungkan properti-properti dalam object yang berbeda. Paramater dalam Object.assign dibagi menjadi 2, yakni Target Object dan Source Object. Target Object adalah object yang mengcopy atau hasil gabungan dari object-object lain. Source Object adalah kebalikannya, yakni object yang dicopy atau diambil properti-propertinya.

Object.assign(Target, ...sources)

Return value: Target

Contoh 1, object a mengcopy (cloning) object b:

Contoh 2, membuat object baru dengan mengcopy (cloning) object a dan b.

No data.

Dalam dunia pemrograman berorientasi objek, kita sudah mengetahui pentingnya kelas dan objek. Namun, tidak seperti semua bahasa pemrograman lainnya, JavaScript tidak memiliki kelas tradisional yang terlihat dalam bahasa pemrograman yang berbeda. Namun, JavaScript memiliki objek dan konstruktor yang bekerja terutama dengan cara yang sama untuk melakukan jenis operasi yang sama.

Ada dua jenis konstruktor dalam JavaScript,

1. Konstruktor bawaan (array dan Objek)
2. Konstruktor khusus (menentukan properti dan metode untuk objek tertentu).

Konstruktor Objek membuat pembungkus objek untuk nilai yang diberikan.

Jika nilainya nol atau tidak terdefinisi, itu akan membuat dan mengembalikan Objek kosong; Jika tidak, itu akan mengembalikan objek dari tipe yang sesuai dengan nilai yang diberikan.

Jika nilainya adalah Objek, itu akan mengembalikan nilainya.

Saat dipanggil dalam konteks non-konstruktor, Objek berperilaku identik dengan Objek baru ().

• Properti dari konstruktor Objek
  • panjang objek
  • Objek.prototipe
• JavaScript Object.assign
  • Sintaksis
  • Parameter
  • Nilai Kembali
  • Contoh
• Menggabungkan objek dengan properti yang sama
• Kekekalan metode Object.assign()
• Kesalahan Object.assign() Dalam Javascript
• Apa itu salinan dangkal dalam Javascript?
• Apa itu salinan dalam di Javascript?
• Salinan dalam dari Object di Javascript
  • JSON.parse(JSON.stringify(objek));
• Benchmarking Object.assign() dan Spread Operator
  • • Keluaran
• Kesimpulan
• Postingan yang Direkomendasikan

Properti dari konstruktor Objek

1. panjang objek

   Ini memiliki nilai 1.

2. Objek.prototipe
   

   Ini memungkinkan penambahan properti ke semua objek bertipe Object. Metode konstruktor Obyek.

Itu Objek.assign() adalah fungsi JavaScript bawaan yang digunakan untuk menyalin nilai semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target. Itu Objek.assign() metode mengambil target dan sumber sebagai parameter dan mengembalikan objek target.

Itu Objek.assign() metode ini digunakan untuk mengkloning objek atau menggabungkan objek secara dangkal. Ini menggabungkan objek dengan properti yang sama. Properti di sumber akan menimpa properti di objek target jika memiliki kunci yang sama.

Dari banyak metode konstruktor Obyek, Objek.assign() adalah salah satu metode yang digunakan untuk menyalin nilai dan properti dari satu atau lebih objek sumber ke objek target.

Sintaksis

Sintaks untuk metode Javascript Object assign() adalah sebagai berikut.

Object.assign(target, ...sources)

Parameter

SEBUAH target parameter adalah objek target.

Itu sumber parameter adalah objek yang perlu dikloning.

Nilai Kembali

Metode Object.assign() mengembalikan objek target.

Contoh

Mari kita ambil contoh sederhana dengan mengkloning Object.

// app.js

let obj = { name: 'Krunal', surname: 'Lathiya' };
let cloneObj = Object.assign({}, obj);
console.log(cloneObj);

Dalam contoh di atas, kita telah mendefinisikan satu Objek, dan kemudian kita telah membuat tiruan dari objek tersebut dengan objek baru. Outputnya akan menjadi berikut.

Jadi, itu telah menyalin semua properti dari objek sumber.

Mari kita gabungkan tiga objek dengan Objek.assign() metode.

// app.js

let o1 = { a: 21 };
let o2 = { b: 22 };
let o3 = { c: 24 };

Object.assign(o1, o2, o3);
console.log(o1);

Menggabungkan objek dengan properti yang sama

Jika properti diulang di dalam objek sumber, maka di objek kloning, properti yang diulang akan dilewati, dan kita hanya mendapatkan properti unik pada objek target.

// app.js

let o1 = { a: 21, b: 22, c: 24 };
let o2 = { b: 22, c: 24 };
let o3 = { c: 24 };

let finalObj = Object.assign({}, o1, o2, o3);
console.log(finalObj);

Kekekalan metode Object.assign()

Mari kita lihat contoh berikut.

// app.js

let obj = {
  eleven: 'Millie Bobby Brown',
  mike: 'Finn Wolfhard',
};
let objCopy = Object.assign({}, obj);
console.log(objCopy);

objCopy.mike="Noah Schnapp";
console.log(objCopy);
console.log(obj);

Lihat outputnya.

➜  es git:(master) ✗ node app
{ eleven: 'Millie Bobby Brown', mike: 'Finn Wolfhard' }
{ eleven: 'Millie Bobby Brown', mike: 'Noah Schnapp' }
{ eleven: 'Millie Bobby Brown', mike: 'Finn Wolfhard' }
➜  es git:(master) ✗

Dalam kode di atas, kami mengubah nilai properti ‘mike’ di objCopy Objek ke ‘Noah Schnapp‘, dan ketika kita mencatat objek objCopy yang dimodifikasi di konsol, perubahan hanya berlaku objCopy.

Baris terakhir kode memeriksa apakah objek obj masih utuh dan tidak berubah.

Ini berarti bahwa kita telah berhasil membuat salinan objek sumber tanpa referensi apa pun.

Kesalahan Object.assign() Dalam Javascript

Mari kita bahas sedikit penyalinan dangkal. Lihat contoh kode berikut.

// app.js

let obj = {
  a: 11,
  b: {
    c: 21,
  },
}
let newObj = Object.assign({}, obj);
console.log('First use of Object.assign() method')
console.log(newObj);
console.log('-------------------------------')

obj.a = 10;
console.log('Modify the obj's "a" property');
console.log(obj);
console.log(newObj);
console.log('-------------------------------')

newObj.a = 19;
console.log('Modify the newObj's "a" property');
console.log(obj);
console.log(newObj);
console.log('-------------------------------')

newObj.b.c = 29;
console.log('Modify the newObj's "b"'s "c" property');
console.log(obj);
console.log(newObj);

Lihat outputnya.

➜  es git:(master) ✗ node app
First use of Object.assign() method
{ a: 11, b: { c: 21 } }
-------------------------------
Modify the obj's "a" property
{ a: 10, b: { c: 21 } }
{ a: 11, b: { c: 21 } }
-------------------------------
Modify the newObj's "a" property
{ a: 10, b: { c: 21 } }
{ a: 19, b: { c: 21 } }
-------------------------------
Modify the newObj's "b"'s "c" property
{ a: 10, b: { c: 29 } }
{ a: 19, b: { c: 29 } }
➜  es git:(master) ✗

Jadi, properti pada rantai prototipe dan properti non-enumerable tidak dapat disalin di sini.

Sekarang, mari kita mengerti. Salinan dangkal dan salinan dalam di Javascript.

Apa itu salinan dangkal dalam Javascript?

Ketika kita mengatakan kita membuat salinan dangkal dari Array atau Object, artinya kita membuat referensi baru ke nilai primitif di dalam Object, menyalinnya. Itu berarti perubahan pada larik asli tidak akan memengaruhi larik yang disalin, yang akan terjadi jika hanya referensi ke larik yang telah disalin (itu akan terjadi dengan operator penugasan =).

Salinan dangkal mengutip bahwa hanya satu level yang disalin, yang akan berfungsi dengan baik untuk array atau Objek yang hanya berisi nilai primitif.

Menyalin objek ini memerlukan salinan objek dan larik yang berisi objek atau larik lain. Jika tidak, modifikasi referensi bersarang akan mengubah data dalam Objek atau larik asli.

Apa itu salinan dalam di Javascript?

Untuk objek dan larik Javascript yang berisi objek atau larik lain, menyalin objek ini memerlukan salinan yang dalam. Jika tidak, modifikasi yang dilakukan pada referensi bersarang akan mengubah data bersarang di Objek atau larik asli.

Dibandingkan dengan salinan dangkal, yang berfungsi dengan baik untuk objek atau larik yang hanya berisi nilai tipe data primitif, tetapi akan gagal untuk objek atau larik apa pun dengan referensi bersarang ke objek atau larik lain.

Memahami perbedaan antara == dan === dapat membantu kita secara visual melihat perbedaan antara salinan dangkal dan dalam, karena operator persamaan ketat (===) menunjukkan bahwa referensi bersarang adalah sama.

Salinan dalam dari Object di Javascript

Object.assign() adalah cara standar untuk menyalin objek dalam JavaScript. Dan juga operator spread melakukan hal yang sama. Jadi kedua metodologi dapat digunakan secara setara untuk menyalin properti enumerable dari suatu objek ke objek lain, dengan operator spread menjadi yang lebih pendek dari keduanya.

Mereka juga berguna untuk menggabungkan objek karena kedua metode secara otomatis menimpa properti di objek target yang memiliki kunci yang sama dengan yang ada di objek sumber.

Salinan yang dalam akan menduplikasi setiap Obyek yang ditemuinya. Salinan dan Objek asli tidak akan membagikan apa pun untuk menyalin yang asli.

Operator spread dan metode Object.assign() hanya dapat membuat salinan objek yang dangkal. Ini berarti bahwa nilai-nilai yang sangat bersarang di dalam Objek yang disalin diletakkan di sana untuk merujuk objek sumber.

Jika kita memodifikasi nilai objek yang disalin secara mendalam, kita akan memodifikasi nilai di objek sumber.

JSON.parse(JSON.stringify(objek));

Saya sudah menulis satu artikel tentang bagaimana kita dapat mengurai JSON di Javascript. Misalkan Anda tidak tahu apa json.parse() tidak, maka silakan periksa artikel itu. Sekarang, ini memperbaiki masalah masalah di atas.

Ini memperbaiki masalah yang kami alami sebelumnya. Sekarang, baruObj.b memiliki salinan dan bukan referensi! Ini adalah cara untuk menyalin objek secara mendalam.

Lihat contoh kode berikut.

// app.js

let obj = {
  a: 11,
  b: {
    c: 21,
  },
}

let newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 29;
console.log(obj);
console.log(newObj);

Lihat outputnya.

➜  es git:(master) ✗ node app
{ a: 11, b: { c: 29 } }
{ a: 11, b: { c: 21 } }
➜  es git:(master) ✗

Benchmarking Object.assign() dan Spread Operator

Operator penyebaran objek {…obj} mirip dengan Object.assign(). Jadi pertanyaannya adalah, mana yang harus Anda gunakan? Dan ternyata jawabannya sedikit lebih bernuansa dari yang Anda duga.

Ide dasar dari operator penyebaran objek dan Object.assign() sama, untuk membuat objek polos baru menggunakan properti sendiri dari objek yang ada.

Untuk pemeriksaan kinerja, kami akan menggunakan tolok ukur Perpustakaan.

Anda dapat menginstal pustaka benchmark menggunakan perintah berikut.

npm install --save benchmark

Sekarang, tulis kode berikut di dalam file app.js.

const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj = { prop: 'krunal', attr: 'ankit' };

suite.
  add('Spread Operator', function () {
    ({ data: 'rushabh', ...obj });
  }).
  add('Object.assign()', function () {
    Object.assign({ data: 3 }, obj);
  }).
  on('cycle', function (event) {
    console.log(String(event.target));
  }).
  on('complete', function () {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  }).
  run({ 'async': true });

Keluaran

Spread Operator x 11,986,798 ops/sec ±4.60% (74 runs sampled)
Object.assign() x 11,734,098 ops/sec ±5.52% (74 runs sampled)
Fastest is Spread Operator,Object.assign()
➜ node app
Spread Operator x 14,660,760 ops/sec ±1.03% (84 runs sampled)
Object.assign() x 14,409,887 ops/sec ±0.85% (85 runs sampled)
Fastest is Spread Operator
➜ node app
Spread Operator x 14,382,964 ops/sec ±1.30% (78 runs sampled)
Object.assign() x 13,730,209 ops/sec ±1.00% (86 runs sampled)
Fastest is Spread Operator
➜ node app
Spread Operator x 14,540,831 ops/sec ±1.19% (78 runs sampled)
Object.assign() x 14,520,784 ops/sec ±0.69% (86 runs sampled)
Fastest is Object.assign()

Anda dapat melihat bahwa operator Object.assign() dan Spead dapat dipertukarkan, dan keduanya lebih cepat. Tetapi jika Anda menyediakan objek kosong, maka operator Spread bahkan lebih cepat daripada Object.assign().

Benchmarking bertujuan untuk mengevaluasi sesuatu dengan membandingkan dengan prosedur standar. Namun, pertanyaannya di sini adalah mengapa kita perlu benchmarking dalam hal pemrograman perangkat lunak. Membandingkan kode berarti seberapa cepat kode dijalankan dan hambatannya.

Dalam contoh ini, kita telah melihat perbandingan antara Object.assign() dan Spread Operator, dan kita telah bereksperimen dengan modul benchmark.

Object.assign() mengubah objek untuk memicu setter ES6. Jika Anda lebih suka teknik yang tidak dapat diubah, operator penyebaran objek adalah pemenang yang jelas. Dengan Object.assign(), Anda harus terus-menerus meneruskan objek kosong {} sebagai argumen pertama.

Perbedaan terkait lainnya adalah bahwa operator spread mendefinisikan properti baru, sedangkan Object.assign() menetapkannya. Object.assign() memanggil setter yang ditentukan pada Object.prototype, sedangkan operator spread tidak.

Jadi itu saja untuk perbandingannya.

Kesimpulan

Object.assign() dan operator spread memungkinkan kita untuk membuat salinan objek yang dangkal saja dalam JavaScript. Nilai yang sangat bersarang diletakkan di sana sebagai referensi ke objek sumber.

Akhirnya, Object.assign() Dalam contoh Javascript selesai.

Postingan yang Direkomendasikan

Objek Javascript.freeze()

Objek Javascript.toString()

Objek Javascript.nilai()

Objek Javascript.keys()

Objek Javascript.buat()