나는 모든 JavaScript 학습자가 JS의 다양한 기본 데이터 유형을 이해할 것이라고 생각합니다. 배열은 데이터 조합입니다. 이것은 매우 기본적이고 단순한 개념입니다. 내용이 많지 않으며 잘 배우는 것은 어렵지 않습니다. 그러나이 기사에서 중요한 것은 우리가 일반적으로 보는 배열이 아니라 Arraybuffer입니다.
내가 쓴 많은 것들이 특정 기능을 완료하기를 원하기 때문에 의도적으로 요약됩니다. 그것들은 메모로 간주 될 수 있으며이 기사에서도 마찬가지입니다! 나는 얼마 전에 웹 오디오 API 및 음성 커뮤니케이션과 관련된 지식을 연구 해 왔습니다. 컨텐츠는 다양한 오디오 컨텍스트 노드 간의 오디오 스트림 흐름에 중점을 둡니다. 이제 스트림에 대한 오디오가 어떤 종류의 데이터 형식인지 이해해야하므로 Arraybuffer에 대한 연구가 특히 중요합니다.
메모리의 배열 스택 모델
배열의 인수
자바 스크립트에서 배열을 생성하는 방법 :
코드 사본은 다음과 같습니다.
[Element0, Element1, ..., Elementn]
새로운 배열 (element0, element1, ..., elementn)
새로운 배열 (Arraylength)
직접 정의하거나 생성자를 통해 배열을 작성하십시오. 물론 다른 방법을 사용할 수도 있습니다.
코드 사본은 다음과 같습니다.
"배열".split ( "");
"배열".match (/a | r/g);
잠깐, 여러 가지 방법이 있습니다. 그러나 나는 많은 사람들이 어레이 내부의 구조에 대해 명확하지 않다는 것을 두려워합니다.
스택 모델
배열에서는 다음과 같은 다른 데이터 유형의 많은 데이터를 넣을 수 있습니다.
코드 사본은 다음과 같습니다.
var arr = [21, "li jing", new date (), function () {} ,, null];
위의 배열에는 숫자, 문자열, 객체, 함수, 정의되지 않은 및 null이 포함되어 있습니다. 위의 데이터 인터페이스를 구체적인 방식으로 설명 할 수 있습니다.
코드 사본은 다음과 같습니다.
스택
+------------------------------------------------------------------------------------------------------------------------------
| 21 | +-----------------------------+
+ ----------++ |
| "Li Jing"| | |
+ ----------++ + ---------+ |
| [참조] | ----------> | 객체 | |
+ ----------++ + ---------+ |
| [참조] | ------------------------------+ |
+ ----------++ | 기능 | |
| 정의되지 않은 | | + ---------+ |
+ ----------++ |
| 널 | +-------------------------+
+ -----------+ Barret Lee에 의해 만들어졌습니다
JavaScript 데이터 유형은 두 가지 유형으로 나뉩니다. 하나는 값 유형이고 다른 하나는 참조 유형입니다. 일반적인 참조 유형에는 객체 및 배열이 포함됩니다. 배열의 스토리지 모델에서 값 유형 데이터가 숫자 및 문자열과 같으면 데이터가 스택으로 직접 푸시되는 반면, 참조 유형은 값의 색인으로 만 푸시됩니다. C 언어의 개념은 데이터의 포인터 만 저장하는 것이며,이 데이터는 힙의 특정 블록에 저장됩니다. 스택은 독립적이지 않으며 스택은 스택에 저장 될 수도 있습니다.
좋아, 그게 배열의 설명을위한 것입니다. Arraybuffer의 관련 지식에 대해 자세히 설명해 봅시다.
Arraybuffer
웹은 무엇입니까? 웹에서 논의해야 할 가장 기본적인 문제는 무엇입니까? 두 가지 요점이 있다고 생각합니다. 하나는 데이터이고 다른 하나는 데이터 전송입니다. 데이터 표시와 관련하여 복잡하고 웹의 상단 계층에 있어야합니다. 이 기사에서 논의 할 배열 버퍼는 가장 기본적인 데이터 유형이며 데이터 유형이라고도 할 수 없습니다. 다른 방식으로 읽고 쓰기 쉽습니다.
공식 지점의 정의 :
ArrayBuffer는 일반적인 고정 길이 이진 데이터 버퍼를 나타내는 데 사용되는 데이터 유형입니다. Arraybuffer의 내용을 직접 조작 할 수는 없습니다. 대신, 특정 형식의 버퍼를 나타내는 ArrayBufferView 객체를 작성하고이를 사용하여 버퍼의 내용을 읽고 씁니다.
이진 데이터를 나타내는 원래 버퍼는 다양한 유형의 배열 데이터를 저장하는 데 사용됩니다. Arraybuffer는 직접 읽거나 쓸 수 없지만 원래 버퍼를 해석하는 데 필요에 따라 유형의 배열 또는 Dataview 객체로 전달할 수 있습니다.
이진 데이터의 원시 버퍼입니다. JavaScript는 약한 유형 언어이지만 데이터의 유형과 크기에 제한이 있습니다. 특정 데이터 구조를 통해 버퍼의 내용을 순서대로 (쓰기) 읽어야합니다.
원래 버퍼의 생성
Arraybuffer 생성자는 원시 버퍼를 만들 수 있습니다.
코드 사본은 다음과 같습니다.
var 버퍼 = 새로운 Arraybuffer (30);
Chrome 콘솔에서 다음을 볼 수 있습니다.
버퍼 인스턴스는 버퍼 크기를 얻는 데 사용되는 바이트 길이 속성을 가지고 있으며, 이는 버퍼 길이를 가로 채는 데 사용되는 IE11+ 및 iOS6+에 의해서만 지원되는 슬라이스 방법입니다.
코드 사본은 다음과 같습니다.
어레이 버퍼 슬라이스 (
서명되지 않은 오래 시작
서명되지 않은 장기 옵션
);
이 데모를 테스트 할 수 있습니다.
코드 사본은 다음과 같습니다.
var 버퍼 = 새로운 Arraybuffer (12);
var x = 새로운 int32Array (버퍼);
x [1] = 1234;
var slice = buffer.slice (4);
var y = 새로운 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는 서명되지 않은 플라스틱이며 플로트는 플로팅 포인트 유형입니다. 이것들은 C 언어의 기본 개념이므로 자세히 설명하지 않을 것입니다. 이러한 관찰 구조는 비슷하기 때문에이 기사는 Float32Array 유형에 대해서만 설명하며 독자는 하나씩 배울 수 있습니다.
Float32Array는 각 요소가 32 비트 (4 바이트) 플로팅 포인트 데이터라는 점을 제외하고 배열과 매우 유사합니다. float32array 일단 생성되면 크기를 수정할 수 없습니다.
Float32Array를 직접 만들 수 있습니다.
코드 사본은 다음과 같습니다.
var x = 새로운 float32array (2);
x [0] = 17;
Console.log (x [0]); // 17
Console.log (x [1]); // 0
Console.log (x.length); // 2
여전히 배열이라는 개념이 필요하지만 배열의 각 요소는 플로트 32 비트 데이터 유형입니다.
코드 사본은 다음과 같습니다.
var x = 새로운 float32Array ([17, -45.3]);
Console.log (x [0]); // 17
Console.log (x [1]); // -45.2999923706055
Console.log (x.length); // 2
배열 값을 x, float32array 객체 인 x에 직접 할당 한 다음 스토리지 전에 32 비트 부동 소수점 번호로 변환됩니다.
이 클래스 배열의 각 요소는 동일한 유형이므로 스택 모델에서 모두 스택으로 밀려납니다. 따라서 데이터화 된 배열은 값 유형이며 참조 유형이 아닙니다! 이것은 주목해야하며 다음 예제에도 반영 될 수 있습니다.
코드 사본은 다음과 같습니다.
var x = 새로운 float32Array ([17, -45.3]);
var y = 새로운 float32Array (x);
Console.log (x [0]); // 17
Console.log (x [1]); //-45.2999923706055
Console.log (x.length); // 2
x [0] = -2;
Console.log (y [0]); // 17, Y의 값은 변경되지 않았습니다
x의 값을 y로 복사하고 x [0], y [0]을 수정하면 변경 사항이 없습니다.
위의 방법 외에도 다른 방식으로 데이터 화 된 배열을 만들 수도 있습니다.
코드 사본은 다음과 같습니다.
var 버퍼 = 새로운 Arraybuffer (12);
var x = 새로운 float32array (버퍼, 0, 2);
var y = new float32array (버퍼, 4, 1);
x [1] = 7;
Console.log (y [0]); // 7
왜 7이 여기에 반환되는지 설명하십시오.
코드 사본은 다음과 같습니다.
Arraybuffer (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 | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
/ /
와이
Barret Lee가 만들었습니다
위의 그림을 읽은 후에도 여전히 질문이 있습니까? 나는 계속 설명 할 필요가 없다고 생각합니다. Arraybuffer의 단위는 1으로 간주 될 수 있고 Float32Array의 단위는 4입니다.
데이터 뷰 개체
Dataview 객체는 데이터를보다 세 심하게 작동하지만 흥미롭지 않다고 생각합니다. 위에서 언급 한 다양한 데이터 기반 배열은 기본적으로 응용 프로그램을 만족시킬 수 있으므로 간단한 예입니다.
코드 사본은 다음과 같습니다.
var 버퍼 = 새로운 Arraybuffer (12);
var x = 새로운 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.REPONSETYPE입니다. 선택적 매개 변수는 "Text", "Arraybuffer", "Blob"또는 "Document"입니다. xhr.responsetype = ''설정 (또는 무시)은 기본적으로 "텍스트"에 대한 응답을 설정합니다. 다음과 같은 해당 관계가 있습니다.
코드 사본은 다음과 같습니다.
요청 응답
텍스트 domstring
ArrayBuffer ArrayBuffer
블로브 블로브
문서 문서
밤나무를 가져 가십시오 :
코드 사본은 다음과 같습니다.
var xhr = 새로운 xmlhttprequest ();
xhr.open ( 'get', '/path/to/image.png', true);
xhr.responsetype = 'arraybuffer';
xhr.onload = function (e) {
// this.response == uint8array.buffer
var uint8array = new uint8array (this.response);
};
xhr.send ();
XHR.REPONSETYPE의 ArrayBuffer로 속성을 설정하여 데이터 기반 배열을 사용하여 얻은 데이터를 수락 할 수 있습니다!
요약
이 기사는 주로 배열이 스택 모델에 저장되는 방법을 소개하며 원래 버퍼 인 Arraybuffer의 이진 데이터 유형을 자세히 설명합니다. 웹 개발에서 데이터 및 데이터 스토리지가 중요한 부분이므로 관심을 끌기를 바랍니다.
이 기사의 이야기에는 오류가있을 수 있습니다. 더 많이 수정하십시오!