예를 들어, 그것은 실제로 객체입니다. 예를 들어 다음과 같은 배열을 만들 수 있습니다.
var array = 새로운 배열 (10);
JavaScript 어레이의 힘과 전능성은 편의를 제공합니다. 그러나 일반적으로 말하기 :
다소 라운드는 다양한 환경에서 사용할 수 있지만 다양한 환경에 반드시 적합한 것은 아닙니다.
TypedArray는 배열이 JavaScript에서 너무 많은 일을하는 문제를 해결하기 위해 일어난 일입니다.
기원TypedArray는 버퍼에서 이진 데이터를 읽을 수있는 일반적인 고정 길이 버퍼 유형입니다.
JavaScript 처리 바이너리 데이터의 문제를 해결하기 위해 WebGL 사양에 소개됩니다.
TypedArray는 대부분의 최신 브라우저에서 지원되었습니다. 예를 들어 다음 방법을 사용하여 TypedArray를 만들 수 있습니다.
// 8 바이트 어레이 버퍼를 만듭니다
var b = 새로운 어레이 버퍼 (8);
// b, int32를 입력하고 시작 위치는 0이고 끝 위치는 버퍼의 끝입니다.
var v1 = 새로운 int32array (b);
// b의 참조 생성, 유형은 uint8이고, 시작 위치는 2이고, 끝 위치는 버퍼의 끝입니다.
var v2 = 새로운 uint8array (b, 2);
// b, int16을 입력하고 시작 위치는 2이고 총 길이는 2입니다.
var v3 = 새로운 int16array (b, 2, 2);
버퍼링되고 생성 된 참조 레이아웃은 다음과 같습니다.
| 변하기 쉬운 | 색인 | |||||||
|---|---|---|---|---|---|---|---|---|
| 바이트 수 | ||||||||
| b = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 인덱스 수 | ||||||||
| v1 = | 0 | 1 | ||||||
| v2 = | 0 | 1 | 2 | 3 | 4 | 5 | ||
| v3 = | 0 | 1 | ||||||
이는 int32 유형의 V1 배열의 0 번째 요소가 arraybuffer 유형의 0-3 바이트 등임을 의미합니다.
건설자위의 우리는 Arraybuffer를 통해 TypedArray를 생성하고 실제로 TypedArray는 인스턴스를 생성하기 위해 3 개의 생성자를 제공합니다.
typedarray (서명되지 않은 긴 길이)
길이가 고정 된 길이 인 새로운 typedarray를 만듭니다.
TypedArray (TypedArray 어레이)
typedarray (유형 [] 배열)
새 typedarray를 만들고 각 요소는 배열에 따라 초기화되며 요소는 그에 따라 변환됩니다.
typedArray (Arraybuffer 버퍼, 옵션이 부호없는 긴 바이트 오프셋, 옵션 부호없는 긴 길이)
버퍼에 대한 참조로 새 typedArray를 생성, 바이트 오프셋은 시작 오프셋 및 길이로 길이로 길이로 길이로 만듭니다.
따라서 우리는 일반적으로 다음과 같은 방식으로 typedarray를 만듭니다.
var array = 새로운 uint8array (10);
또는:
var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
데이터 작동TypedArray는 데이터 작업을위한 세터, getter, set 및 subarray의 네 가지 방법을 제공합니다.
지정된 인덱스의 요소를 반환합니다.
Setter void set (서명되지 않은 긴 색인, 유형 값)지정된 인덱스의 요소를 지정된 값으로 설정합니다.
void set ( typedArray 배열, 옵션 부호없는 긴 오프셋) void set ( 유형 [] 배열, 옵션 부호없는 긴 오프셋)배열에 따라 값을 설정하고 오프셋은 오프셋 위치입니다.
TypedArray 서브 어레이 (Long Begin, 선택적 롱 끝)시작 비트가 시작되고 끝 비트 엔드가있는 새 typedarray를 반환합니다.
예를 들어, 읽기 요소를 사용할 수 있습니다 . var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); Alert (Array [4]); // 5 설정 요소를 사용할 수 있습니다 . var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); Alert (Array [4]); // 5array [4] = 12; Alert (Array [4]); // 12 사본을 받으면 사용할 수 있습니다 . var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); var array2 = array.subarray (0); 배열 유형| 유형 | 크기 | 설명하다 | 웹 IDL 유형 | 유형 C. |
|---|---|---|---|---|
Int8Array | 1 | 8 비트 서명 정수 | byte | signed char |
Uint8Array | 1 | 8 비트 서명되지 않은 정수 | octet | unsigned char |
Uint8ClampedArray | 1 | 8 비트 서명 된 정수 (클램핑) | octet | unsigned char |
Int16Array | 2 | 16 비트 서명 정수 | short | short |
Uint16Array | 2 | 16 비트 서명되지 않은 정수 | unsigned short | unsigned short |
Int32Array | 4 | 32 비트 서명 정수 | long | int |
Uint32Array | 4 | 32 비트 서명되지 않은 정수 | unsigned long | unsigned int |
Float32Array | 4 | 32 비트 IEEE 플로팅 포인트 번호 | unrestricted float | float |
Float64Array | 8 | 64 비트 IEEE 플로팅 포인트 번호 | unrestricted double | double |
캔버스를 연주 한 사람들은 친숙하다고 느낄 수 있습니다.
이미지 데이터를 저장하는 데 사용되는 배열은 유형 UINT8ClampedArray입니다.
예를 들어:
var context = document.createElement (canvas) .getContext (2d); var imageatata = context.createimagedata (100, 100); console.log (imagedata.data); FireBug에 다음과 같이 표시됩니다 .TypedArray를 사용하는 이유uint8clampedArray {0 = 0, 1 = 0, 2 = 0, more ...}
JavaScript의 숫자는 64 비트 부동 소수점 번호라는 것을 알고 있습니다. 바이너리 이미지의 경우 (각 픽셀은 8 비트 부호없는 정수로 저장됩니다), JavaScript 배열에서 데이터를 사용하려면 이미지 메모리의 8 배를 사용하여 그림의 데이터를 저장하는 것과 같습니다. TypedArray는 원래 메모리의 1/8 만 사용하여 이미지 데이터를 저장하는 데 도움이 될 수 있습니다.
또는 WebSocket의 경우 Base64로 전송하는 것이 더 비싼 방법이며 이진 전송으로 전환하는 것이 더 나은 방법 일 수 있습니다.
물론 TypedArray는 더 나은 성능을 갖는 것과 같은 더 많은 이점이 있습니다. 이것을 확인하기 위해 소규모 테스트를합시다.
테스트에 참여하는 브라우저는 다음과 같습니다 .테스트 1 : 순차적 판독 속도 읽기Firefox 17.0.1 및 Chrome 23.0.1271.97m
var timearray1 = [];
var timearray2 = [];
함수 check1 () {
var array = 새로운 UINT8CLAMPEDARRAY (5000000);
for (var i = array.length; i-;) {
배열 [i] = math.floor (math.random () * 100);
}
var 온도;
var time1 = (new date ()). gettime ();
for (var i = array.length; i-;) {
온도 = 배열 [i];
}
var time2 = (new date ()). gettime ();
Console.log (Time2 -Time1);
timearray1.push (time2 -time1);
}
함수 check2 () {
var array2 = 새로운 배열 (5000000);
for (var i = array2.length; i-;) {
Array2 [i] = math.floor (math.random () * 100);
}
var 온도;
var time3 = (new date ()). gettime ();
for (var i = array2.length; i-;) {
임시 = 배열 [i];
}
var time4 = (new date ()). gettime ();
Console.log (Time4 -Time3);
timearray2.push (Time4 -Time3);
}
함수 타이머 (__ fun, __time, __callback) {
var now = 0;
함수 시작 () {
var timeout = settimeout (function () {
if (지금! == __time) {
이제 ++;
__재미있는();
시작하다();
}또 다른{
if (timearray1.length && timearray2.length) {
console.log ( "timearray1 ==" + timearray1 + ", 평균 ==" + 평균 (TimeArray1));
console.log ( "timearray2 ==" + timearray2 + ", 평균 ==" + 평균 (timearray2));
}
__callback && __callback ();
}
}, 100);
}
시작하다();
}
함수 평균 (__ 어레이) {
var total = 0;
for (var i = __array.length; i-;) {
총 += __array [i];
}
반환 (총 / __array.length);
}
타이머 (Check1, 10, function () {
타이머 (체크 2, 10);
});
UINT8ClampedArray의 판독 속도는 배열의 판독 속도보다 훨씬 빠릅니다 (막대가 길수록 시간이 더 걸리면).
test2 : 무작위 읽기//…
함수 check1 () {
var array = 새로운 UINT8CLAMPEDARRAY (5000000);
for (var i = array.length; i-;) {
배열 [i] = math.floor (math.random () * 100);
}
var 온도;
var time1 = (new date ()). gettime ();
for (var i = array.length; i-;) {
temp = array [math.floor (math.random () * 5000000)];
}
var time2 = (new date ()). gettime ();
Console.log (Time2 -Time1);
timearray1.push (time2 -time1);
}
함수 check2 () {
var array2 = 새로운 배열 (5000000);
for (var i = array2.length; i-;) {
Array2 [i] = math.floor (math.random () * 100);
}
var 온도;
var time3 = (new date ()). gettime ();
for (var i = array2.length; i-;) {
temp = array2 [math.floor (math.random () * 5000000)];
}
var time4 = (new date ()). gettime ();
Console.log (Time4 -Time3);
timearray2.push (Time4 -Time3);
}
//…
uint8clampedarray는 배열보다 빠르게 읽습니다.
Test3 : 순차적 인 글쓰기//…
함수 check1 () {
var array = 새로운 UINT8CLAMPEDARRAY (5000000);
var time1 = (new date ()). gettime ();
for (var i = array.length; i-;) {
배열 [i] = math.floor (math.random () * 100);
}
var time2 = (new date ()). gettime ();
Console.log (Time2 -Time1);
timearray1.push (time2 -time1);
}
함수 check2 () {
var array2 = 새로운 배열 (5000000);
var time3 = (new date ()). gettime ();
for (var i = array2.length; i-;) {
Array2 [i] = math.floor (math.random () * 100);
}
var time4 = (new date ()). gettime ();
Console.log (Time4 -Time3);
timearray2.push (Time4 -Time3);
}
//…
Test4 : 작업 복사 (U8C에서 U8C 및 Array to U8C).//…
함수 check1 () {
var array = 새로운 UINT8CLAMPEDARRAY (5000000);
for (var i = array.length; i-;) {
배열 [i] = math.floor (math.random () * 100);
}
var 온도;
var array2 = 새로운 uint8clampedArray (5000000);
var time1 = (new date ()). gettime ();
Array2.Set (배열);
var time2 = (new date ()). gettime ();
Console.log (Time2 -Time1);
timearray2.push (time2 -time1);
}
함수 check2 () {
var array = 새 배열 (5000000);
for (var i = array.length; i-;) {
배열 [i] = math.floor (math.random () * 100);
}
var 온도;
var array2 = 새로운 uint8clampedArray (5000000);
var time1 = (new date ()). gettime ();
Array2.Set (배열);
var time2 = (new date ()). gettime ();
Console.log (Time2 -Time1);
timearray2.push (time2 -time1);
}
//…
U8C를 U8C로 복사하는 것이 어레이를 U8C에 복사하는 것보다 훨씬 빠릅니다.