जावास्क्रिप्ट में `ArrayBuffer`

यह लेख जावास्क्रिप्ट में ArrayBuffer की व्याख्या करता है।

ArrayBuffer के बारे में सब कुछ समझाएंगे, इसकी मूल जानकारी से लेकर उपयोग, संबंधित प्रकार और व्यावहारिक अनुप्रयोगों तक।

YouTube Video

जावास्क्रिप्ट में ArrayBuffer

जावास्क्रिप्ट का ArrayBuffer लो-लेवल बाइनरी डेटा को संभालने के लिए एक ऑब्जेक्ट है और यह विशेष रूप से WebAPIs, फाइल ऑपरेशन्स, और नेटवर्क कम्युनिकेशन्स में बाइनरी डेटा को प्रबंधित करने के लिए उपयोगी है।

ArrayBuffer क्या है

ArrayBuffer एक डेटा संरचना है जो निश्चित लंबाई वाले बाइनरी डेटा को प्रबंधित करता है। यह कच्चे बाइनरी डेटा को संभालने की अनुमति देता है जिसे सामान्य जावास्क्रिप्ट ऐरे या ऑब्जेक्ट द्वारा नहीं संभाला जा सकता।

ArrayBuffer स्वयं डेटा को सीधे प्रबंधित नहीं कर सकता। इसके बजाय, डेटा को TypedArray या DataView का उपयोग करके एक ArrayBuffer के आधार पर पढ़ा और लिखा जाता है।

ArrayBuffer निम्नलिखित स्थितियों में विशेष रूप से उपयोगी है।

• नेटवर्क से प्राप्त बाइनरी डेटा को प्रोसेस करते समय।
• जब Web Worker में कुशल डेटा साझा करना आवश्यक हो।
• जब Canvas या WebGL के साथ छवि प्रसंस्करण या 3डी रेंडरिंग की जा रही हो।
• जब फ़ाइलों (विशेष रूप से बाइनरी फ़ाइलों) के साथ काम किया जा रहा हो।

ArrayBuffer बनाना

सबसे पहले, चलो ArrayBuffer का एक उदाहरण कैसे बनाएं, इस पर शुरू करते हैं। ArrayBuffer बाइट इकाइयों में मेमोरी आवंटित करता है, इसलिए आप इसके निर्माण के समय इसका आकार निर्दिष्ट करते हैं।

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• इस उदाहरण में, 16 बाइट्स का बफर आवंटित किया गया है। यह बफर अभी तक कोई डेटा नहीं रखता।

TypedArray का उपयोग करके डेटा को प्रबंधित करना

आप सीधे ArrayBuffer का उपयोग नहीं कर सकते हैं, इसलिए आप डेटा पढ़ने और लिखने के लिए TypedArray का उपयोग करते हैं। TypedArray विभिन्न प्रकार के व्यू प्रदान करता है जैसे कि Int8Array और Float32Array, जिससे बाइनरी डेटा तक प्रभावी पहुंच संभव होती है।

Int8Array का उपयोग करते हुए उदाहरण

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42

• Int8Array प्रत्येक बाइट में डेटा स्टोर कर सकता है, जिससे बफर में 8 तत्व रखे जा सकते हैं। इस प्रकार, विभिन्न प्रकार के दृश्य का उपयोग करके, आप डेटा को प्रभावी ढंग से प्रबंधित कर सकते हैं।

अन्य TypedArray के उदाहरण

JavaScript में TypedArray के कई प्रकार होते हैं। उदाहरण के लिए, यदि आप 32-बिट असाइन किए गए पूर्णांक को प्रबंधित करना चाहते हैं, तो आप Uint32Array का उपयोग करते हैं।

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array डेटा को 4-बाइट इकाइयों में संग्रहीत कर सकता है, इसलिए बफ़र में चार तत्व रखे जा सकते हैं। आप जिस डेटा को प्रबंधित कर रहे हैं उसके प्रकार के आधार पर उचित TypedArray का चयन करना महत्वपूर्ण है।

DataView का उपयोग करके लचीले डेटा प्रबंधन

