JavaScript Structured Clone: Obyektlarni Chuqur Nusxalashni O'zlashtirish

JavaScript'da obyektlar va massivlarning nusxalarini yaratish keng tarqalgan vazifadir. Oddiy o'zlashtirish (`=`) primitiv qiymatlar uchun ishlasa-da, obyektlar uchun faqat havola (reference) yaratadi. Bu nusxalangan obyektga kiritilgan o'zgarishlar asl nusxaga ham ta'sir qilishini anglatadi. Mustaqil nusxalarni yaratish uchun bizga chuqur nusxalash mexanizmi kerak. Structured clone algoritmi bunga erishishning kuchli va ko'p qirrali usulini taqdim etadi, ayniqsa murakkab ma'lumotlar tuzilmalari bilan ishlaganda.

Structured Clone nima?

Structured clone algoritmi JavaScript'dagi o'rnatilgan mexanizm bo'lib, u JavaScript qiymatlarining chuqur nusxalarini yaratishga imkon beradi. Oddiy o'zlashtirish yoki sayoz nusxalash usullaridan (masalan, `Object.assign()` yoki spread sintaksisi `...`) farqli o'laroq, structured cloning butunlay yangi obyektlar va massivlar yaratadi, barcha ichki xususiyatlarni rekursiv ravishda nusxalaydi. Bu nusxalangan obyektning asl nusxadan to'liq mustaqil bo'lishini ta'minlaydi.

Bu algoritm, shuningdek, web worker'lar o'rtasidagi aloqa uchun va History API yordamida ma'lumotlarni saqlashda yashirin tarzda ishlatiladi. Uning qanday ishlashini tushunish kodingizni optimallashtirishga va kutilmagan xatti-harakatlardan qochishga yordam beradi.

Structured Clone qanday ishlaydi?

Structured clone algoritmi obyekt grafigini aylanib chiqib, duch kelgan har bir obyekt va massivning yangi nusxalarini yaratish orqali ishlaydi. U turli xil ma'lumotlar turlarini, jumladan quyidagilarni qo'llab-quvvatlaydi:

• Primitiv turlar (sonlar, satrlar, mantiqiy qiymatlar, null, undefined) - qiymati bo'yicha nusxalanadi.
• Obyektlar va Massivlar - rekursiv ravishda klonlanadi.
• Sanalar - bir xil vaqt belgisiga ega yangi Date obyektlari sifatida klonlanadi.
• Regular ifodalar - bir xil naqsh va bayroqlarga ega yangi RegExp obyektlari sifatida klonlanadi.
• Blob va Fayl obyektlari - klonlanadi (lekin butun fayl ma'lumotlarini o'qishni o'z ichiga olishi mumkin).
• ArrayBuffers va TypedArrays - asosidagi binar ma'lumotlarni nusxalash orqali klonlanadi.
• Map va Set'lar - rekursiv ravishda klonlanadi, klonlangan kalitlar va qiymatlar bilan yangi Map va Set'lar yaratiladi.

Algoritm, shuningdek, aylana havolalarni (circular references) ham qayta ishlaydi va cheksiz rekursiyaning oldini oladi.

Structured Clone'dan foydalanish

Barcha JavaScript muhitlarida to'g'ridan-to'g'ri `structuredClone()` funksiyasi mavjud bo'lmasada (eski brauzerlarda tabiiy qo'llab-quvvatlash bo'lmasligi mumkin), asosiy mexanizm turli kontekstlarda ishlatiladi. Unga kirishning keng tarqalgan usullaridan biri web worker'lar yoki iframe'lar o'rtasidagi aloqa uchun ishlatiladigan `postMessage` API orqali.

1-usul: `postMessage`'dan foydalanish (Keng moslashuvchanlik uchun tavsiya etiladi)

Ushbu yondashuv ichki tomondan structured clone algoritmidan foydalanadigan `postMessage` API'siga tayanadi. Biz vaqtinchalik iframe yaratamiz, unga `postMessage` yordamida obyektni yuboramiz va keyin uni qaytarib olamiz.

            function structuredClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = ev => resolve(ev.data);
    port2.postMessage(obj);
  });
}

// Foydalanish misoli
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

async function deepCopyExample() {
  const clonedObject = await structuredClone(originalObject);

  console.log("Asl Obyekt:", originalObject);
  console.log("Klonlangan Obyekt:", clonedObject);

  // Klonlangan obyektni o'zgartirish
  clonedObject.address.city = "Los Angeles";

  console.log("Asl Obyekt (o'zgartirishdan keyin):", originalObject); // O'zgarishsiz
  console.log("Klonlangan Obyekt (o'zgartirishdan keyin):", clonedObject); // O'zgartirilgan
}

deepCopyExample();

            

              
                Copy
              
            
          

Ushbu usul turli brauzerlar va muhitlarda keng moslashuvchanlikka ega.

2-usul: Tabiiy `structuredClone` (Zamonaviy muhitlar)

