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 并查看其他对象视图对一个对象的任何更改。