【JavaScript】 ArrayBufferとTypedArray-メモリを確保してアクセス

const dataView = new DataView( new ArrayBuffer(4) );

const arrayBuf = new  ArrayBuffer(4);
const dataView = new DataView(  arrayBuf , 1 , 2 );

console.log( dataView.byteOffset , dataView.byteLength );  // 1 2

const dataView = new DataView( new ArrayBuffer(4) );

const dataView2 = new DataView( dataView.buffer );

const aryBuffer = new ArrayBuffer(4);
const dataView = new DataView( aryBuffer );

const dataView2 = new DataView( aryBuffer );

   // 先頭から2バイトを割り当て
const dataView = new DataView( new ArrayBuffer(4) , 0 , 2 );

   // 位置2から2バイトを割り当て
const dataView2 = new DataView( dataView.buffer , 2 , 2 );

   // バッファー全体を割り当て
const dataView3 = new DataView( dataView2.buffer );

  // bufferプロパティは同じオブジェクトを返す
console.log( dataView2.buffer === dataView.buffer );   // true

const dataView = new DataView( new ArrayBuffer(4) , 0 , 5 );
 // Uncaught RangeError: invalid data view length

const dataView = new DataView( new ArrayBuffer(4) , 5 , 5 );
 // Uncaught RangeError: start offset is outside the bounds of the buffer

const dataView = new DataView( new ArrayBuffer(4) );

dataView.setUint16( 0 , 0x1a1b); // 符号なし2バイト整数を0バイト目にセット
dataView.setUint16( 2 , 0x1c1d); // 符号なし2バイト整数を2バイト目にセット

const byteString = [];

  // 1バイトずつ取得
for( let i = 0 ; i < dataView.byteLength ; i ++ )
    byteString.push( 
        dataView.getUint8( i ).toString(16) // 1バイト取得後16進文字列に変換
    );

console.log( byteString.join( " " ) ); // 1a 1b 1c 1d

const u8 = new Uint8Array( new ArrayBuffer(4) );

const u16 = new Uint16Array( new ArrayBuffer(5)  );
 // Uncaught RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer

    // 8ビット(1バイト)符号なし整数を10個確保
const u8 = new Uint8Array( 10 ); 
    // 16ビット(2バイト)符号なし整数を10個確保
const u16 = new Uint16Array( 10 );

console.log( u8.length , u8.byteLength );    // 10 10
console.log( u16.length , u16.byteLength );  // 10 20

const u8 = new Uint8Array( [ 1001 ,1002 , 1003 ] );
console.log( u8 );  //  [ 233, 234, 235 ]

const u16 = new Uint16Array( [ 1001 ,1002 , 1003 ] );

const u8 = new Uint8Array( u16 );
console.log( u8 ); // [ 233, 234, 235 ]

const u8 = new Uint8Array( 4 );
const u16 = new Uint16Array( u8.buffer );

const aryBuffer = new ArrayBuffer(4);
const u8 = new Uint8Array( aryBuffer );
const u16 = new Uint16Array( aryBuffer );

   // 先頭から2バイトを割り当て
const u8 = new Uint8Array( new ArrayBuffer(8) , 0 , 2 );

   // 位置2から1要素(2バイト)を割り当て
const u16 = new Uint16Array( u8.buffer , 2 , 1 );

   // 位置4から1要素(4バイト)を割り当て
const u32 = new Uint32Array( u16.buffer , 4 , 1);

  // bufferプロパティは同じオブジェクトを返す
console.log( u16.buffer === u32.buffer );   // true

const u32 = new Uint32Array( new ArrayBuffer(8) , 3 , 1);
 // Uncaught RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer

const u32 = new Uint32Array( new ArrayBuffer(8) , 4 , 2);
 // Uncaught RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer

const u16 = new Uint16Array( new ArrayBuffer(4));

u16[0] = 10000000;
u16[1] = u16[0] + 40000000;

u16.forEach( (e,index)=>console.log( index , e) ); 
  // 0 38528
  // 1 61568

window.addEventListener( "DOMContentLoaded" , ()=> {

    const fileInput = document.getElementById("fileinput");
    const result = document.getElementById("result");

    const fileLoad = file => {
        const reader = new FileReader();
        reader.onload = ()=> {
            const u8 = new Uint8Array(reader.result);
            const length = Math.min( u8.length , 100 );
            const resultBuff = [];

            for( let i = 0 ; i < length ; i ++ )
                resultBuff.push( `${i} ${ u8[i].toString( 16 ) }`);
            result.innerHTML = resultBuff.join("<br>");
        };
        reader.onerror = () => {
            reader.abort();
            alert(`${file.name}を読み込めませんでした`);
        };
        reader.readAsArrayBuffer(file);
    };

    fileInput.addEventListener("change", e => fileLoad(fileInput.files[0]));
});

window.addEventListener( "DOMContentLoaded" , ()=> {

const download = document.getElementById("download");
    
    const fileDownload = (filename,data) => {
        const blob = new Blob([data], {type: "octet/stream"});
        const url = URL.createObjectURL(blob);
    
        const aTag = document.createElement("a");
        aTag.href = url;
        aTag.target = "_blank";
        aTag.download = filename;
        aTag.click();
        URL.revokeObjectURL(url);
    };
    
    const FILE_NAME = "download.dat";
    const data = Uint8Array.of( 10 , 20 , 30 , 40 , 50 );
    
    download.addEventListener("click", e => fileDownload( FILE_NAME,data.buffer ));
});

const arrayBuffer = new ArrayBuffer(10);

const dataView1 =  new DataView( arrayBuffer );

console.log( arrayBuffer === dataView1.buffer ); // true
console.log( dataView1.byteOffset ); // 0
console.log( dataView1.byteLength ); // 10

const dataView2 =  new DataView( dataView1.buffer , 2 , 4 );
console.log( dataView2.byteOffset ); // 2
console.log( dataView2.byteLength ); // 4

const dataView =  new DataView( new ArrayBuffer(10) );

    // ビッグエンディアンで書き込み
dataView.setUint16( 0 , 0x1234 );

   // ビッグエンディアンで取得
console.log( dataView.getUint16( 0  ).toString(16) ); // 1234
   // リトルエンディアンで取得
console.log( dataView.getUint16( 0 ,true ).toString(16) ); // 3412

    // リトルエンディアンで書き込み
dataView.setUint16( 2 , 0x1234 , true );

   // ビッグエンディアンで取得
console.log( dataView.getUint16( 2  ).toString(16) ); // 3412
   // リトルエンディアンで取得
console.log( dataView.getUint16( 2 ,true ).toString(16) ); // 1234

const u16 =  new Uint16Array( 5 );

console.log( u16.byteOffset ); // 0
console.log( u16.byteLength ); // 10
console.log( u16.length ); // 5

const u16_2 =  new Uint16Array( u16.buffer , 2 , 2 );
console.log( u16_2.byteOffset ); // 2
console.log( u16_2.byteLength ); // 4
console.log( u16_2.length );  // 2