Ko'pgina zamonaviy JavaScript muhitlari endi to'g'ridan-to'g'ri o'rnatilgan `structuredClone()` funksiyasini taklif qiladi. Bu mavjud bo'lganda chuqur nusxalashni amalga oshirishning eng samarali va oddiy usulidir.

            // structuredClone qo'llab-quvvatlanishini tekshirish
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Asl Obyekt:", originalObject);
  console.log("Klonlangan Obyekt:", clonedObject);

  // Klonlangan obyektni o'zgartirish
  clonedObject.address.city = "Paris";

  console.log("Asl Obyekt (o'zgartirishdan keyin):", originalObject); // O'zgarishsiz
  console.log("Klonlangan Obyekt (o'zgartirishdan keyin):", clonedObject); // O'zgartirilgan
}
else {
  console.log("structuredClone ushbu muhitda qo'llab-quvvatlanmaydi. postMessage polifilidan foydalaning.");
}

            

              
                Copy
              
            
          

`structuredClone`'dan foydalanishdan oldin, uning maqsadli muhitda qo'llab-quvvatlanishini tekshirish muhim. Agar qo'llab-quvvatlanmasa, `postMessage` polifili yoki boshqa chuqur nusxalash alternativasiga o'ting.

Structured Clone'ning cheklovlari

Kuchli bo'lishiga qaramay, structured clone'ning ba'zi cheklovlari mavjud:

• Funksiyalar: Funksiyalarni klonlab bo'lmaydi. Agar obyektda funksiya bo'lsa, u klonlash jarayonida yo'qoladi. Klonlangan obyektda bu xususiyat `undefined` ga o'rnatiladi.
• DOM tugunlari: DOM tugunlarini (masalan, veb-sahifadagi elementlar) klonlab bo'lmaydi. Ularni klonlashga urinish xatolikka olib keladi.
• Xatolar: Ba'zi xato obyektlarini ham klonlab bo'lmaydi va structured clone algoritmi ularga duch kelsa, xato yuzaga keltirishi mumkin.
• Prototip zanjirlari: Obyektlarning prototip zanjiri saqlanib qolmaydi. Klonlangan obyektlar o'zlarining prototipi sifatida `Object.prototype`'ga ega bo'ladi.
• Samaradorlik: Chuqur nusxalash, ayniqsa katta va murakkab obyektlar uchun hisoblash jihatidan qimmatga tushishi mumkin. Structured clone'dan foydalanganda, ayniqsa samaradorlik muhim bo'lgan ilovalarda, uning ishlashiga ta'sirini hisobga oling.

Structured Clone'ni qachon ishlatish kerak?

Structured clone bir nechta holatlarda qimmatlidir:

• Web Worker'lar: Asosiy oqim (main thread) va web worker'lar o'rtasida ma'lumotlar uzatishda structured clone asosiy mexanizm hisoblanadi.
• History API: `history.pushState()` va `history.replaceState()` metodlari brauzer tarixida ma'lumotlarni saqlash uchun structured clone'dan foydalanadi.
• Obyektlarni chuqur nusxalash: Obyektning to'liq mustaqil nusxasini yaratishingiz kerak bo'lganda, structured clone ishonchli yechimni taqdim etadi. Bu, ayniqsa, asl nusxaga ta'sir qilmasdan nusxani o'zgartirishni xohlaganingizda foydalidir.
• Serializatsiya va Deserializatsiya: Garchi bu uning asosiy maqsadi bo'lmasa-da, structured clone serializatsiya va deserializatsiyaning asosiy shakli sifatida ishlatilishi mumkin (lekin doimiy saqlash uchun odatda JSON afzalroqdir).

Structured Clone'ga alternativlar

Agar structured clone sizning ehtiyojlaringizga mos kelmasa (masalan, uning cheklovlari yoki samaradorlik muammolari tufayli), quyidagi alternativlarni ko'rib chiqing:

• JSON.parse(JSON.stringify(obj)): Bu chuqur nusxalash uchun keng tarqalgan yondashuv, ammo uning cheklovlari bor. U faqat JSON'ga serializatsiya qilinishi mumkin bo'lgan obyektlar uchun ishlaydi (funksiyalar yo'q, Sanalar satrlarga o'tkaziladi va h.k.) va murakkab obyektlar uchun structured clone'dan sekinroq bo'lishi mumkin.
• Lodash'ning `_.cloneDeep()` funksiyasi: Lodash ko'plab maxsus holatlarni qayta ishlaydigan va yaxshi samaradorlikni taklif qiluvchi ishonchli `cloneDeep()` funksiyasini taqdim etadi. Agar siz loyihangizda Lodash'dan foydalanayotgan bo'lsangiz, bu yaxshi tanlov.
• Maxsus chuqur nusxalash funksiyasi: Siz rekursiyadan foydalanib o'zingizning chuqur nusxalash funksiyangizni yozishingiz mumkin. Bu sizga klonlash jarayoni ustidan to'liq nazoratni beradi, ammo ko'proq kuch talab qiladi va xatolarga moyil bo'lishi mumkin. Aylana havolalarni to'g'ri qayta ishlaganingizga ishonch hosil qiling.

