한 기사에서 JavaScript의 형식화된 배열에 대해 알아보세요.

이 글에서는 JavaScript의 형식화된 배열을 통해 배열의 구성, 일반 배열과의 차이점, 웹 개발에서의 사용법을 살펴보겠습니다.

JavaScript 언어에서 우리 모두는 배열이 본질적으로 동적이며 모든 JavaScript 객체를 보유할 수 있다는 것을 알 수 있을 만큼 배열에 익숙해야 합니다. 그러나 C와 같은 다른 언어를 사용해 본 적이 있다면 배열이 본질적으로 동적이지 않다는 점을 알아야 합니다. 그리고 해당 배열에는 특정 데이터 유형만 저장할 수 있으므로 결국 배열이 성능 측면에서 더 효율적이라는 것을 보장합니다. 그러나 배열의 역동성과 저장된 정보 유형의 다양함이 실제로 JavaScript 배열을 비효율적으로 만드는 것은 아닙니다. JavaScript 엔진 최적화의 도움으로 JavaScript의 배열 실행 속도는 실제로 매우 빠릅니다.

웹 애플리케이션이 점점 더 강력해짐에 따라 웹 애플리케이션에서 원시 바이너리 데이터를 처리하고 조작할 수 있도록 해야 합니다. JavaScript 배열은 이러한 원시 바이너리 데이터를 처리할 수 없으므로 JavaScript의 형식화된 배열을 도입했습니다.

형식 배열

형식 배열은 배열과 매우 유사한 객체이지만 원시 바이너리 데이터를 메모리 버퍼에 쓰는 메커니즘을 제공합니다. 이 기능은 모든 주요 브라우저에서 잘 지원되며 ES6는 이를 JavaScript 핵심 프레임워크에 통합하여 map(), filter()와 같은 기능에 대한 액세스도 제공합니다. 등 배열 방법. 형식화된 배열에 대해 자세히 알아보려면 이 기사 끝부분에 언급된 리소스를 살펴보는 것이 좋습니다. map()、filter() 等 Array 方法。我强烈建议你浏览本文结尾处提到的资源，以更深入了解类型化数组。

组成

类型化数组由两个主要部分组成，Buffer 和 View。

缓冲区

Buffer 是 ArrayBuffer 类型的对象，表示一个数据块。此原始二进制数据块无法被单独访问或修改。你可能好奇，无法访问或修改的数据对象的能有什么用途。实际上视图是缓冲区的读写接口。

视图

View 是一个对象，允许你访问和修改存储在 ArrayBuffer 中的原始二进制内容。一般来说有两种视图。

TypedArray 对象的实例

这些类型的对象与普通数组非常相似，但是仅存储单一类型的数值数据。诸如 Int8、Uint8、Int16、Float32 就是类型化数组的数据类型。类型中的数字表示为数据类型分配的位数。例如，Int8 表示 8 位的整数。

你可以阅读 参考文档 来详细了解类型化数组的数据类型。

DataView 对象的实例

DataView 是一个低级接口，提供了一个 getter / setter API 来读取和写入任意数据到缓冲区。这很大程度上方便了我们的开发，尤其是需要在单个类型化数组中处理多种数据类型时。

使用 DataView 的另一个好处是，它可以让你控制数据的字节序 —— 类型化数组使用平台的字节序。当然如果你的程序运行在本地，这将不是问题，因为你的设备将使用与输入数组相同的字节序。在大多数情况下，你的类型化数组将为低端字节序，因为英特尔采取的是小端字节序。由于英特尔在计算机处理器中非常普遍，因此大多数时候不会出现问题。但是，如果将小端字节序编码的数据传输到使用大端字节序编码的设备，则会导致读取时候的错误，最终可能导致数据的丢失。由于 DataView

Composition

형식화된 배열은 두 가지 주요 부분으로 구성됩니다. 버퍼 및 보기.

Buffer

🎜🎜Buffer는 데이터 블록을 나타내는 ArrayBuffer 유형의 개체입니다. 이 원시 바이너리 데이터 블록은 개별적으로 액세스하거나 수정할 수 없습니다. 액세스하거나 수정할 수 없는 데이터 개체를 어떻게 사용할 수 있는지 궁금할 것입니다. 실제로 뷰는 버퍼의 읽기 및 쓰기 인터페이스입니다. 🎜🎜🎜View🎜🎜🎜View는 ArrayBuffer에 저장된 원시 바이너리 콘텐츠에 액세스하고 수정할 수 있는 개체입니다. 일반적으로 두 가지 견해가 있습니다. 🎜🎜🎜TypedArray 개체의 인스턴스 🎜🎜🎜이러한 개체 유형은 일반 배열과 매우 유사하지만 단일 유형의 숫자 ​​데이터만 저장합니다. Int8, Uint8, Int16, Float32 등은 형식화된 배열의 데이터 유형입니다. 유형의 숫자는 데이터 유형에 할당된 비트 수를 나타냅니다. 예를 들어 Int8은 8비트 정수를 나타냅니다. 🎜

🎜 참조 문서에서 입력된 데이터 유형에 대해 자세히 알아보세요. 배열. 🎜

