JavaScript Object.assign vs Spread: Ishlashni Solishtirish va Qo'llash Holatlari

JavaScript-da obyektlarni manipulyatsiya qilish odatiy vazifa hisoblanadi. Bunga erishish uchun ikkita mashhur usul mavjud: Object.assign() va spread sintaksisi (...). Ikkala usul ham bir yoki bir nechta obyektning xususiyatlarini maqsadli obyektga nusxalash uchun ishlatilishi mumkin bo'lsa-da, ular ishlash xususiyatlari, qo'llash holatlari va umumiy xatti-harakatlari bilan farqlanadi. Ushbu maqola sizga to'g'ri vositani tanlashga yordam berish uchun keng qamrovli taqqoslashni taqdim etadi.

Object.assign() ni tushunish

Object.assign() - bu bir yoki bir nechta manba obyektlarining barcha sanab o'tiladigan shaxsiy xususiyatlarining qiymatlarini maqsadli obyektga nusxalaydigan usul. U o'zgartirilgan maqsadli obyektni qaytaradi.

Sintaksis:

            Object.assign(target, ...sources)
            

              
                Copy
              
            
          

Misol:

            const target = { a: 1 };
const source = { b: 2, c: 3 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget === target); // true

            

              
                Copy
              
            
          

Ushbu misolda source obyektidagi b va c xususiyatlari target obyektiga nusxalanadi. Object.assign() asl target obyektini o'zgartiradi va uni qaytaradi.

Spread sintaksisini tushunish

Spread sintaksisi (...) massiv yoki obyekt kabi iterable elementning nol yoki undan ortiq argumentlar (funktsiya chaqiruvlari uchun) yoki elementlar (massiv literallari uchun) yoki kalit-qiymat juftliklari (obyekt literallari uchun) kutilgan joylarda kengaytirilishiga imkon beradi.

Sintaksis (Obyekt literali):

            const newObject = { ...object1, ...object2 };
            

              
                Copy
              
            
          

Misol:

            const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

            

              
                Copy
              
            
          

Bu yerda spread sintaksisi obj1 va obj2 xususiyatlarini birlashtirib, yangi mergedObj obyektini yaratadi.

Ishlashni taqqoslash

Object.assign() va spread sintaksisi o'rtasidagi ishlash farqi JavaScript dvigateliga va manipulyatsiya qilinayotgan obyektlarning murakkabligiga qarab farq qilishi mumkin. Odatda, oddiy obyektni klonlash va birlashtirish uchun spread sintaksisi biroz tezroq bo'ladi. Biroq, farq ko'pincha kichik obyektlar uchun ahamiyatsizdir. Katta obyektlar, yanada murakkab senariylar va takroriy operatsiyalar uchun sizning aniq foydalanish holatingiz uchun eng tezkor yondashuvni aniqlash uchun mikro-benchmarking tavsiya etiladi. Turli senariylarni ko'rib chiqaylik:

1-senariy: Oddiy obyektni klonlash

Bitta obyektni klonlashda spread sintaksisi odatda soddalashtirilgan operatsiyasi tufayli yaxshiroq ishlashni namoyish etadi.

            const original = { a: 1, b: 2, c: 3 };

// Spread sintaksisi
const cloneSpread = { ...original };

// Object.assign()
const cloneAssign = Object.assign({}, original);

            

              
                Copy
              
            
          

2-senariy: Bir nechta obyektni birlashtirish

Bir nechta obyektni birlashtirganda, ikkala usul o'rtasidagi ishlash farqi ko'pincha minimal bo'ladi, lekin spread sintaksisi ko'pincha biroz ustunlikni saqlab qoladi, asosan u zamonaviy JavaScript dvigatellarida mahalliy ravishda amalga oshirilganligi sababli.

            const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Spread sintaksisi
const mergedSpread = { ...obj1, ...obj2, ...obj3 };

// Object.assign()
const mergedAssign = Object.assign({}, obj1, obj2, obj3);

            

              
                Copy
              
            
          

