Learn about typed arrays in JavaScript in one article

This article will take you through the typed array in JavaScript to see its composition, how it is different from ordinary arrays, and its use in web development.

In JavaScript, all of us must be familiar enough with arrays to know that arrays are dynamic in nature and can hold any JavaScript object. However, if you have ever used another language like C, you should know that arrays are not dynamic in nature. And you can only store specific data types in that array, after all, this ensures that the array is more efficient from a performance perspective. However, the dynamism of arrays and the diversification of stored information types do not actually make JavaScript arrays inefficient. With the help of JavaScript engine optimization, the execution speed of arrays in JavaScript is actually very fast.

As web applications become more and more powerful, we begin to need to let web applications process and manipulate raw binary data. JavaScript arrays cannot handle these raw binary data, so we introduced JavaScript's typed arrays.

Typed Array

A typed array is an object very similar to an array, but it provides a mechanism for writing raw binary data to a memory buffer. This feature is well supported by all major browsers, and ES6 has integrated it into the JavaScript core framework. Array methods such as map(), filter() etc. are also accessible . I highly recommend you explore the resources mentioned at the end of this article to learn more about typed arrays.

Composition

Typed arrays are composed of two main parts, Buffer and View .

Buffer

Buffer is an object of type ArrayBuffer, representing a data block. This raw binary data block cannot be individually accessed or modified. You may be wondering what use can be made of data objects that cannot be accessed or modified. In fact, the view is the read and write interface of the buffer.

View

View is an object that allows you to access and modify the raw binary content stored in an ArrayBuffer. Generally there are two views.

TypedArray Instances of objects

These types of objects are very similar to ordinary arrays, but store only a single type of numeric data. For example, Int8, Uint8, Int16, Float32 are the data types of typed arrays. The number in the type represents the number of bits allocated for the data type. For example, Int8 represents an 8-bit integer.

You can read Reference documentation to learn more about the data types of typed arrays.

DataView An instance of the object

DataView is a low-level interface that provides a getter / setter API to read and write arbitrary data to a buffer. This greatly facilitates our development, especially when we need to handle multiple data types in a single typed array.

Another benefit of using DataView is that it allows you to control the endianness of the data - typed arrays use the platform's endianness. Of course if your program is running locally this won't be a problem since your device will use the same endianness as the input array. In most cases, your typed array will be little-endian because Intel uses little-endian. Since Intel is so common in computer processors, most of the time it won't be a problem. However, if little-endian encoded data is transmitted to a device using big-endian encoding, it will cause errors during reading, which may ultimately lead to data loss. Since DataView gives you control over the direction of endianness, you can use it when necessary.

What makes them different from ordinary arrays

As mentioned before, ordinary JavaScript arrays have been optimized by the JavaScript engine, and you don’t need to Use typed arrays as this won't give you much of an upgrade. But there are some features that make typed arrays different from ordinary arrays, which may be why you choose them.

• Allows you to handle raw binary data
• Since the data types they handle are limited, it is easier for your engine to optimize typed arrays than ordinary arrays because of the optimizations of ordinary arrays In fact, it is a very complicated process.
• There is no guarantee that ordinary arrays will always be optimized, as your engine may decide not to optimize for various reasons.

Use in Web Development

XMLHttpRequest API

You can use # based on your response type ##ArrayBuffer Receive data response in the form.

const xhr = new XMLHttpRequest();
xhr.open('GET', exampleUrl);
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
    const arrayBuffer = xhr.response;
    // 处理数据
};

xhr.send();

Fetch API

Similar to the XMLHttpRequest API, the Fetch API also allows you to receive responses in an

ArrayBuffer. All you need to do is use the arrayBuffer() method in the fetch API response and you will receive a Promise resolved using ArrayBuffer.

fetch(url)
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
   // 处理数据
});

HTML Canvas

The HTML5 Canvas element allows you to render dynamic 2D shapes and bitmap images. This element only acts as a container for graphics, which are drawn with the help of JavaScript. The 2D Context of

canvas enables you to retrieve bitmap data as an instance of

Uint8ClampedArray. Let's take a look at the sample code provided by Dr. Axel:

const canvas = document.getElementById('my_canvas');
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;

WebGL

WebGL allows you to render high-performance interactive 3D and 2D graphics. It relies heavily on typed arrays as it processes raw pixel data to output the necessary graphics on the canvas.

You can read more about the basics of WebGL in

This article.

Web Socket

Web Socket allows you to send and receive raw binary data in the form of a blob or array buffer.

const socket = new WebSocket("ws://localhost:8080");
socket.binaryType = "arraybuffer";

// 监听 message
socket.addEventListener("message", function (event) {
    const view = new DataView(event.data);
    // 处理接收数据
});

// 发送二进制数据
socket.addEventListener('open', function (event) {
    const typedArray = new Uint16Array(7);
    socket.send(typedArray.buffer);
});

Although beginners may not need a detailed understanding of typed arrays, they are essential as you move into intermediate and advanced JavaScript development. This is mainly because you may want to develop more complex applications that require the use of typed arrays.

To learn more about typed arrays, browse the resource links attached below.

Thank you for reading and I wish you happy programming! !

Resources

• JavaScript Typed Arrays - MDN Documentation

• Exploring JS by Dr. Axel

Original address: https://blog.bitsrc.io/javascript-typed-arrays-ccfa5ae8838d

Original author: Mahdhi Rezvi

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of Learn about typed arrays in JavaScript in one article. For more information, please follow other related articles on the PHP Chinese website!