JavaScript_javascript 기술의 ArrayBuffer에 대한 자세한 소개-JS 튜토리얼-php.cn

모든 자바스크립트 학습자는 JS의 다양한 기본 데이터 유형을 이해할 것이라고 믿습니다. 배열은 매우 기본적이고 간단한 개념이며 배우기가 어렵지 않습니다. 글쎄요. 하지만 이 글에서 초점을 맞춘 것은 우리가 흔히 보는 Array가 아니라 ArrayBuffer입니다.

내가 쓰는 글 중 상당수는 특정 기능을 완성하고 싶어서 일부러 요약한 것인데, 이 글도 마찬가지다! 얼마전 Web Audio API와 음성통신 관련 지식을 공부했는데, AudioContext의 다양한 노드 사이의 오디오 스트림 흐름에 초점을 맞춰서 오디오가 어떤 데이터 형식인지 알아내야 합니다. 스트림이 끝나기 때문에 ArrayBuffer에 대한 깊은 이해가 있습니다. 연구가 매우 중요합니다.

메모리의 배열 스택 모델

배열 가져오기

Javascript에서 배열을 생성하는 방법:

코드 복사 코드는 다음과 같습니다.

[요소0, 요소1, ..., 요소N]

새로운 배열(요소0, 요소1, ..., 요소N)

새로운 배열(arrayLength)

직접 정의하거나 생성자를 통해 배열을 생성할 수도 있습니다. 물론 다른 방법을 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

"배열".split("");

"배열".match(/a|r/g);

잠깐만요. 방법은 많습니다. 하지만 Array의 내부 구조는 무엇인지 아직 명확하지 않은 분들이 많을 것 같습니다.

스택 모델

다음과 같이 배열에 다양한 데이터 유형을 넣을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var arr = [21, "이쿄", new Date(), function(){}, , null];

위 배열에는 숫자, 문자열, 객체, 함수, 정의되지 않음 및 null이 포함되어 있습니다. 위의 데이터 인터페이스를 구체적으로 설명할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

스택
--------- 힙
21 | -------
--------- "리징" | --------- | [참조] |--------->| 객체 | --------- | [참조] |------> -------- |
--------- | |정의되지 않음| --------- | null | ------------------
--------- 제작자 Barret Lee

JavaScript 데이터 유형은 값 유형과 참조 유형으로 구분됩니다. 일반적인 참조 유형은 숫자 및 문자열과 같은 값 유형인 경우 객체입니다. 참조 유형은 값에 대한 인덱스만 푸시하는 반면, C 언어로 설명하면 데이터에 대한 포인터만 힙의 특정 범위에 저장됩니다. . 스택은 독립적이지 않으며 스택은 힙에 저장될 수도 있습니다.

자, Array에 대한 설명은 여기까지입니다. ArrayBuffer에 대한 관련 지식을 자세히 이야기해 보겠습니다.

배열버퍼

웹이란 무엇인가? 웹에서 논의되는 가장 기본적인 이슈는 무엇인가? 제 생각에는 두 가지가 있는데, 하나는 데이터이고 다른 하나는 데이터 전송입니다. 데이터 표시는 웹의 상위 계층에 있는 것이어야 합니다. 본 글에서 다루게 될 ArrayBuffer는 가장 기본적인 데이터 타입이라 할 수 없으며, 다른 방법으로 읽고 써야 하는 데이터이다.

공식 포인트 정의:

ArrayBuffer는 일반적인 고정 길이 바이너리 데이터 버퍼를 나타내는 데 사용되는 데이터 유형입니다. 대신 ArrayBuffer의 내용을 직접 조작할 수 없으며 특정 버퍼를 나타내는 ArrayBufferView 개체를 만듭니다. 형식을 지정하고 이를 사용하여 버퍼의 내용을 읽고 씁니다.
다양한 형식의 배열에 대한 데이터를 저장하는 데 사용되는 이진 데이터의 원시 버퍼를 나타냅니다. ArrayBuffer는 직접 읽거나 쓸 수 없지만 원시 버퍼는 필요에 따라 형식화된 배열이나 DataView 개체에 전달하여 해석할 수 있습니다.

바이너리 데이터의 원시 버퍼입니다. JavaScript는 약한 유형의 언어이지만 일종의 데이터 구조를 통해 버퍼의 내용을 정렬해야 합니다. (쓰기).

Raw 버퍼 생성

ArrayBuffer 생성자를 통해 원시 버퍼를 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var buffer = new ArrayBuffer(30);

크롬 콘솔에서 볼 수 있습니다:

버퍼 인스턴스에는 버퍼의 크기를 가져오는 데 사용되는 byteLength 속성과 IE11 및 ios6에서만 지원되며 버퍼 길이를 가로채는 데 사용되는 슬라이스 메서드가 있습니다.

코드 복사 코드는 다음과 같습니다.

ArrayBuffer 슬라이스(

부호 없는 긴 시작

부호 없는 긴 끝 선택 사항

);