3-senariy: Ko'p xususiyatli katta obyektlar

Benchmarking

Aniq ishlash o'lchovlarini olish uchun Benchmark.js kabi benchmarking vositalaridan foydalanishni o'ylab ko'ring. Ushbu vositalar sizga takroriy testlarni o'tkazishga va muayyan sharoitlarda qaysi usul eng yaxshi ishlashini aniqlash uchun statistikani to'plashga imkon beradi.

Benchmark.js dan foydalanish misoli:

            const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// testlarni qo'shish
suite.add('Spread Syntax', function() {
  const mergedSpread = { ...obj1, ...obj2, ...obj3 };
})
.add('Object.assign()', function() {
  const mergedAssign = Object.assign({}, obj1, obj2, obj3);
})
// tinglovchilarni qo'shish
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// asinxron ishga tushirish
.run({ 'async': true });

            

              
                Copy
              
            
          

Ushbu kod parchasi spread sintaksisining va Object.assign() ning bir nechta obyektni birlashtirishda ishlashini solishtirish uchun Benchmark.js yordamida ishlash benchmarkini qanday sozlashni ko'rsatadi. Skriptni ishga tushirishdan oldin npm install benchmark yordamida kutubxonani o'rnatishni unutmang.

Qo'llash holatlari

Ishlash omil bo'lsa-da, Object.assign() va spread sintaksisi o'rtasidagi tanlov ko'pincha aniq foydalanish holatiga va kodlash uslubi afzalliklariga bog'liq.

Object.assign() dan foydalanish holatlari

• Maqsadli obyektni o'zgartirish: Object.assign() maqsadli obyektni to'g'ridan-to'g'ri o'zgartiradi, bu esa mavjud obyektni joyida yangilashni xohlaganingizda foydali bo'lishi mumkin.
• Eski brauzerlar bilan moslik: Object.assign() spread sintaksisiga nisbatan kengroq brauzer qo'llab-quvvatlashiga ega, bu uni eski muhitlarga mo'ljallangan loyihalar uchun mos qiladi. Eski brauzerlar uchun polyfill kerak bo'lishi mumkin.
• Mavjud kod bazalari bilan integratsiya: Agar siz Object.assign() dan keng foydalanadigan mavjud kod bazasi bilan ishlayotgan bo'lsangiz, unga yopishib olish izchillikni saqlashi va xatolarni kiritish xavfini kamaytirishi mumkin.
• Standart qiymatlarni o'rnatish: Undan obyektga standart qiymatlarni qo'llash, ma'lum xususiyatlar har doim aniqlanishini ta'minlash uchun foydalanish mumkin.

              const defaults = { a: 1, b: 2, c: 3 };
  const options = { a: 10, d: 4 };
  
  const config = Object.assign({}, defaults, options);
  console.log(config); // { a: 10, b: 2, c: 3, d: 4 }
  
              
  
                
                  Copy
                
              
            

Spread sintaksisidan foydalanish holatlari

• Yangi obyektlarni yaratish: Spread sintaksisi asl obyektlarni o'zgartirmasdan yangi obyektlarni yaratishda, immutabellikni targ'ib qilishda juda yaxshi.
• Qisqa sintaksis: Spread sintaksisi ko'pincha yanada o'qilishi va qisqa kodga olib keladi, ayniqsa bir nechta obyektni birlashtirganda.
• React va Redux: React va Redux-da, immutabellik ishlash va holatni boshqarish uchun juda muhim bo'lgan joyda, spread sintaksisi holat obyektlarining yangilangan versiyalarini yaratish uchun keng qo'llaniladi.
• Funktsional dasturlash: U yon ta'sirlardan qochish va o'zgarmas ma'lumotlar bilan ishlash rag'batlantiriladigan funktsional dasturlash tamoyillari bilan yaxshi mos keladi.

Sayoz nusxa va chuqur nusxa

