1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
---
title: जावास्क्रिप्ट टाईप्ड सरणियाँ
slug: Web/JavaScript/टाईप्ड_सरणियाँ
tags:
- जावास्क्रिप्ट
- मार्गदर्शिका
translation_of: Web/JavaScript/Typed_arrays
---
<div>{{JsSidebar("Advanced")}}</div>
<div><span class="seoSummary"><strong>जावास्क्रिप्ट टाईप्ड सरणियाँ</strong> सरणी-जैसी वस्तुऐं हैं जो स्मृति बफ़रों में कच्चे बाइनरी डेटा को पढ़ने और लिखने के लिए एक तंत्र प्रदान करती हैं।</span> जैसा कि आप पहले से जानते होंगे, {{jsxref ("Array")}} वस्तुऐं क्रम में बढ़ती और सिकुड़ती हैं और उनका कोई भी जावास्क्रिप्ट मूल्य हो सकता है। जावास्क्रिप्ट इंजन अनुकूलन करते रहते हैं ताकि ये सरणियाँ तेज़ हों।</div>
<p>हालाँकि, जैसे-जैसे वेब एप्लिकेशनें अधिक से अधिक शक्तिशाली होते जा रही हैं, वैसे-वैसे ऑडियो और वीडियो फाइलों में हेरफेर करने जैसी सुविधाऐं जोड़ना, WebSockets का उपयोग करते हूए कच्चे डेटा तक पहुंचना, इत्यादि हालातों से यह स्पष्ट होता है कि जावास्क्रिप्ट कोड का कच्चे बाइनरी डेटा को जल्दी और आसानी से हेरफेर कर पाना सहायक होगा। यहीं पर टाईप्ड सरणियाँ काम आती हैं। जावास्क्रिप्ट टाईप्ड सरणी में प्रत्येक वस्तु एक कच्चा बाइनरी मान है जो ८-बिट पूर्णांकों से लेकर ६४-बिट फ्लोटिंग-पॉइंट संख्याओं में से एक समर्थित स्वरूपों में है।</p>
<p>हालाँकि, टाईप्ड सरणियों को सामान्य सरणियों के साथ भ्रमित नहीं किया जाना है, क्योंकि टाईप्ड सरणी पर {{jsxref ("Array.isArray()")}} कॉल करना <code>false</code> देता है। इसके अलावा, सामान्य सरणियों के लिए उपलब्ध सभी तरीके (जैसे <code>push</code> और <code>pop</code>) टाईप्ड सरणियों द्वारा समर्थित नहीं हैं।</p>
<h2 id="बफ़र_और_दृश्य_टाईप्ड_सरणी_वास्तुकला">बफ़र और दृश्य: टाईप्ड सरणी वास्तुकला</h2>
<p>अधिकतम लचीलापन और दक्षता प्राप्त करने के लिए, जावास्क्रिप्ट टाईप्ड सरणियाँ कार्यान्वयन को बफ़रों और दृश्यों में विभाजित करती है। एक बफ़र ({{jsxref ("ArrayBuffer")}} वस्तु द्वारा लागू किया गया) डेटा के एक हिस्सा का प्रतिनिधित्व करने वाली एक वस्तु है; इसका कोई प्रारूप नहीं है और इसकी सामग्री तक पहुँचने के लिए कोई तंत्र नहीं है। एक बफर में निहित स्मृति तक पहुंचने के लिए, आपको एक दृश्य का उपयोग करने की आवश्यकता है। एक दृश्य एक संदर्भ प्रदान करता है - वह है, एक डेटा प्रकार, शुरूआती ऑफ़सेट, और तत्वों की संख्या - जो डेटा को टाईप्ड सरणी में बदल देती है।</p>
<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
<h3 id="ArrayBuffer">ArrayBuffer</h3>
<p>{{Jsxref ("ArrayBuffer")}} एक डेटा प्रकार है जिसका उपयोग सामान्य, निश्चित-आकार बाइनरी डेटा बफर को दर्शाने के लिए किया जाता है। आप सीधे एक ArrayBuffer की सामग्री में हेरफेर नहीं कर सकते हैं; इसके बजाय, आप टाईप्ड सरणी व्यू या एक {{jsxref ("DataView")}} बनाते हैं, जो किसी विशिष्ट प्रारूप में बफर का प्रतिनिधित्व करता है, और बफर की सामग्री को पढ़ने और लिखने के लिए इसका उपयोग करते हैं।</p>
<h3 id="टाईप्ड_सरणी_दृश्य">टाईप्ड सरणी दृश्य</h3>
<p>टाईप्ड सरणी व्यू में स्व-वर्णनात्मक नाम होते हैं और सभी सामान्य संख्यात्मक प्रकार जैसे <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> और इसके आगे के दृश्य प्रदान करते हैं। <code>Uint8ClampedArray</code> एक विशेष टाईप्ड सरणी व्यू है। यह ० और २५५ के बीच मानों को जकड़ता है। यह <a href="/en-US/docs/Web/API/ImageData">कैनवस डेटा प्रसंस्करण</a> के लिए उपयोगी है, उदाहरण के रूप में।</p>
<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
<h3 id="DataView">DataView</h3>
<p>{{Jsxref ("DataView")}} एक निम्न-स्तरीय अंतराफलक है जो बफर को मनमाना डेटा पढ़ने और लिखने के लिए एक getter/setter API प्रदान करता है। उदाहरण के लिए, विभिन्न प्रकार के डेटा से निपटने के दौरान यह उपयोगी है। टाईप्ड सरणी व्यू आपके मंच के मूल बाइट-क्रम ({{Glossary ("Endianness")}}) देखें। <code>DataView</code> के साथ आप बाइट-क्रम को नियंत्रित करने में सक्षम हैं। यह डिफ़ॉल्ट रूप से big-endian है और getter/setter विधियों से little-endian पर सेट किया जा सकता है।</p>
<h2 id="टाईप्ड_सरणी_का_उपयोग_करने_वाले_Web_APIs">टाईप्ड सरणी का उपयोग करने वाले Web APIs</h2>
<p>ये Web APIs के कुछ उदाहरण हैं जो टाईप्ड सरणियों का उपयोग करते हैं; अन्य और भी हैं, और हर समय अधिक जोड़े जा रहे हैं।</p>
<dl>
<dt><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()" title="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt>
<dd>The <code>FileReader.prototype.readAsArrayBuffer()</code> विधि निर्दिष्ट <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> या <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/File" title="/en-US/docs/DOM/File"><code>File</code></a> की सामग्री को पढ़ना शुरू करती है.</dd>
<dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt>
<dd><code>XMLHttpRequest</code> वस्तु की <code>send()</code> विधि अब टाईप्ड सरणियों और {{jsxref ("ArrayBuffer")}} वस्तुओं को तर्क के रूप में समर्थन करती है।</dd>
<dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData">ImageData.data</a></code></dt>
<dd>{{Jsxref ("Uint8ClampedArray")}} RGBA क्रम में डेटा युक्त एक आयामी सरणी का प्रतिनिधित्व करती है, जिसमें <code>०</code> और <code>२५५</code> समावेशी के बीच पूर्णांक मान होते हैं।</dd>
</dl>
<h2 id="उदाहरण">उदाहरण</h2>
<h3 id="बफ़रों_के_साथ_दृश्यों_का_उपयोग_करना">बफ़रों के साथ दृश्यों का उपयोग करना</h3>
<p>सबसे पहले, हमें १६-बाइटों के निश्चित-आकार की एक बफर बनाने की आवश्यकता होगी:</p>
<pre class="brush:js">let buffer = new ArrayBuffer(16);
</pre>
<p>इस क्षण पर, हमारे पास स्मृति का एक हिस्सा है जिसकी सभी बाइट्स पहले से ० हैं। हालांकि, बहुत कुछ ऐसा नहीं है जिसे हम इसके साथ कर सकते हैं। हम पुष्टि कर सकते हैं कि यह वास्तव में १६ बाइट लंबा है, और इसके बारे में है:</p>
<pre class="brush:js">if (buffer.byteLength === 16) {
console.log("Yes, it's 16 bytes.");
} else {
console.log("Oh no, it's the wrong size!");
}
</pre>
<p>इससे पहले कि हम वास्तव में इस बफर के साथ काम कर सकें, हमें एक दृश्य बनाने की आवश्यकता है। आइए एक दृश्य बनाते हैं जो बफर में डेटा को ३२-बिट हस्ताक्षरित पूर्णांक की एक सरणी के रूप में देखता है:</p>
<pre class="brush:js">let int32View = new Int32Array(buffer);
</pre>
<p>अब हम सामान्य सरणी की तरह ही सरणी में तत्वों तक पहुँच सकते हैं:</p>
<pre class="brush:js">for (let i = 0; i < int32View.length; i++) {
int32View[i] = i * 2;
}
</pre>
<p>यह ०, २, ४ और ६ मानों के साथ सरणी में ४ तत्वों को भरता है (प्रत्येक ४ बाइट में ४ तत्व कुल १६ बाइट बनाते है)।</p>
<h3 id="एक_ही_डेटा_पर_कई_दृश्य">एक ही डेटा पर कई दृश्य</h3>
<p>चीजें वास्तव में दिलचस्प होने लगती हैं जब आप विचार करते हैं कि आप एक ही डेटा पर कई दृश्य बना सकते हैं। उदाहरण के लिए, ऊपर दिया गया कोड, हम इस तरह जारी रख सकते हैं:</p>
<pre class="brush:js">let int16View = new Int16Array(buffer);
for (let i = 0; i < int16View.length; i++) {
console.log('Entry ' + i + ': ' + int16View[i]);
}
</pre>
<p>यहां हम एक १६-बिट पूर्णांक दृश्य बनाते हैं जो मौजूदा ३२-बिट दृश्य के समान बफर को साझा करता है और हम बफर में सभी मानों को १६-बिट पूर्णांक के रूप में आउटपुट करते हैं। अब हम आउटपुट ०, ०, २, ०, ४, ०, ६, ० प्राप्त करते हैं।</p>
<p>आप एक कदम आगे जा सकते हैं, यद्यपि। इस पर विचार करो:</p>
<pre class="brush:js">int16View[0] = 32;
console.log('Entry 0 in the 32-bit array is now ' + int32View[0]);
</pre>
<p>इससे आउटपुट "Entry 0 in the 32-bit array is now 32" आता है। दूसरे शब्दों में, दो सरणियों को सरलता से एक ही डेटा बफर पर देखा जाता है, इसे विभिन्न स्वरूप समझकर। आप यह किसी भी <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">प्रकार के दृश्य</a> के साथ कर सकते हैं।</p>
<h3 id="जटिल_डेटा_संरचनाओं_के_साथ_काम_करना">जटिल डेटा संरचनाओं के साथ काम करना</h3>
<p>एकल बफर को विभिन्न प्रकारों के कई दृश्यों के साथ जोड़कर, बफर में अलग-अलग ऑफसेटों पर शुरू करके, आप डेटा वस्तुओं में कई डेटा प्रकारों के साथ खेल सकते हैं। यह आपको, उदाहरण के लिए, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="WebGL">WebGL</a> से जटिल डेटा संरचनाओं, डेटा फ़ाइलों, या C संरचनाओं का उपयोग करते समय आपको जो <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/js-ctypes" title="js-ctypes">js-ctypes</a> का उपयोग करने की आवश्यकता होती है, उनके साथ खेलना देता है।</p>
<p>इस C संरचना पर विचार करें:</p>
<pre class="brush:cpp">struct someStruct {
unsigned long id;
char username[16];
float amountDue;
};</pre>
<p>आप इस तरह से इस प्रारूप में डेटा युक्त एक बफर का उपयोग कर सकते हैं:</p>
<pre class="brush:js">let buffer = new ArrayBuffer(24);
// ... read the data into the buffer ...
let idView = new Uint32Array(buffer, 0, 1);
let usernameView = new Uint8Array(buffer, 4, 16);
let amountDueView = new Float32Array(buffer, 20, 1);</pre>
<p>फिर आप उपयोग कर सकते हैं, उदाहरण के लिए, <code>amountDueView[0]</code> के कारण राशि।</p>
<div class="note"><strong>ध्यान दें:</strong> C संरचना में <a href="https://en.wikipedia.org/wiki/Data_structure_alignment">डेटा संरचना संरेखण</a> मंच-निर्भर है। इन पैडिंग मतभेदों के लिए सावधानी और विचार करें।</div>
<h3 id="सामान्य_सरणियों_में_रूपांतरण">सामान्य सरणियों में रूपांतरण</h3>
<p>निश्चित-आकार सरणी को संसाधित करने के बाद, {{jsxref ("Array")}} प्रोटोटाइप से लाभ उठाने के लिए इसे सामान्य सरणी में परिवर्तित करना कभी-कभी उपयोगी होता है। यह {{jsxref ("Array.from")}}, या निम्न कोड का उपयोग करके किया जा सकता है जहाँ <code>Array.from</code> असमर्थित है।</p>
<pre class="brush:js">let typedArray = new Uint8Array([1, 2, 3, 4]),
normalArray = Array.prototype.slice.call(typedArray);
normalArray.length === 4;
normalArray.constructor === Array;
</pre>
<h2 id="विशेष_विवरण">विशेष विवरण</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">विशेष विवरण</th>
<th scope="col">स्थिति</th>
<th scope="col">टिप्पणी</th>
</tr>
<tr>
<td>{{SpecName('Typed Array')}}</td>
<td>{{Spec2('Typed Array')}}</td>
<td>ईसीएमएस्क्रिप्ट २०१५ द्वारा अभिहित।</td>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>ECMA मानक में प्रारंभिक परिभाषा।</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="ब्राउज़र_संगतता">ब्राउज़र संगतता</h2>
<div class="hidden">इस पृष्ठ पर संगतता तालिका संरचित डेटा से उत्पन्न होती है। यदि आप डेटा में योगदान करना चाहते हैं, तो कृपया <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> देखें और हमें एक पुल अनुरोध भेजें।</div>
<p>{{Compat("javascript.builtins.Int8Array")}}</p>
<h2 id="यह_भी_देखें">यह भी देखें</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li>
<li><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
<li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Faster Canvas Pixel Manipulation with Typed Arrays</a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Typed Arrays: Binary Data in the Browser</a></li>
<li>{{Glossary("Endianness")}}</li>
</ul>
|