이 데모를 테스트해 볼 수 있습니다:

코드 복사 코드는 다음과 같습니다.

var buffer = new ArrayBuffer(12);

var x = new Int32Array(버퍼);

x[1] = 1234;

var 슬라이스 = buffer.slice(4);

var y = new Int32Array(슬라이스);

console.log(x[1]) 

console.log(y[0]);

x[1] = 6789;

console.log(x[1]) 

console.log(y[0]);

데이터 배열

형식 있는 배열 유형은 인덱싱 및 조작할 수 있는 ArrayBuffer 개체의 다양한 보기를 나타냅니다. 모든 배열 유형은 고정된 길이를 갖습니다.

코드 복사 코드는 다음과 같습니다.

이름 크기(바이트) 설명 

Int8Array 1 8비트 2의 보수 부호 있는 정수

Uint8Array 1 8비트 부호 없는 정수

Int16Array 2 16비트 2의 보수 부호 있는 정수

Uint16Array 2 16비트 부호 없는 정수

Int32Array 4 32비트 2의 보수 부호 있는 정수

Uint32Array 4 32비트 부호 없는 정수

Float32Array 4 32비트 IEEE 부동 소수점 숫자

Float64Array 8 64비트 IEEE 부동 소수점 숫자

Int는 정수형, Uint는 부호 없는 정수형, Float은 부동 소수점형이다. 이는 C 언어의 기본 개념이므로 자세히 설명하지 않겠다. 이러한 시각화 구조는 모두 유사하므로 이 기사에서는 Float32Array 유형만 설명하며 독자는 하나의 예에서 추론을 도출할 수 있습니다.

Float32Array는 각 요소가 32비트(4바이트) 부동 소수점 데이터라는 점을 제외하면 Array와 매우 유사합니다. Float32Array가 생성되면 크기를 수정할 수 없습니다.

Float32Array를 직접 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var x = new Float32Array(2);

x[0] = 17;

console.log(x[0]); // 17

console.log(x[1]); // 0

console.log(x.length); // 2

이러한 개념이 필요합니다. 여전히 배열이지만 배열의 각 요소는 Float 32비트 데이터 유형입니다.

코드 복사 코드는 다음과 같습니다.

var x = new Float32Array([17, -45.3]);

console.log(x[0]); // 17

console.log(x[1]); // -45.29999923706055

console.log(x.length); // 2

배열의 값을 Float32Array 객체 x에 직접 할당한 다음 이를 저장하기 전에 32비트 부동 소수점 숫자로 변환합니다.

이 배열 유형의 각 요소는 동일한 유형이므로 스택 모델에서는 모두 스택에 푸시됩니다. 따라서 데이터 배열은 참조 유형이 아닌 값 유형입니다. 이는 주의를 끌 것이며 다음 예에서도 반영될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var x = new Float32Array([17, -45.3]);

var y = new 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 = new Float32Array(버퍼, 0, 2);

var y = new Float32Array(버퍼, 4, 1);

x[1] = 7;

console.log(y[0]); // 7

7이 반환되는 이유를 설명하세요.

코드 복사 코드는 다음과 같습니다.

배열버퍼(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 = new 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를 방문하여 자세히 알아보세요.

XHR2의 ArrayBuffer

ArrayBuffer는 WebSocket, WebAudio, Ajax 등 널리 사용되며 프런트엔드에서 빅데이터를 처리하거나 데이터 처리 성능을 향상하려는 경우 ArrayBuffer는 반드시 필요합니다.

XHR2는 새로운 것이 아닙니다. 관련 기능을 사용해 보셨지만 이것이 XHR2의 콘텐츠인지는 몰랐을 것입니다. 가장 중요한 것은 xhr.responseType입니다. 그 기능은 응답의 데이터 형식을 설정하는 것입니다. 선택적 매개변수는 "text", "arraybuffer", "blob" 또는 "document"입니다. xhr.responseType = ''를 설정(또는 생략)하면 기본 응답이 "text"로 설정됩니다. 여기에 다음과 같은 서신이 있습니다.

코드 복사 코드는 다음과 같습니다.

응답요청

텍스트 DOMString

어레이버퍼 ArrayBuffer

BLOB BLOB

문서문서

예를 들어주세요:

코드 복사 코드는 다음과 같습니다.

var xhr = 새로운 XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = 함수(e) {
// this.response == uInt8Array.buffer
var uInt8Array = new Uint8Array(this.response)
};

xhr.send();

xhr.responseType의 속성을 arraybuffer로 설정하여 데이터 배열을 사용하여 얻은 데이터를 받아들일 수 있습니다!

요약

이 글에서는 스택 모델에서 Array의 저장 방법을 주로 소개하고, 원본 버퍼 ArrayBuffer의 바이너리 데이터 유형에 대해서도 자세히 설명합니다. 웹 개발에서 데이터와 데이터 저장은 중요한 부분입니다. 주목!

본 글 설명에 오류가 있을 수 있으니 정정해주세요!