TypedArray केवल एक निश्चित प्रकार के डेटा को प्रबंधित कर सकता है, लेकिन DataView का उपयोग करके, आप किसी भी प्रकार का डेटा किसी भी स्थान पर लिख सकते हैं। यह विशेष रूप से तब उपयोगी होता है जब बफ़र्स में मिश्रित डेटा प्रकार होते हैं।

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

DataView का उपयोग करके, आप बाइट ऑफसेट निर्दिष्ट कर सकते हैं और विभिन्न प्रकार के डेटा को पढ़ या लिख सकते हैं। यह नेटवर्क प्रोटोकॉल या फाइल प्रारूप जैसे जटिल बाइनरी संरचनाओं को प्रबंधित करते समय बहुत उपयोगी है।

एंडियनेस पर विचार

DataView का उपयोग करते समय, आपको एंडियनेस (बाइट क्रम) पर भी ध्यान देना होगा। कंप्यूटर आर्किटेक्चर के आधार पर, मेमोरी में डेटा के भंडारण का क्रम अलग हो सकता है। DataView विधियों में एंडियनेस निर्दिष्ट करने के लिए विकल्प होते हैं।

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

यदि आप सही एंडियनेस निर्दिष्ट नहीं करते हैं, तो विभिन्न वातावरणों में डेटा सही ढंग से व्याख्या नहीं किया जा सकता है, इसलिए नेटवर्क संचार या फाइल संचालन में विशेष रूप से सतर्क रहना महत्वपूर्ण है।

ArrayBuffer के अनुप्रयोग

ArrayBuffer एक शक्तिशाली उपकरण है जिसका उपयोग अक्सर वेब विकास और ब्राउज़र APIs में किया जाता है। आइए अनुप्रयोगों के कुछ उदाहरण देखें।

बाइनरी डेटा प्राप्त करना और प्रबंधन करना

उदाहरण के लिए, आप XMLHttpRequest या fetch API का उपयोग करके सर्वर से बाइनरी डेटा प्राप्त कर सकते हैं और इसे ArrayBuffer के रूप में प्रबंधित कर सकते हैं।

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });

• इस उदाहरण में, सर्वर से इमेज डेटा प्राप्त किया जाता है और इसे Uint8Array के रूप में प्रबंधित किया जाता है। इस प्रकार, आप सर्वर से प्राप्त डेटा को ArrayBuffer का उपयोग करके प्रबंधित कर सकते हैं।

WebGL में उपयोग

WebGL में, ArrayBuffer का उपयोग कुशलतापूर्वक बाइनरी डेटा जैसे कि वर्टेक्स डेटा और रंग डेटा को प्रबंधित करने के लिए किया जाता है।

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• इस उदाहरण में, Float32Array का उपयोग आयत के वर्टेक्स कोऑर्डिनेट को परिभाषित करने और इसे WebGL बफ़र में भेजने के लिए किया जाता है।

मेमोरी प्रबंधन और ArrayBuffer

ArrayBuffer बाइट स्तर पर मेमोरी को प्रबंधित करता है, जिससे यह बहुत कुशल हो जाता है, लेकिन आपको मेमोरी प्रबंधन में सावधानी बरतने की आवश्यकता है। जब बड़े बाइनरी डेटा का उपयोग किया जाता है, तो अनुपयोगी ArrayBuffers को सही तरीके से रिलीज़ करना महत्वपूर्ण है। हालांकि जावास्क्रिप्ट स्वचालित रूप से गैर्बेज कलेक्शन करता है, लेकिन यदि एक ArrayBuffer का संदर्भ 계속 बना रहता है, तो यह मेमोरी लीक का कारण बन सकता है।

सारांश

ArrayBuffer जावास्क्रिप्ट में बाइनरी डेटा प्रोसेसिंग के लिए आधार प्रदान करता है। TypedArray और DataView को मिलाकर, बाइनरी डेटा को कुशलतापूर्वक और लचीले तरीके से संभालना संभव है। वे वेब विकास में अपरिहार्य उपकरण हैं, खासकर उन कई स्थितियों में जहाँ नेटवर्क कम्युनिकेशन और WebGL जैसे बाइनरी डेटा को संभालने की आवश्यकता होती है। उन्हें सही तरीके से समझकर और उपयुक्त रूप से उपयोग करके, आप प्रदर्शन और दक्षता में सुधार कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video