Object.assign() va spread sintaksisi ikkalasi ham sayoz nusxani bajarishini tushunish juda muhim. Bu shuni anglatadiki, agar obyekt ichki obyektlarni o'z ichiga olsa, faqat shu ichki obyektlarga havolalar nusxalanadi, ichki obyektlarning o'zi emas. Nusxalangan obyektda ichki obyektni o'zgartirish asl obyektga ham ta'sir qiladi va aksincha.

Misol:

            const original = {
  a: 1,
  b: { c: 2 }
};

const copied = { ...original };

copied.b.c = 3;

console.log(original.b.c); // 3 - Asl obyekt o'zgartirilgan!

            

              
                Copy
              
            
          

Agar siz chuqur nusxani yaratishingiz kerak bo'lsa, ichki obyektlar ham nusxalangan bo'lsa, quyidagi kabi usullardan foydalanishingiz mumkin:

• JSON.parse(JSON.stringify(object)): Bu oddiy, ammo potentsial jihatdan samarasiz yondashuv, ayniqsa katta yoki murakkab obyektlar uchun. Bundan tashqari, u funktsiyalar yoki dumaloq havolalarni to'g'ri hal qilmaydi.
• Lodash's _.cloneDeep() kabi kutubxonadan foydalanish: Lodash kabi kutubxonalar turli xil chekka holatlarni hal qiladigan optimallashtirilgan chuqur klonlash funktsiyalarini taqdim etadi.
• Maxsus rekursiv chuqur nusxa funksiyasini yozish: Bu sizga klonlash jarayonini boshqarish va ma'lum turdagi ma'lumotlar yoki tuzilmalarni boshqarishga imkon beradi.

Immutabellik

Immutabellik - bu mavjudlarini o'zgartirish o'rniga yangi ma'lumotlar tuzilmalarini yaratishni ta'kidlaydigan dasturlash kontseptsiyasi. Ushbu yondashuv yanada oldindan aytib bo'ladigan kodga, osonroq disk raskadrovkaga va ma'lum senariylarda ishlashni yaxshilashga olib kelishi mumkin. Object.assign() va spread sintaksisi ikkalasi ham immutabellikni targ'ib qilish uchun ishlatilishi mumkin, ammo spread sintaksisi odatda yangi obyektlarni to'g'ridan-to'g'ri yaratish qobiliyati tufayli afzalroqdir.

Immutabellikka erishish uchun Object.assign() dan foydalanish avval yangi maqsadli obyektni yaratishni talab qiladi:

            const original = { a: 1, b: 2 };
const updated = Object.assign({}, original, { a: 10 });

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

            const original = { a: 1, b: 2 };
const updated = { ...original, a: 10 };

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

Amaliy misollar

1-misol: Foydalanuvchi profil ma'lumotlarini yangilash

Tasavvur qiling-a, sizda foydalanuvchi profil obyektiga ega bo'lsangiz va uni formadan yangi ma'lumotlar bilan yangilamoqchisiz. Spread sintaksisidan foydalanib, yangilangan ma'lumotlar bilan yangi obyektni osongina yaratishingiz mumkin:

            const userProfile = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  location: 'New York'
};

const updatedData = {
  email: 'alice.new@example.com',
  location: 'London'
};

const updatedProfile = { ...userProfile, ...updatedData };

console.log(updatedProfile);
// {
//   id: 123,
//   name: 'Alice',
//   email: 'alice.new@example.com',
//   location: 'London'
// }

            

              
                Copy
              
            
          

2-misol: Savatdagi elementlarni boshqarish

Elektron tijorat ilovasida siz savatdagi elementning miqdorini yangilashingiz kerak bo'lishi mumkin. Spread sintaksisidan foydalanib, yangilangan element bilan yangi savat massivini yaratishingiz mumkin:

            const cart = [
  { id: 1, name: 'Mahsulot A', quantity: 2 },
  { id: 2, name: 'Mahsulot B', quantity: 1 }
];

const productIdToUpdate = 1;
const newQuantity = 3;

const updatedCart = cart.map(item =>
  item.id === productIdToUpdate ? { ...item, quantity: newQuantity } : item
);