Amaliy misollar va qo'llash holatlari

1-misol: Foydalanuvchi ma'lumotlarini o'zgartirishdan oldin nusxalash

Tasavvur qiling, siz foydalanuvchilarni boshqarish ilovasini yaratmoqdasiz. Foydalanuvchiga o'z profilini tahrirlashga ruxsat berishdan oldin, ularning joriy ma'lumotlarining chuqur nusxasini yaratishni xohlashingiz mumkin. Bu foydalanuvchi tahrirni bekor qilsa yoki yangilash jarayonida xatolik yuz bersa, asl ma'lumotlarga qaytish imkonini beradi.

            let userData = {
  id: 12345,
  name: "Carlos Rodriguez",
  email: "carlos.rodriguez@example.com",
  preferences: {
    language: "es",
    theme: "dark"
  }
};

async function editUser(newPreferences) {
  // Asl ma'lumotlarning chuqur nusxasini yaratish
  const originalUserData = await structuredClone(userData);

  try {
    // Foydalanuvchi ma'lumotlarini yangi afzalliklar bilan yangilash
    userData.preferences = newPreferences;

    // ... Yangilangan ma'lumotlarni serverga saqlash ...

    console.log("Foydalanuvchi ma'lumotlari muvaffaqiyatli yangilandi!");
  } catch (error) {
    console.error("Foydalanuvchi ma'lumotlarini yangilashda xatolik. Asl ma'lumotlarga qaytarilmoqda.", error);
    // Asl ma'lumotlarga qaytarish
    userData = originalUserData;
  }
}

// Foydalanish misoli
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

2-misol: Web Worker'ga ma'lumotlarni yuborish

Web worker'lar hisoblash jihatidan murakkab vazifalarni alohida oqimda bajarishga imkon beradi, bu esa asosiy oqimning javob bermay qolishining oldini oladi. Web worker'ga ma'lumotlar yuborayotganda, ma'lumotlarning to'g'ri uzatilishini ta'minlash uchun structured clone'dan foydalanish kerak.

            // Asosiy oqim
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Ushbu ma'lumotni worker'da qayta ishlang."
};

worker.postMessage(dataToSend);

worker.onmessage = (event) => {
  console.log("Worker'dan qabul qilindi:", event.data);
};

// worker.js (Web Worker)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Worker ma'lumotlarni qabul qildi:", data);

  // ... Ma'lumotlar ustida biroz ishlov berish ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Structured Clone'dan foydalanishning eng yaxshi amaliyotlari

• Cheklovlarni tushuning: Klonlanmaydigan ma'lumotlar turlaridan (funksiyalar, DOM tugunlari va h.k.) xabardor bo'ling va ularni mos ravishda qayta ishlang.
• Samaradorlikni hisobga oling: Katta va murakkab obyektlar uchun structured clone sekin ishlashi mumkin. U sizning ehtiyojlaringiz uchun eng samarali yechim ekanligini baholang.
• Qo'llab-quvvatlashni tekshiring: Agar tabiiy `structuredClone()` funksiyasidan foydalanayotgan bo'lsangiz, uning maqsadli muhitda qo'llab-quvvatlanishini tekshiring. Agar kerak bo'lsa, polifildan foydalaning.
• Aylana havolalarni qayta ishlang: Structured clone algoritmi aylana havolalarni qayta ishlaydi, lekin ma'lumotlar tuzilmalaringizda ulardan ehtiyot bo'ling.
• Keraksiz ma'lumotlarni klonlashdan saqlaning: Faqat nusxalashingiz kerak bo'lgan ma'lumotlarni klonlang. Agar ularning faqat kichik bir qismini o'zgartirish kerak bo'lsa, katta obyektlar yoki massivlarni klonlashdan saqlaning.

Xulosa

JavaScript'ning structured clone algoritmi obyektlar va massivlarning chuqur nusxalarini yaratish uchun kuchli vositadir. Uning imkoniyatlari va cheklovlarini tushunish sizga uni turli holatlarda, web worker'lar bilan aloqadan tortib obyektlarni chuqur nusxalashgacha, samarali ishlatishga imkon beradi. Alternativlarni ko'rib chiqish va eng yaxshi amaliyotlarga rioya qilish orqali siz o'z ehtiyojlaringiz uchun eng mos usuldan foydalanayotganingizga ishonch hosil qilishingiz mumkin.

Har doim samaradorlikka ta'sirini hisobga olishni va ma'lumotlaringizning murakkabligi va hajmiga qarab to'g'ri yondashuvni tanlashni unutmang. Structured clone va boshqa chuqur nusxalash usullarini o'zlashtirib, siz yanada ishonchli va samarali JavaScript kodini yozishingiz mumkin.

Qo'shimcha o'rganish uchun

• MDN Web Docs: Structured clone algoritmi
• MDN Web Docs: structuredClone
• MDN Web Docs: Worker.postMessage()