🎜🎜DataView 객체 인스턴스 🎜🎜🎜DataView는 getter / setter를 제공하는 하위 수준 인터페이스입니다. 버퍼에 임의의 데이터를 읽고 쓰는 API입니다. 이는 특히 단일 유형 배열에서 여러 데이터 유형을 처리해야 할 때 개발을 크게 촉진합니다. 🎜🎜DataView 사용의 또 다른 이점은 데이터의 엔디안을 제어할 수 있다는 것입니다. 유형이 지정된 배열은 플랫폼의 엔디안을 사용합니다. 물론 프로그램이 로컬에서 실행되는 경우 장치가 입력 배열과 동일한 엔디안을 사용하므로 이는 문제가 되지 않습니다. 대부분의 경우 Intel에서 리틀 엔디안을 사용하므로 입력된 배열은 리틀 엔디안이 됩니다. Intel은 컴퓨터 프로세서에서 매우 일반적이므로 대부분의 경우 문제가 되지 않습니다. 그러나 리틀 엔디안으로 인코딩된 데이터를 빅 엔디안 인코딩을 사용하는 장치로 전송하면 읽는 동안 오류가 발생하여 궁극적으로 데이터 손실이 발생할 수 있습니다. DataView는 엔디안 방향에 대한 제어를 제공하므로 필요할 때 사용할 수 있습니다. 🎜🎜🎜일반 배열과 다른 점🎜🎜🎜앞서 언급했듯이 일반 JavaScript 배열은 JavaScript 엔진에 의해 최적화되었으므로 성능을 향상하기 위해 형식화된 배열을 사용할 필요가 없습니다. 업그레이드. 그러나 형식화된 배열을 일반 배열과 다르게 만드는 몇 가지 기능이 있으며, 이것이 바로 이 배열을 선택하는 이유일 수 있습니다. 🎜

• 원시 바이너리 데이터를 처리할 수 있습니다
• 처리하는 데이터 유형이 제한되어 있기 때문에 일반 배열의 최적화는 실제로 매우 복잡한 프로세스이기 때문에 엔진이 일반 배열보다 형식화된 배열을 최적화하는 것이 더 쉽습니다.
• 엔진이 다양한 이유로 최적화하지 않기로 결정할 수 있으므로 일반 배열이 항상 최적화된다는 보장은 없습니다.

웹 개발에 사용

XMLHttpRequest API

응답 유형에 따라 ArrayBuffer 형태로 데이터 응답을 받을 수 있습니다. ArrayBuffer 形式接收数据响应。

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

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

xhr.send();

Fetch API

类似于 XMLHttpRequest API，Fetch API 还允许你在 ArrayBuffer 中接收响应。你只需在 fetch API 响应中使用 arrayBuffer() 方法，你就能够收到一个使用 ArrayBuffer 解析的 Promise。

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

HTML Canvas

HTML5 Canvas 元素使你可以渲染动态的 2D 形状和位图图像。该元素仅充当图形的容器，而图形则是在 JavaScript 的帮助下绘制。

canvas 的 2D Context 使你可以将位图数据作为 Uint8ClampedArray

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;

Fetch API

XMLHttpRequest API와 유사하게 Fetch API를 사용하면 ArrayBuffer에서 응답을 받을 수도 있습니다. fetch API 응답에서 arrayBuffer() 메서드를 사용하기만 하면 ArrayBuffer를 사용하여 해결되는 Promise를 받게 됩니다.

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);
});

HTML Canvas

HTML5 Canvas 요소를 사용하면 동적 2D 모양과 비트맵 이미지를 렌더링할 수 있습니다. 이 요소는 JavaScript의 도움으로 그려지는 그래픽의 컨테이너 역할만 합니다.

캔버스의 2D 컨텍스트를 사용하면 비트맵 데이터를 Uint8ClampedArray의 인스턴스로 검색할 수 있습니다. Axel 박사가 제공한 샘플 코드를 살펴보겠습니다.

rrreeeWebGL

WebGL을 사용하면 고성능 대화형 3D 및 2D 그래픽을 렌더링할 수 있습니다. 캔버스에 필요한 그래픽을 출력하기 위해 원시 픽셀 데이터를 처리할 때 형식화된 배열에 크게 의존합니다.

이 문서

에서 WebGL의 기본 사항에 대해 자세히 알아볼 수 있습니다.

웹 소켓

웹 소켓을 사용하면 Blob 또는 배열 버퍼 형태로 원시 바이너리 데이터를 보내고 받을 수 있습니다.

rrreee
• 초보자는 형식화된 배열을 자세히 이해할 필요가 없을 수도 있지만 중급 및 고급 JavaScript 개발로 넘어갈 때 필수적입니다. 이는 주로 형식화된 배열을 사용해야 하는 더 복잡한 응용 프로그램을 개발하기를 원할 수 있기 때문입니다.

  형식 배열에 대해 자세히 알아보려면 아래에 첨부된 리소스 링크를 탐색하세요.

  읽어주셔서 감사하고 즐거운 프로그래밍 되세요! ! 리소스 - typed-arrays-ccfa5ae8838d
• 원저자: Mahdhi Rezvi

  더 많은 프로그래밍 관련 지식을 보려면

  프로그래밍 소개
를 방문하세요! !

위 내용은 한 기사에서 JavaScript의 형식화된 배열에 대해 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!