console.log(updatedCart);
// [
//   { id: 1, name: 'Mahsulot A', quantity: 3 },
//   { id: 2, name: 'Mahsulot B', quantity: 1 }
// ]

            

              
                Copy
              
            
          

3-misol: Ilova sozlamalarini sozlash

Ilova sozlamalarini sozlashda siz standart sozlamalarni foydalanuvchi tomonidan taqdim etilgan sozlamalar bilan birlashtirmoqchi bo'lishingiz mumkin. Object.assign() ushbu maqsad uchun foydali bo'lishi mumkin, ayniqsa siz standart sozlamalar obyektini to'g'ridan-to'g'ri o'zgartirishingiz kerak bo'lsa:

            const defaultSettings = {
  theme: 'light',
  fontSize: 'medium',
  language: 'en'
};

const userSettings = {
  theme: 'dark',
  fontSize: 'large'
};

Object.assign(defaultSettings, userSettings);

console.log(defaultSettings);
// {
//   theme: 'dark',
//   fontSize: 'large',
//   language: 'en'
// }

            

              
                Copy
              
            
          

Bu holda, standart sozlamalar joyida o'zgartiriladi, bu sizning ilovangiz talablariga qarab maqbul yoki maqbul bo'lmasligi mumkin.

Eng yaxshi amaliyotlar

• Sayoz nusxalashni tushunish: Ikkala usul ham sayoz nusxalarni bajarishini biling. Chuqur nusxalash uchun tegishli usullar yoki kutubxonalardan foydalaning.
• Immutabellikni hisobga oling: Iloji bo'lsa, yangi obyektlarni yaratish va immutabellikni targ'ib qilish uchun spread sintaksisiga ustunlik bering.
• Zarur bo'lganda benchmark o'tkazing: Ishlash uchun muhim kod uchun sizning aniq foydalanish holatingiz uchun eng tezkor variantni aniqlash uchun ikkala usulni ham benchmark o'tkazing.
• Kontekstga qarab tanlang: Kodlash uslubingizga, loyiha talablariga va moslik ehtiyojlariga eng mos keladigan usulni tanlang.
• Linters va kod uslubi qo'llanmalaridan foydalaning: Linters va kod uslubi qo'llanmalari orqali Object.assign() va spread sintaksisidan izchil foydalanishni ta'minlang.
• Tanlovingizni hujjatlashtiring: Ayniqsa, murakkab kod bazalarida, bir usulni ikkinchisidan tanlash sababingizni aniq hujjatlashtiring.

Xulosa

Object.assign() va spread sintaksisi JavaScript-da obyektni manipulyatsiya qilish uchun qimmatli vositalardir. Spread sintaksisi ko'pincha biroz yaxshiroq ishlashni taklif qilsa va immutabellikni targ'ib qilsa-da, Object.assign() mavjud obyektlarni o'zgartirish va eski muhitlar bilan moslikni saqlash uchun dolzarb bo'lib qolmoqda. Har bir usulning nozik tomonlarini tushunish sizga asosli qarorlar qabul qilish va yanada samarali va texnik xizmat ko'rsatishga yaroqli kod yozishga imkon beradi.

Ushbu maqolada keltirilgan ishlash xususiyatlari, foydalanish holatlari va eng yaxshi amaliyotlarni hisobga olgan holda, siz JavaScript-ni ishlab chiqish ish jarayonini yaxshilash va global auditoriya uchun mustahkam va kengaytiriladigan ilovalarni yaratish uchun Object.assign() va spread sintaksisidan samarali foydalanishingiz mumkin. Kerak bo'lganda ishlashni optimallashtirgan holda har doim kodning aniqligi va texnik xizmat ko'rsatishga yaroqliligiga ustunlik bering. Mikro-benchmarking va kodingizni profillash sizga ishlashdagi tor joylarni aniqlashga va muayyan senariylarda qaysi usuldan foydalanish haqida ma'lumotlarga asoslangan qarorlar qabul qilishga yordam beradi.