`ArrayBuffer` ใน JavaScript

บทความนี้อธิบายเกี่ยวกับ ArrayBuffer ใน JavaScript

เราจะอธิบายทุกอย่างเกี่ยวกับ ArrayBuffer ตั้งแต่พื้นฐานไปจนถึงการใช้งาน ชนิดของมัน และการประยุกต์ใช้ในทางปฏิบัติ

YouTube Video

ArrayBuffer ใน JavaScript

ArrayBuffer ใน JavaScript เป็นอ็อบเจ็กต์ที่ใช้สำหรับจัดการข้อมูลไบนารีระดับต่ำ และมีประโยชน์เป็นพิเศษในการจัดการข้อมูลไบนารีใน WebAPIs, การดำเนินการไฟล์, และการสื่อสารเครือข่าย

ArrayBuffer คืออะไร

ArrayBuffer เป็นโครงสร้างข้อมูลสำหรับจัดการข้อมูลไบนารีที่มีความยาวคงที่ มันช่วยให้สามารถจัดการข้อมูลไบนารีดิบที่ไม่สามารถจัดการได้ด้วยอาร์เรย์หรืออ็อบเจ็กต์ใน JavaScript ปกติ

ArrayBuffer ไม่สามารถจัดการข้อมูลได้โดยตรง แทนที่จะใช้งานโดยตรง ข้อมูลจะถูกอ่านและเขียนด้วย TypedArray หรือ DataView ซึ่งอิงตาม ArrayBuffer

ArrayBuffer มีประโยชน์อย่างยิ่งในสถานการณ์ต่อไปนี้

• เมื่อประมวลผลข้อมูลไบนารีที่ได้รับจากเครือข่าย
• เมื่อจำเป็นต้องมีการแบ่งปันข้อมูลที่มีประสิทธิภาพใน Web Worker
• เมื่อทำการประมวลผลภาพหรือการเรนเดอร์แบบ 3D ด้วย Canvas หรือ WebGL
• เมื่อจัดการไฟล์ (โดยเฉพาะไฟล์ไบนารี)

การสร้าง 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 คุณสามารถระบุการชดเชยไบต์และอ่านหรือเขียนข้อมูลประเภทต่าง ๆ ได้ สิ่งนี้มีประโยชน์มากเมื่อจัดการกับโครงสร้างไบนารีที่ซับซ้อน เช่น โปรโตคอลเครือข่ายหรือรูปแบบไฟล์

การพิจารณาเรื่อง Endianness

เมื่อใช้ DataView คุณยังต้องให้ความสำคัญกับ endianness (ลำดับของไบต์) ขึ้นอยู่กับสถาปัตยกรรมคอมพิวเตอร์ ลำดับการจัดเก็บข้อมูลในหน่วยความจำอาจแตกต่างกันได้ เมธอดของ DataView มีตัวเลือกให้ระบุ endianness

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

หากคุณไม่ระบุ endianness ที่ถูกต้อง ข้อมูลอาจถูกแปลอย่างไม่ถูกต้องในสภาพแวดล้อมที่ต่างกัน ดังนั้นจึงสำคัญอย่างยิ่งที่ต้องระมัดระวังในเรื่องการสื่อสารเครือข่ายหรือการทำงานกับไฟล์

การประยุกต์ใช้งานของ ArrayBuffer

ArrayBuffer เป็นเครื่องมือที่ทรงพลังซึ่งมักใช้ในงานพัฒนาเว็บและ API ของเบราว์เซอร์ ลองมาดูตัวอย่างการประยุกต์ใช้งานกัน

การรับและประมวลผลข้อมูลไบนารี

ตัวอย่างเช่น คุณสามารถดึงข้อมูลไบนารีจากเซิร์ฟเวอร์โดยใช้ 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 จัดการหน่วยความจำในระดับไบต์ ทำให้มีประสิทธิภาพสูงมาก แต่คุณยังต้องระมัดระวังในการจัดการหน่วยความจำด้วย เมื่อจัดการกับข้อมูลไบนารีขนาดใหญ่ เป็นสิ่งสำคัญที่จะต้องปล่อย ArrayBuffer ที่ไม่ได้ใช้อย่างเหมาะสม แม้ว่า JavaScript จะดำเนินการเก็บขยะ (garbage collection) โดยอัตโนมัติ แต่ถ้า ArrayBuffer ยังคงถูกอ้างอิงอยู่ อาจทำให้เกิดปัญหาหน่วยความจำรั่วได้

สรุป

ArrayBuffer เป็นพื้นฐานสำหรับการจัดการข้อมูลไบนารีใน JavaScript โดยการรวม TypedArray และ DataView เข้าด้วยกัน จะสามารถจัดการข้อมูลไบนารีได้อย่างมีประสิทธิภาพและยืดหยุ่น สิ่งเหล่านี้เป็นเครื่องมือที่ขาดไม่ได้ในพัฒนาเว็บ โดยเฉพาะในหลายสถานการณ์ที่เกี่ยวข้องกับการจัดการข้อมูลไบนารี เช่น การสื่อสารเครือข่ายและ WebGL ด้วยการเข้าใจพวกมันอย่างถูกต้องและใช้งานอย่างเหมาะสม คุณสามารถปรับปรุงประสิทธิภาพและความรวดเร็วได้

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video