// 創(chuàng)建 16 字節(jié)的緩沖區(qū)
const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 16

// 創(chuàng)建 16 位無符號(hào)整數(shù)視圖
const uint16View = new Uint16Array(buffer);
// 寫入數(shù)據(jù)
uint16View[0] = 0x1234;
uint16View[1] = 0x5678;
// 讀取數(shù)據(jù)
console.log(uint16View[0].toString(16)); // "1234"
console.log(uint16View[1].toString(16)); // "5678"

const view = new DataView(buffer);
// 寫入數(shù)據(jù)（指定字節(jié)序）
view.setUint16(0, 0x1234, false); // 大端序
view.setUint16(2, 0x5678, true);  // 小端序
// 讀取數(shù)據(jù)
console.log(view.getUint16(0, false).toString(16)); // "1234"
console.log(view.getUint16(2, true).toString(16));  // "5678"

// 創(chuàng)建 3 像素的 RGB 緩沖區(qū)（每個(gè)像素 3 字節(jié)）
const rgbBuffer = new ArrayBuffer(9);
const rgbView = new Uint8Array(rgbBuffer);
// 填充像素?cái)?shù)據(jù)（R,G,B 格式）
rgbView.set([255, 0, 0, 0, 255, 0, 0, 0, 255]); // 紅、綠、藍(lán)
// 讀取第二個(gè)像素的綠色分量
console.log(rgbView[4]); // 255

// 模擬 20 字節(jié)的 TCP 頭部
const tcpHeaderBuffer = new ArrayBuffer(20);
const tcpView = new DataView(tcpHeaderBuffer);
// 設(shè)置源端口（大端序）
tcpView.setUint16(0, 54321, false);
// 設(shè)置目的端口（小端序）
tcpView.setUint16(2, 80, true);
// 讀取源端口
console.log(tcpView.getUint16(0, false)); // 54321

// 從文件創(chuàng)建 ArrayBuffer
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const buffer = event.target.result;
    const uint8View = new Uint8Array(buffer);
    // 讀取文件前 4 字節(jié)
    const fileSignature = Array.from(uint8View.slice(0, 4))
      .map(b => b.toString(16).padStart(2, '0'))
      .join(' ');
    console.log('File signature:', fileSignature);
  };
  reader.readAsArrayBuffer(file);
});

// 測試 100 萬次數(shù)據(jù)操作
const arraySize = 1e6;
// 普通數(shù)組測試
console.time('Array');
const arr = new Array(arraySize);
for (let i = 0; i < arraySize; i++) {
  arr[i] = i % 256;
}
console.timeEnd('Array'); // 約 5-10ms
// ArrayBuffer 測試
console.time('ArrayBuffer');
const buffer = new ArrayBuffer(arraySize);
const typedArr = new Uint8Array(buffer);
for (let i = 0; i < arraySize; i++) {
  typedArr[i] = i % 256;
}
console.timeEnd('ArrayBuffer'); // 約 1-3ms

// 創(chuàng)建共享緩沖區(qū)
const sharedBuffer = new ArrayBuffer(16);
const view1 = new Uint32Array(sharedBuffer);
const view2 = new Uint8Array(sharedBuffer, 4, 8); // 從第4字節(jié)開始，長度8字節(jié)
view1[0] = 0x12345678;
console.log(view2[0].toString(16)); // "78" (小端序下的第一個(gè)字節(jié))

// 處理不同字節(jié)序的數(shù)據(jù)
function readInt32(buffer, offset, isLittleEndian) {
  const view = new DataView(buffer);
  return view.getInt32(offset, isLittleEndian);
}
const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setInt32(0, 0x12345678, false); // 大端序?qū)懭?
console.log(readInt32(buffer, 0, false).toString(16)); // "12345678"
console.log(readInt32(buffer, 0, true).toString(16));  // "78563412"