JavaScript ArrayBuffer

Muhammad Muzammil Hussain 2022年5月5日

JavaScript JavaScript ArrayBuffer

在本文中，我們將瞭解 JavaScript 中的 ArrayBuffer 物件以建立和操作 ArrayBuffer 物件。

語法：

var buffer = new ArrayBuffer(size);

ArrayBuffer 中的 size 引數指定建立的緩衝區的大小（以位元組為單位）。

在 JavaScript 中建立一個 ArrayBuffer

var buffer = new ArrayBuffer(8);
var view = new DataView(buffer);

在上面的程式碼中，我們建立了一個 8 位元組的緩衝區。此外，我們使用 DataView 檢視來引用和操作緩衝區。

讓我們看一些例子來清楚地瞭解 ArrayBuffer 物件。

示例 1：

<!DOCTYPE html>
<html >
    <head>
        <title>JavaScript ArrayBuffer</title>
    </head>
    <body>
        <h1 style="color: blueviolet;"> DelftStack </h1>
        <h3><u>JavaScript ArrayBuffer object</u></h3>
      

        <script>
            var buffer = new ArrayBuffer(8);  // create a buffer of length 8
            var view = new DataView(buffer);  // view which is reffering to buffer
            document.write("Buffer Byte Length : " + buffer.byteLength);
            document.write("<br>");
            document.write("View Byte Length : " + view.byteLength);
           
        </script>
    </body>
</html>

輸出：

DelftStack
JavaScript ArrayBuffer object
Buffer Byte Length : 8
View Byte Length : 8

下面是我們如何使用 DataView 和型別化陣列修改和執行 ArrayBuffer 物件的另一個示例。

示例 2：

<!DOCTYPE html>
<html >
    <head>
        <title>JavaScript ArrayBuffer</title>
    </head>
    <body>
        <h1 style="color: blueviolet;"> DelftStack </h1>
        <p> <b> <u> Manipulating ArrayBuffer using DataView and TypedArray </b> </u> </p>
      

        <script>
            // ArrayBuffer
            var buffer = new ArrayBuffer(8);
            
            // DataView 
            var view1 = new DataView(buffer);

            // TypedArray
            var view2 = new Int8Array(buffer);

            //Put value of 32bits
            view1.setInt32(0, 0x76543210);

            //prints the 32bit value
            document.write( "32 bit value : " + view1.getInt32(0).toString(16) + "<br>"); 
                
            //prints only 8bit value 
            document.write("8 bit value : " + view1.getInt8(0).toString(16) + "<br>"); 
            document.write("32 bit value : " + view2[0].toString(16));   
        </script>
    </body>
</html>

輸出：

DelftStack
Manipulating ArrayBuffer using DataView and TypedArray

32-bit value : 76543210
8-bit value : 76
32-bit value : 76

因此，如上例所示，我們可以將多個 DataView 或 TypedArray 物件新增到單個 ArrayBuffer 並檢視其他物件檢視對一個物件的任何更改。