Javascript 对象赋值、复制还是引用？

在 JavaScript 中，我们使用商对象。当我们将对象值分配给变量时，我们使用 "=" 赋值运算符作为默认方法。我们知道对象存储在内存中的某个位置，变量引用该内存地址。当我们在 JavaScript 中使用对象时，对象的结果会因各种原因而变化。因此，我们必须根据对象的结果来更改或转换、复制或克隆对象。因此，让我们讨论何时以及如何克隆或复制 JavaScript 对象。

• 传递对象引用
• 对象复制或克隆
  1. 浅复制
  2. 深复制

传递对象引用

值存储在该内存地址引用中。现在，如果我们创建一个名为 copylistData 的 变量 并使用 "=" 赋值运算符将其分配给 listData，则 copylistData 将指向 listData 对象的相同内存地址。这个方法称为传递对象引用。 示例： 此方法有 2 个属性 共享引用：listData和copylistData指向同一对象的内存地址的引用。在这种情况下，如果在 listData 中进行任何更改，则其效果也将直接在 copylistData 中。

单一事实来源

：此方法的工作原理类似于单一事实来源。也就是说，当您想要将 copylistData 与 listData 链接或保持这两个变量之间的一致性时，可以使用此方法。

const listData = { a: 1, b: 2 }; 
const copyListData = listData //Assign the listData into copyListData both are poient same memory address reference

copyListData.a = 3;

console.log(listData.a); // Output: 3 

Object Copy or Clone

জাভাস্ক্রিপ্টে arry এবং object কপি করার ক্ষেত্রে ২টি পদ্ধতি ব্যবহার করা হয় "Shallow copy" অন্যটি "Deep Copy" এই দুইটি পদ্ধতি দিয়ে অবজেক্ট কপি করা হলেও কপির ধরন হয় ভিন্নরকম। কোডের সাইড এফেক্ট পরিহার করা এবং ইফেক্টিভ ভাবে state মেনেজ করার জন্য উপরের দুইটি পদ্ধিতর ভূমিকা অপরিহার্য এবং এগুলো কোনটি কিভাবে কাজ করে তা বুঝা অনেক গুরুত্বপূর্ণ।

Shallow Copy

Shallow Copy বলতে বুঝায়, Object অথবা Array এর top level পর্যন্ত কপি বা ডুপ্লিকেট করা । অর্থাৎ কোন একটা object অথবা array এর মেমরিতে থাকা সকল values গুলো কপি করা । কিন্তু সেই অবজেক্ট এর ভিতরে যদি কোন নেস্টেড object অথবা array থাকে তাহলে সেই নেস্টেড object কপি হবে না । তবে সেই ক্ষেত্রে Shallow Copy করার সময় নেস্টেড object এর মেমোরির সেইম রেফারেন্স থেকে যাবে যেটা আমারা উপরে সেকশনে দেখেছিলাম। অবজেক্ট Shallow Copy করার পরেও যদি নেস্টেড অবজেক্ট এর কোন প্রপার্টিজ এর value change করি তাহলে অরজিনাল অবজেক্ট এর মধ্যেও সেই প্রপার্টিজ এর value change হয়ে যাবে।
তবে কোন একটি অবজেক্টকে Shallow Copy করতে চাইলে JS এর Spread operator ব্যবহার করে অবজেক্ট এর Shallow Copy তৈরি করা যায়।

Example

const originalObj  = {
    name: 'Sabbir ',
    address: {
        city: 'Narsingdi ',
        zip: '12345'
    }
}; 

// Creating a shallow copy using the spread operator
const shallowCopyObj  = { ...originalObj};
shallowCopyObj.name = 'Fahad'; // This changes only the shallow copy object  
shallowCopyObj.address.city = 'Dhaka '; // This changes both the shallow copy and the originalObj 

console.log(originalObj.name); // Output: 'Sabbir'
console.log(originalObj.address.city); // Output: 'Dhaka '

উপরের উদাহারনে যখন আমরা shallowCopyObj.name = 'Fahad' করেছি তখন শুধু shallowCopyObj এর name এর value chang হয়েছে কিন্তু এতে originalObj অবজেক্ট এ এর কোন প্রভাব পরবে না। কারণ Shallow Copy করার কারণে আমরা originalObj অবজেক্ট এর একটি ক্লোন তৈরি করেছি । অনুরূপ ভাবে যখন আমরা shallowCopyObj.address.city = 'Dhaka '; করেছি তখন এটি shallowCopyObj এবং originalObj অবজেক্ট দুই জায়গায় chang হয়েছে কারণ city প্রপারটিজটি address অবজেক্ট এর একটি প্রপারটিজ। অর্থাৎ address এর ভিতরে থাকা অবজেক্টটি মেমোরির একটি জায়গায় ষ্টোর করা হয়েছে এবং সেই মেমোরির অ্যাড্রেস এর রেফারেন্স originalObj এবং shallowCopyObj দুই জায়গায় ব্যবহার হচ্ছে বিধায় যেকোনো এক জায়গায় change হওয়ার করনে উভয় জায়গায় পরিবর্তন হচ্ছে।

