TypedArray ใน JavaScript

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

เราจะอธิบายอย่างละเอียดเกี่ยวกับแนวคิดพื้นฐานของ TypedArray, ชนิดต่างๆ, วิธีการใช้งาน และกรณีการใช้งานเฉพาะทาง

YouTube Video

TypedArray ใน JavaScript

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

โครงสร้างพื้นฐานของ TypedArray

ส่วนประกอบหลักของ TypedArray คือ ArrayBuffer และตัว TypedArray เอง

• ArrayBuffer: บัฟเฟอร์ขนาดคงที่ที่ใช้สำหรับจัดสรรข้อมูลไบนารีในหน่วยความจำ บัฟเฟอร์นี้เป็นเพียงพื้นที่ข้อมูลและไม่สามารถอ่านหรือเขียนข้อมูลได้โดยตรง
• TypedArray: อ็อบเจ็กต์ห่อหุ้มที่กำหนดประเภทข้อมูลเฉพาะให้กับบัฟเฟอร์ เพื่อให้สามารถเข้าถึงและจัดการข้อมูลได้

ตัวอย่างการใช้งานพื้นฐาน

ตัวอย่างด้านล่างนี้แสดงวิธีการสร้าง ArrayBuffer และจากนั้นสร้าง TypedArray บนพื้นฐานของมัน

 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

• ในตัวอย่างนี้ได้มีการสร้าง ArrayBuffer จากนั้นสร้าง Uint8Array บนพื้นฐานของบัฟเฟอร์นั้น แต่ละองค์ประกอบถูกจัดการเป็นเลขจำนวนเต็มไม่ลงนามขนาด 8 บิต โดยเก็บค่าเฉพาะที่อยู่ในช่วงที่กำหนด

ประเภทของ TypedArray

มี TypedArray หลายประเภทที่เหมาะสมกับแต่ละประเภทข้อมูล ประเภทหลักมีดังนี้

TypedArray เหล่านี้มีประสิทธิภาพในการใช้หน่วยความจำและเหมาะสำหรับการจัดการข้อมูลจำนวนมาก

การจัดการ TypedArrays

คุณสามารถเข้าถึงข้อมูลใน TypedArray ได้โดยใช้ดัชนี เช่นเดียวกับอาเรย์ทั่วไป และยังมีเมธอดพิเศษให้ใช้งานด้วย

การกำหนดค่า

ใน TypedArray คุณสามารถกำหนดค่าหลายค่าได้พร้อมกันโดยใช้เมธอด set

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

• โค้ดนี้ใช้เมธอด set เพื่อกำหนดค่าหลายค่าพร้อมกันให้กับ Int16Array และแสดงแต่ละองค์ประกอบในคอนโซล

การรับ subarray

เพื่อรับส่วนหนึ่งของ TypedArray เป็น subarray ใช้เมธอด subarray สิ่งนี้อ้างอิงถึงบัฟเฟอร์เดียวกันกับ TypedArray ต้นฉบับ

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]

• โค้ดนี้ดึงช่วงขององค์ประกอบที่ระบุจาก Int16Array ด้วยเมธอด subarray และแสดงซับอาเรย์ในคอนโซล

การคัดลอกบัฟเฟอร์

สามารถคัดลอกบัฟเฟอร์ของ TypedArray ไปยัง TypedArray อื่นได้ โดยการใช้เมธอด set คุณสามารถคัดลอกจากตำแหน่งที่ระบุ

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]

• โค้ดนี้คัดลอกเนื้อหาของ Uint8Array ไปยังอาเรย์อื่นด้วยเมธอด set และแสดงอาเรย์ที่คัดลอกแล้วในคอนโซล

การใช้ DataView

ขณะที่ TypedArray จัดการกับบัฟเฟอร์ที่มีชนิดข้อมูลคงที่ DataView เป็นอินเทอร์เฟซที่ช่วยให้สามารถจัดการข้อมูลไบนารีด้วยออฟเซตและชนิดข้อมูลที่กำหนดเองได้ สิ่งนี้ช่วยให้สามารถผสมชนิดข้อมูลต่าง ๆ ภายในบัฟเฟอร์เดียวกัน

 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

• โค้ดนี้ใช้ DataView เพื่อเขียนข้อมูลหลายประเภท ได้แก่ จำนวนเต็ม 32 บิต และจำนวนทศนิยม 32 บิต ลงในบัฟเฟอร์เดียวกัน และตรวจสอบผลลัพธ์

• DataView มีความยืดหยุ่นในการเข้าถึงข้อมูลมากกว่า TypedArray และมีประโยชน์มากโดยเฉพาะเมื่อจัดการกับไฟล์ฟอร์แมตไบนารีหรือโปรโตคอลเครือข่าย

กรณีการใช้งาน TypedArray

TypedArray ถูกใช้งานหลัก ๆ เพื่อจัดการข้อมูลไบนารีขนาดใหญ่ได้อย่างมีประสิทธิภาพ กรณีการใช้งานเฉพาะรวมถึงต่อไปนี้

การประมวลผลภาพ

TypedArray ถูกใช้งานเมื่อต้องจัดการข้อมูลพิกเซลของภาพ โดยการใช้ Uint8Array คุณสามารถเก็บค่าของ RGBA แต่ละพิกเซลและทำการแก้ไขและประมวลผลภาพ

 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}

• โค้ดนี้สร้างข้อมูลภาพที่มีความกว้าง 100 และความสูง 100 ในรูปแบบ RGBA โดยใช้ Uint8Array และกำหนดให้ทุกพิกเซลเป็นสีแดง

การเชื่อมต่อกับ WebAssembly

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

การประมวลผลข้อมูลเสียงและวิดีโอ

TypedArray มีบทบาทสำคัญในการประมวลผลเสียงและวิดีโอ คุณสามารถเก็บข้อมูลคลื่นเสียงใน Float32Array เพื่อทำการเล่นและประมวลผลได้

สรุป

TypedArray เป็นเครื่องมือที่ทรงพลังสำหรับการจัดการข้อมูลไบนารีจำนวนมากได้อย่างมีประสิทธิภาพ มันมีประโยชน์อย่างยิ่งในแอปพลิเคชันที่ต้องคำนึงถึงประสิทธิภาพ เช่น การประมวลผลภาพ WebAssembly และการประมวลผลข้อมูลเสียง/วิดีโอ TypedArray มี API ที่คล้ายคลึงกับอาเรย์ปกติ แต่มีข้อจำกัดเกี่ยวกับการใช้งานหน่วยความจำและประเภทข้อมูล ดังนั้นจึงจำเป็นต้องแยกการใช้งานให้เหมาะสม

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

YouTube Video