JavaScript'te `ArrayBuffer`

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

ArrayBuffer hakkında her şeyi açıklayacağız; temellerinden kullanım şekillerine, ilgili türlerine ve pratik uygulamalarına kadar.

YouTube Video

JavaScript'te ArrayBuffer

JavaScript'in ArrayBuffer'i, düşük seviyeli ikili verileri işlemek için bir nesnedir ve WebAPI'ler, dosya işlemleri ve ağ iletişimlerinde ikili verileri yönetmek için özellikle kullanışlıdır.

ArrayBuffer Nedir

ArrayBuffer, sabit uzunluklu ikili verileri işlemek için bir veri yapısıdır. Normal JavaScript dizileri veya nesneleri tarafından işlenemeyen ham ikili verilerin işlenmesine olanak tanır.

ArrayBuffer kendisi doğrudan veri işleyemez. Bunun yerine, veriler TypedArray veya DataView kullanılarak bir ArrayBuffer üzerinden okunur ve yazılır.

ArrayBuffer özellikle aşağıdaki durumlarda faydalıdır.

• Ağdan alınan ikili verileri işlerken
• Web Worker içinde verimli veri paylaşımı gerektiğinde.
• Canvas veya WebGL ile görüntü işleme veya 3D render yaparken.
• Dosyaları (özellikle ikili dosyaları) işlerken.

ArrayBuffer Oluşturma

Önce, bir ArrayBuffer örneğinin nasıl oluşturulacağına başlayalım. ArrayBuffer, bellek tahsisini bayt biriminde yapar, bu yüzden oluşturulurken boyutunu belirtirsiniz.

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

• Bu örnekte, 16 baytlık bir tampon tahsis ediliyor. Bu tampon şu an için herhangi bir veri içermiyor.

TypedArray ile Verileri İşlemek

ArrayBuffer'e doğrudan erişemezsiniz, bu yüzden veri okumak ve yazmak için bir TypedArray kullanırsınız. TypedArray, Int8Array ve Float32Array gibi farklı türlerde görünümler sağlar ve bu sayede ikili verilere verimli erişim mümkün olur.

Int8Array Kullanımıyla Örnek

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, her bir baytta veri saklayabilir ve tamponun 8 eleman tutmasına olanak tanır. Bu şekilde, farklı türde görünümler kullanarak verileri verimli bir şekilde yönetebilirsiniz.

Diğer TypedArray örnekleri

JavaScript, çeşitli TypedArray türlerine sahiptir. Örneğin, 32-bit işaretsiz tam sayıları işlemek istiyorsanız, Uint32Array kullanırsınız.

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

• Uint32Array verileri 4 baytlık birimlerde depolayabilir, bu nedenle tampon dört öğe tutabilir. Ele aldığınız veri türüne göre doğru TypedArray seçmek önemlidir.

DataView kullanarak esnek veri yönetimi

TypedArray yalnızca sabit bir türdeki verileri işleyebilir, ancak DataView kullanarak herhangi bir türdeki veriyi herhangi bir konuma yazabilirsiniz. Bu, karışık veri türleri içeren tamponlarla çalışırken özellikle yararlıdır.

 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 kullanarak bayt ofsetini belirtebilir ve farklı türlerde veri okuyup yazabilirsiniz. Bu, ağ protokolleri veya dosya formatları gibi karmaşık ikili yapılarda çalışırken çok faydalıdır.

Endianness (Bayt Sırası) Düşüncesi

DataView kullanırken, endianness (bayt sırası) konusuna da dikkat etmeniz gerekir. Bilgisayar mimarisine bağlı olarak, verilerin bellekte saklanma sırası farklılık gösterebilir. DataView yöntemlerinin endianness belirtmek için seçenekleri vardır.

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

Doğru endianness belirtmezseniz, veri farklı ortamlarda doğru şekilde yorumlanamayabilir; bu nedenle ağ iletişimi veya dosya işlemlerinde özellikle dikkatli olmak önemlidir.

ArrayBuffer Uygulamaları

ArrayBuffer, genellikle web geliştirme ve tarayıcı API'lerinde kullanılan güçlü bir araçtır. Bazı uygulama örneklerine bakalım.

İkili Verilerin Alınması ve İşlenmesi

Örneğin, XMLHttpRequest veya fetch API'sini kullanarak bir sunucudan ikili veri alabilir ve bunu bir ArrayBuffer olarak işleyebilirsiniz.

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    });

• Bu örnekte, görüntü verisi sunucudan alınır ve bir Uint8Array olarak işlenir. Bu şekilde, sunucudan alınan verileri ArrayBuffer kullanarak işleyebilirsiniz.

WebGL'de Kullanım

WebGL'de ArrayBuffer, köşe verileri ve renk verileri gibi ikili verileri verimli bir şekilde işlemek için kullanılır.

 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);

• Bu örnekte, Float32Array bir dikdörtgenin köşe koordinatlarını tanımlamak ve bunları bir WebGL tamponuna göndermek için kullanılır.

ArrayBuffer ve Bellek Yönetimi

ArrayBuffer, belleği byte düzeyinde yönetir ve bu onu oldukça verimli hale getirir, ancak bellek yönetimi konusunda dikkatli olmanız gerekir. Büyük ikili verilerle çalışırken, kullanılmayan ArrayBuffer'ları düzgün bir şekilde serbest bırakmak önemlidir. JavaScript otomatik olarak çöp toplama işlemi gerçekleştirse de, bir ArrayBuffer referans almaya devam ederse bellek sızıntılarına yol açabilir.

Özet

ArrayBuffer, JavaScript'te ikili veri işlemenin temelini sağlar. TypedArray ve DataView'i birleştirerek, ikili veriler hem verimli hem de esnek bir şekilde işlenebilir. Ağ iletişimi ve WebGL gibi ikili verilerin işlendiği birçok durumda, web geliştirme için vazgeçilmez araçlardır. Doğru bir şekilde anlayarak ve uygun şekilde kullanarak, performansı ve verimliliği artırabilirsiniz.

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

YouTube Video