ฉันเชื่อว่าผู้เรียน JavaScript ทุกคนจะเข้าใจประเภทข้อมูลพื้นฐานที่หลากหลายของ JS อาร์เรย์คือการรวมกันของข้อมูล นี่เป็นแนวคิดพื้นฐานและเรียบง่ายมาก มันไม่มีเนื้อหามากนักและไม่ยากที่จะเรียนรู้ได้ดี แต่สิ่งที่สำคัญในบทความนี้ไม่ใช่อาร์เรย์ที่เรามักจะเห็น แต่เป็น ArrayBuffer
หลายสิ่งที่ฉันเขียนสรุปไว้โดยเจตนาเพราะพวกเขาต้องการทำหน้าที่เฉพาะบางอย่างให้สมบูรณ์ พวกเขาถือได้ว่าเป็นบันทึกช่วยจำและสิ่งเดียวกันก็เป็นจริงสำหรับบทความนี้! ฉันได้ศึกษาความรู้ที่เกี่ยวข้องกับ Web Audio API และการสื่อสารด้วยเสียงเมื่อไม่นานมานี้ เนื้อหามุ่งเน้นไปที่การไหลของสตรีมเสียงระหว่างโหนด Audiocontext ต่างๆ ตอนนี้ฉันต้องเข้าใจว่ารูปแบบข้อมูลประเภทเสียงของสตรีมเป็นแบบใดดังนั้นการวิจัยเกี่ยวกับ ArrayBuffer จึงมีความสำคัญอย่างยิ่ง
โมเดลสแต็คอาร์เรย์ในหน่วยความจำ
การซื้อกิจการของ Array
วิธีการสร้างอาร์เรย์ใน JavaScript:
การคัดลอกรหัสมีดังนี้:
[Element0, Element1, ... , Elementn]
อาร์เรย์ใหม่ (Element0, Element1, ... , Elementn)
อาร์เรย์ใหม่ (ArrayLength)
กำหนดโดยตรงหรือสร้างอาร์เรย์ผ่านตัวสร้างแน่นอนคุณยังสามารถใช้วิธีการอื่น:
การคัดลอกรหัสมีดังนี้:
"Array" .split ("");
"Array" .match (/a | r/g);
เดี๋ยวก่อนมีหลายวิธี แต่ฉันกลัวว่าหลายคนไม่ชัดเจนเกี่ยวกับโครงสร้างแบบไหนที่อยู่ข้างใน
รุ่นสแต็ก
ในอาร์เรย์เราสามารถใส่ข้อมูลจำนวนมากของประเภทข้อมูลที่แตกต่างกันเช่น:
การคัดลอกรหัสมีดังนี้:
var arr = [21, "li jing", วันที่ใหม่ (), function () {} ,, null];
อาร์เรย์ด้านบนมีตัวเลขสตริงวัตถุฟังก์ชั่นที่ไม่ได้กำหนดและว่างในครั้งเดียว เราสามารถอธิบายอินเทอร์เฟซข้อมูลข้างต้นด้วยวิธีคอนกรีต:
การคัดลอกรหัสมีดังนี้:
กองซ้อน
-
- 21 | -
- -
- "Li Jing" | - -
- -
- [อ้างอิง] | -----------> | วัตถุ | -
- -
- [อ้างอิง] | ------------------>+ ---------+ |
- | ฟังก์ชั่น | -
| ไม่ได้กำหนด | - -
- -
- NULL -
+ -----------+ สร้างโดย Barret Lee
ชนิดข้อมูล JavaScript แบ่งออกเป็นสองประเภทหนึ่งคือประเภทค่าและอีกประเภทหนึ่งคือประเภทอ้างอิง ประเภทการอ้างอิงทั่วไปรวมถึงวัตถุและอาร์เรย์ ในรูปแบบการจัดเก็บของอาร์เรย์หากข้อมูลประเภทค่าเป็นเหมือนหมายเลขและสตริงข้อมูลจะถูกผลักลงในสแต็กโดยตรงในขณะที่ประเภทการอ้างอิงจะถูกผลักเข้าไปในดัชนีของค่าเท่านั้น แนวคิดของภาษา C คือการบันทึกตัวชี้ของข้อมูลเท่านั้นและข้อมูลเหล่านี้จะถูกเก็บไว้ในบล็อกที่แน่นอนของกอง สแต็คไม่ได้เป็นอิสระและสามารถเก็บสแต็กไว้ในสแต็กได้
โอเคนั่นคือทั้งหมดสำหรับคำอธิบายของอาร์เรย์ พูดคุยเกี่ยวกับความรู้ที่เกี่ยวข้องของ ArrayBuffer โดยละเอียด
อาร์เรย์บัฟเฟอร์
เว็บคืออะไร? อะไรคือปัญหาพื้นฐานที่สุดที่เว็บจำเป็นต้องพูดคุย? ฉันคิดว่ามีสองจุด: หนึ่งคือข้อมูลและอีกอันคือการส่งข้อมูล สำหรับการแสดงข้อมูลนั้นมีความซับซ้อนและควรเป็นสิ่งที่อยู่บนชั้นบนของเว็บ ArrayBuffer ที่จะกล่าวถึงในบทความนี้เป็นประเภทข้อมูลพื้นฐานที่สุดและไม่สามารถเรียกได้ว่าเป็นประเภทข้อมูล มันง่ายที่จะอ่านและเขียนด้วยวิธีอื่น
คำจำกัดความของคะแนนอย่างเป็นทางการ:
ArrayBuffer เป็นประเภทข้อมูลที่ใช้เพื่อแสดงบัฟเฟอร์ข้อมูลไบนารีแบบยาวคงที่ คุณไม่สามารถจัดการเนื้อหาของ Arraybuffer ได้โดยตรง แต่คุณสร้างวัตถุ ArrayBufferView ซึ่งแสดงถึงบัฟเฟอร์ในรูปแบบเฉพาะและใช้สิ่งนั้นเพื่ออ่านและเขียนเนื้อหาของบัฟเฟอร์
บัฟเฟอร์ดั้งเดิมที่แสดงถึงข้อมูลไบนารีซึ่งใช้ในการจัดเก็บข้อมูลของอาร์เรย์ประเภทต่างๆ ArrayBuffer ไม่สามารถอ่านหรือเขียนได้โดยตรง แต่สามารถส่งผ่านไปยังอาร์เรย์ที่พิมพ์หรือวัตถุ DataView ได้ตามต้องการเพื่อตีความบัฟเฟอร์ดั้งเดิม
มันเป็นบัฟเฟอร์ดิบของข้อมูลไบนารี แม้ว่า JavaScript เป็นภาษาที่อ่อนแอ แต่มันก็มีข้อ จำกัด เกี่ยวกับประเภทและขนาดของข้อมูล เราจำเป็นต้องอ่านเนื้อหาของบัฟเฟอร์ในลักษณะที่เป็นระเบียบ (เขียนเข้าไป) ผ่านโครงสร้างข้อมูลที่แน่นอน
การสร้างบัฟเฟอร์ดั้งเดิม
ตัวสร้าง ArrayBuffer สามารถสร้างบัฟเฟอร์ดิบ:
การคัดลอกรหัสมีดังนี้:
var buffer = new ArrayBuffer (30);
จากคอนโซลโครเมี่ยมที่คุณเห็น:
อินสแตนซ์บัฟเฟอร์มีแอตทริบิวต์ความยาว bytelength ซึ่งใช้เพื่อรับขนาดบัฟเฟอร์ซึ่งเป็นวิธีการชิ้นที่รองรับโดย IE11+ และ iOS6+ ซึ่งใช้เพื่อสกัดกั้นความยาวบัฟเฟอร์
การคัดลอกรหัสมีดังนี้:
Slice ArrayBuffer (
เริ่มต้นที่ไม่ได้ลงชื่อนาน
ไม่ได้ลงนาม
-
คุณสามารถทดสอบการสาธิตนี้:
การคัดลอกรหัสมีดังนี้:
var buffer = new ArrayBuffer (12);
var x = new int32Array (บัฟเฟอร์);
x [1] = 1234;
var slice = buffer.slice (4);
var y = ใหม่ int32Array (ชิ้น);
console.log (x [1]);
console.log (y [0]);
x [1] = 6789;
console.log (x [1]);
console.log (y [0]);
อาร์เรย์ที่ใช้ข้อมูล
ประเภทอาร์เรย์ที่พิมพ์เป็นแสดงมุมมองที่หลากหลายของวัตถุ ArrayBuffer ที่สามารถจัดทำดัชนีและจัดการได้ ทุกประเภทอาร์เรย์มีความยาวคงที่
การคัดลอกรหัสมีดังนี้:
ขนาดชื่อ (ในไบต์) คำอธิบาย
int8Array 1 8 บิตสองส่วนประกอบที่ลงนามในจำนวนเต็ม
UINT8ARRAY 1 จำนวนเต็ม 8 บิตที่ไม่ได้ลงชื่อ
Int16Array 2 ส่วนประกอบของการลงนามในจำนวนเต็ม 16 บิต
UINT16ARRAY 2 จำนวนเต็ม 16 บิตที่ไม่ได้ลงชื่อ
int32Array 4 32- บิตสองส่วนประกอบที่ลงนามจำนวนเต็ม
Uint32Array 4 จำนวนเต็มที่ไม่ได้ลงนาม 32 บิต
Float32Array 4 32 บิต IEEE หมายเลขจุดลอยตัว
float64array 8 64- บิต IEEE หมายเลขจุดลอยตัว
Int เป็นจำนวนเต็ม Uint เป็นพลาสติกที่ไม่ได้ลงนามและลอยตัวเป็นประเภทจุดลอยตัว นี่คือแนวคิดพื้นฐานในภาษา C ดังนั้นฉันจะไม่อธิบายรายละเอียด เนื่องจากโครงสร้างที่ดูเหล่านี้มีความคล้ายคลึงกันบทความนี้จะอธิบายประเภท Float32Array เท่านั้นและผู้อ่านสามารถเรียนรู้ได้ทีละคน
Float32Array คล้ายกับอาร์เรย์มากยกเว้นว่าแต่ละองค์ประกอบเป็นข้อมูลจุดลอยตัว 32 บิต (4 ไบต์) Float32Array เมื่อสร้างขึ้นแล้วขนาดของมันไม่สามารถแก้ไขได้
เราสามารถสร้าง float32Array โดยตรง:
การคัดลอกรหัสมีดังนี้:
var x = ใหม่ float32Array (2);
x [0] = 17;
console.log (x [0]); // 17
console.log (x [1]); // 0
console.log (x.length); // 2
จำเป็นต้องมีแนวคิดว่ามันยังคงเป็นอาร์เรย์ แต่แต่ละองค์ประกอบในอาร์เรย์เป็นประเภทข้อมูล 32 บิตลอยตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var x = ใหม่ float32Array ([17, -45.3]);
console.log (x [0]); // 17
console.log (x [1]); // -45.2999923706055
console.log (x.length); // 2
เรากำหนดค่าของอาร์เรย์โดยตรงกับ x วัตถุ float32Array จากนั้นมันจะถูกแปลงเป็นหมายเลขลอย 32 บิตก่อนจัดเก็บ
เนื่องจากแต่ละองค์ประกอบของอาร์เรย์คลาสนี้เป็นประเภทเดียวกันในรุ่นสแต็กพวกเขาทั้งหมดจะถูกผลักเข้าไปในสแต็ก ดังนั้นอาร์เรย์ที่เป็นข้อมูลจึงเป็นประเภทค่าและไม่ใช่ประเภทอ้างอิง! สิ่งนี้ควรแจ้งให้ทราบและสามารถสะท้อนได้ในตัวอย่างต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var x = ใหม่ float32Array ([17, -45.3]);
var y = ใหม่ float32Array (x);
console.log (x [0]); // 17
console.log (x [1]); //-45.29999923706055
console.log (x.length); // 2
x [0] = -2;
console.log (y [0]); // 17 ค่าของ y ไม่เปลี่ยนแปลง
คัดลอกค่าของ x ถึง y, แก้ไข x [0], y [0] และไม่มีการเปลี่ยนแปลง
นอกเหนือจากวิธีการข้างต้นแล้วเรายังสามารถสร้างอาร์เรย์ที่เป็นข้อมูลด้วยวิธีอื่น:
การคัดลอกรหัสมีดังนี้:
var buffer = new ArrayBuffer (12);
var x = ใหม่ float32Array (บัฟเฟอร์, 0, 2);
var y = ใหม่ float32Array (บัฟเฟอร์, 4, 1);
x [1] = 7;
console.log (y [0]); // 7
อธิบายว่าทำไม 7 ถึงส่งคืนที่นี่
การคัดลอกรหัสมีดังนี้:
Arraybuffer (12)
-
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | - - - - -
-
-
X (Float32Array)
ชดเชย: 0
ความยาว: 4
ความยาว: 2
Arraybuffer (12)
-
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | - - - - -
-
-
y
สร้างโดย Barret Lee
คุณยังมีคำถามใด ๆ หลังจากอ่านภาพประกอบด้านบนหรือไม่? ฉันไม่คิดว่าฉันต้องอธิบายต่อไป หน่วยของ Arraybuffer ถือได้ว่าเป็น 1 ในขณะที่หน่วยของ Float32Array คือ 4
วัตถุ DataView
วัตถุ DataView ใช้ข้อมูลอย่างพิถีพิถันมากขึ้น แต่ฉันไม่คิดว่ามันน่าสนใจ อาร์เรย์ที่ใช้ข้อมูลต่าง ๆ ที่กล่าวถึงข้างต้นสามารถตอบสนองแอปพลิเคชันได้ดังนั้นฉันจะพูดถึงที่นี่ตัวอย่างง่ายๆ:
การคัดลอกรหัสมีดังนี้:
var buffer = new ArrayBuffer (12);
var x = dataview ใหม่ (บัฟเฟอร์, 0);
X.SetInt8 (0, 22);
X.SetFloat32 (1, math.pi);
console.log (x.getint8 (0)); // 22
console.log (x.getfloat32 (1)); // 3.1415927410125732
หากคุณสนใจคุณสามารถย้ายไปที่ http://www.javascripture.com/dataview สำหรับข้อมูลโดยละเอียด
ArrayBuffer ใน XHR2
Arraybuffer มีการใช้กันอย่างแพร่หลายโดยเฉพาะ ไม่ว่าจะเป็น WebSocket, Bebaudio, Ajax ฯลฯ ตราบใดที่กระบวนการด้านหน้าข้อมูลขนาดใหญ่หรือต้องการปรับปรุงประสิทธิภาพการประมวลผลข้อมูล ArrayBuffer จะต้องขาดไม่ได้
XHR2 ไม่ใช่เรื่องใหม่ คุณอาจใช้คุณสมบัติที่เกี่ยวข้อง แต่คุณไม่ทราบว่านี่คือสิ่งที่ XHR2 คือ สิ่งที่สำคัญที่สุดคือ XHR.ResponSetype ซึ่งใช้ในการตั้งค่ารูปแบบข้อมูลของการตอบสนอง พารามิเตอร์เสริมคือ: "ข้อความ", "ArrayBuffer", "Blob" หรือ "เอกสาร" โปรดทราบว่าการตั้งค่า (หรือไม่สนใจ) XHR.ResponSetype = '' จะตั้งค่าการตอบกลับเป็น "ข้อความ" โดยค่าเริ่มต้น มีความสัมพันธ์ที่สอดคล้องกันเช่นนี้:
การคัดลอกรหัสมีดังนี้:
ขอคำตอบ
ข้อความ Domstring
ArrayBuffer ArrayBuffer
หยด
เอกสารเอกสาร
ใช้เกาลัด:
การคัดลอกรหัสมีดังนี้:
var xhr = ใหม่ xmlhttprequest ();
xhr.open ('get', '/path/to/image.png', true);
XHR.ResponSetype = 'ArrayBuffer';
xhr.onload = function (e) {
// this.response == uint8array.buffer
var uint8array = ใหม่ uint8array (this.response);
-
xhr.send ();
เราตั้งค่าคุณสมบัติเป็น ArrayBuffer ใน XHR.ResponSetype ดังนั้นเราจึงสามารถใช้อาร์เรย์ที่ใช้ข้อมูลเพื่อรับข้อมูลที่เราได้รับ!
สรุป
บทความนี้ส่วนใหญ่แนะนำวิธีการจัดเก็บอาร์เรย์ในโมเดลสแต็กและยังอธิบายรายละเอียดเกี่ยวกับประเภทข้อมูลไบนารีของ ArrayBuffer ซึ่งเป็นบัฟเฟอร์ดั้งเดิม ในการพัฒนาเว็บข้อมูลและการจัดเก็บข้อมูลเป็นส่วนสำคัญฉันหวังว่าจะดึงดูดความสนใจ!
อาจมีข้อผิดพลาดในการบรรยายของบทความนี้โปรดแก้ไขให้มากขึ้น!