কখন এই পদ্ধিতি ব্যবহার করা উচিত

1. যখন আপনি ধুমাত্র টপ-লেভেল প্রোপার্টিজ কপি করতে চান এবং নেস্টেড অবজেক্ট shareable করতে চান তখন ব্যবহার করা যেতে পারে।
2. সিম্পল state আপডেট এর ক্ষেত্রে অথবা যখন immutable এর প্রয়োজনীয়তা হয় তখন এই পদ্ধতিটি যথেষ্ট।

Deep Copy

Deep Copy বলতে বুঝায় কোন একটি object অথবা array এর সব level পর্যন্ত কপি বা ক্লোন করা । অর্থাৎ অবজেক্টে থাকা সকল লেয়ার এর values, নেস্টেড object সহ সকল কিছু কপি করা যা অরজিনাল object বা array এর থেকে সম্পূর্ণ স্বাধীন। এর ফলে কপি অবজেক্ট এর যেকোনো জায়গায় change হলে অরজিনাল অবজেক্ট এর মধ্যে কোন ধরনের প্রভাব পরবে না। এবার আলোচনা করা যাক কোন কোন উপায়ে deep copy করা যেতে পারে।

Example:

const originalObj = {
    name: 'Sabbir ',
    address: {
        city: 'Narsingdi ',
        zip: '12345'
    } 
};

// Creating a deep copy using JSON method 
const deepCopyObj  = JSON.parse(JSON.stringify(originalObj ))
deepCopy.name = 'Hasan '; // This changes only deepCopyObj
deepCopyObj.address.city = 'Dhaka '; // This changes only the deepCopyObj

console.log(original.name); // Output: 'Sabbir ' 
console.log(original.address.city); // Output: 'Narsingdi ' 

উপরের উদাহারনে, যখন আমরা deepCopyObj.name এবং deepCopyObj.address.city তে পরিবর্তন করেছি তখন শুধু deepCopyObj object এই পরিবর্তন হয়েছে orginalObj object অপরিবর্তিত রেখে।

যেই উপায় গুলোতে object কে deep copy বা clone করা যেতে পারে:

JSON Method : কোন object অথবা array কে Deep Copy করার জন্য সব থেকে সহজ এবং কমন উপায় হচ্ছে object বা array কে JSONএ কনভার্ট করে তারপর JSON থেকে পার্স করে js object এ কনভার্ট করা। সেই জন্য আমরা JSON এর দুইটি মেথড ব্যবহার করতে পারি । JSON.stringify() মেথড ইউজ করবো js object কে json এ কনভার্ট করার জন্য এবং json এ কনভার্ট হওয়ার পর JSON.parse() মেথড ইউজ করবো json কে js object এ রূপান্তর করার জন্য। তবে এই মেথডের কিছু লিমিটেশন রয়েছে যেমন অবজেক্ট যখন আমরা json এ কনভার্ট করতে যাবো, তখন function, undefiand, NaN, এবং সার্কুলার রেফারেন্স এসব সাপোর্ট করে না । কারণ json নন সিরিয়ালাইজেবল ডাটা (যেমন : function, undefiend , bigInt ,NaN ইত্যাদি ) গুলো কপি করতে পারেনা।

Lodash এর _.cloneDeep মেথড: এই Lodash লাইব্রেরী _.cloneDeep নামক একটি মেথড প্রদান করে যেটি দিয়ে সহজে যেকোনো কমপ্লেক্স object বা array কে সহজে deep clone করা যায় ।

এছাড়াও আরও অনেক উপায় রয়েছে object deep copy করার জন্য যেমন structuredClone() মেথড । তবে উপরের উপায় গুলো সব থেকে কমন ইউজ করা হয়।

কখন এই পদ্ধিতি ব্যবহার করা উচিত
কমপ্লেক্স object এর জন্য একটি ইন্ডিপেন্ডেন্ট অবজেক্ট ক্লোন করা যেটি সম্পূর্ণ ভাবে আলাদা এবং নেস্টেড object বা array সহ ক্লোন করা।

以上是Javascript 对象赋值、复制还是引用？的详细内容。更多信息请关注PHP中文网其他相关文章！