JavaScript'te TypedArray

Bu makale, JavaScript'teki TypedArray'i açıklar.

TypedArray'in temel kavramını, her bir türünü, nasıl kullanılacağını ve belirli kullanım durumlarını ayrıntılı olarak açıklayacağız.

YouTube Video

JavaScript'te TypedArray

JavaScript'teki TypedArray, tamponlanmış ikili verileri verimli bir şekilde işlemek için bir nesnedir. TypedArray, belirli veri türlerine dayalı olarak belleği tahsis eder ve manipüle eder. Normal dizilerden farklı olarak, TypedArray yalnızca sabit boyutlu ikili verileri tutabilir, rastgele veri türlerini değil.

TypedArray'in Temel Yapısı

TypedArray'in ana bileşenleri ArrayBuffer ve TypedArray'in kendisidir.

• ArrayBuffer: Bellekte sabit boyutlu bir tampon olup, ikili veri tahsis eder. Bu tampon yalnızca bir veri alanıdır ve doğrudan okunamaz veya yazılamaz.
• TypedArray: Tampona belirli bir veri türü uygulayan ve veri erişimi ile manipülasyonunu sağlayan bir sarmalayıcı nesne.

Temel Kullanım Örneği

Aşağıda, bir ArrayBuffer oluşturulan ve ardından buna dayalı bir TypedArray oluşturulan bir örnek bulunmaktadır.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• Bu örnekte, bir ArrayBuffer oluşturulur ve ardından o tampon temel alınarak bir Uint8Array yapılır. Her öğe, belirli bir aralık içinde yalnızca değer depolayan 8 bitlik bir işaretsiz tamsayı olarak ele alınır.

TypedArray Türleri

Her veri türü için farklı TypedArray türleri vardır. Ana türler şunlardır.

Bu TypedArraylar hafıza açısından verimlidir ve büyük miktarda veriyi işlemek için etkilidir.

TypedArrayları Yönetmek

TypedArray içinde verilere, normal bir dizi gibi indeksleri kullanarak erişebilirsiniz, ancak bunun yanı sıra birkaç özel yöntem de sunulmaktadır.

Değerleri Ayarlama

TypedArray içinde, set yöntemi kullanılarak bir kerede birden fazla değer atanabilir.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• Bu kod, set metodunu kullanarak bir Int16Array'a birden fazla değeri aynı anda atar ve her bir öğeyi konsolda gösterir.

Alt Dizi Elde Etmek

TypedArray'ın bir kısmını alt dizi olarak elde etmek için subarray yöntemini kullanın. Bu, orijinal TypedArray ile aynı belleği referans alır.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• Bu kod, subarray metodunu kullanarak bir Int16Array'dan belirli bir aralıktaki öğeleri alır ve alt diziyi konsolda gösterir.

Bellekleri Kopyalama

TypedArray bellekleri başka bir TypedArray'e de kopyalanabilir. Set yöntemi kullanılarak belirli bir pozisyondan itibaren kopyalama yapılabilir.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• Bu kod, set metodunu kullanarak bir Uint8Array dizisinin içeriğini başka bir diziye kopyalar ve kopyalanan diziyi konsolda gösterir.

DataView Kullanımı

TypedArray sabit bir veri tipiyle bellekleri işlerken, DataView çift yönlü ofsetler ve veri tipleri ile ikili verileri esnek bir şekilde manipüle etmeye olanak tanıyan bir arayüzdür. Bu, aynı bellek içerisinde farklı türlerin karışmasına olanak tanır.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• Bu kod, bir DataView kullanarak aynı bellekte farklı veri türleri—32 bit tamsayılar ve 32 bit kayan noktalı sayılar—yazar ve sonuçları kontrol eder.

• DataView, TypedArray'dan daha fazla veri erişim esnekliği sunar ve özellikle ikili format dosyalar veya ağ protokolleriyle çalışırken kullanışlıdır.

TypedArray Kullanım Alanları

TypedArray genellikle büyük miktarda ikili veriyi verimli bir şekilde işlemek için kullanılır. Belirli kullanım alanları arasında aşağıdakiler bulunur:.

Görüntü İşleme

TypedArray, görüntü verilerinin piksel bilgilerini manipüle ederken kullanılır. Uint8Array kullanılarak her pikselin RGBA değerleri tutulur ve görüntü düzenleme ve işleme yapılır.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Bu kod, bir Uint8Array kullanarak RGBA formatında 100 genişlikte ve 100 yükseklikte görüntü verisi oluşturur ve tüm pikselleri kırmızıya ayarlar.

WebAssembly ile Entegrasyon

TypedArray, JavaScript ve WebAssembly arasında ikili veri değişimi için kullanılır. JavaScript ve WebAssembly'nin bellek alanını ArrayBuffer aracılığıyla paylaşarak hızlı veri değişimi mümkündür.

Ses ve video verilerinin işlenmesi

TypedArray, ses ve video işlemede önemli bir rol oynar. Ses dalga formlarını Float32Array içinde depolayarak oynatma ve işlem yapabilirsiniz.

Sonuç

TypedArray, büyük miktarda ikili veriyi verimli bir şekilde işlemek için güçlü bir araçtır. Görüntü işleme, WebAssembly ve ses/video veri işleme gibi performans açısından kritik uygulamalarda özellikle faydalıdır. TypedArray, normal dizilere benzer bir API'ye sahiptir ancak bellek kullanımı ve veri tipleriyle ilgili kısıtlamalar vardır, bu yüzden doğru kullanım ayrımı gereklidir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video