定型数组

定型数组体系
├── 基础概念
│   ├── 历史背景 - WebGL 性能优化需求
│   ├── ArrayBuffer - 二进制数据缓冲区
│   └── 视图概念 - DataView vs 定型数组
├── 核心组件
│   ├── ArrayBuffer - 内存分配和管理
│   ├── DataView - 灵活的数据读写
│   └── 定型数组类型 - 9种类型化数组
├── 定型数组类型
│   ├── 整数类型 - Int8/16/32, Uint8/16/32
│   ├── 浮点类型 - Float32/64
│   └── 特殊类型 - Uint8ClampedArray
├── 内存管理
│   ├── 字节序 - 大端/小端字节序
│   ├── 溢出处理 - 数值溢出的自动处理
│   └── 性能优化 - 内存布局和访问效率
└── 实际应用
    ├── WebGL - 图形渲染
    ├── Canvas - 图像处理
    ├── Web Audio - 音频数据
    ├── 文件处理 - 二进制文件读写
    └── 网络协议 - 二进制协议解析

// 性能测试：普通数组 vs 定型数组
const size = 1000000

// 普通数组
console.time('普通数组')
const normalArray = new Array(size).fill(0).map(() => Math.random())
const normalSum = normalArray.reduce((a, b) => a + b, 0)
console.timeEnd('普通数组')

// 定型数组
console.time('定型数组')
const typedArray = new Float32Array(size).map(() => Math.random())
const typedSum = typedArray.reduce((a, b) => a + b, 0)
console.timeEnd('定型数组')

// 结果：定型数组通常快 2-5 倍

普通数组内存布局：
┌─────────────────────────────────────────┐
│ 元素0: 对象引用 (8字节)                   │
│ 元素1: 对象引用 (8字节)                   │
│ 元素2: 对象引用 (8字节)                   │
│ ...                                      │
│ 每个元素都是对象引用，内存占用大           │
└─────────────────────────────────────────┘

定型数组内存布局 (Int32Array)：
┌─────────────────────────────────────────┐
│ 元素0: 4字节 │ 元素1: 4字节 │ 元素2: 4字节 │
│ 连续内存，无引用，CPU缓存友好             │
└─────────────────────────────────────────┘

const buf = new ArrayBuffer(16) // 在内存中分配 16 字节

console.log(buf.byteLength) // 16

const buf1 = new ArrayBuffer(16)
const buf2 = buf1.slice(4, 12)
console.log(buf2.byteLength) // 8

const buf = new ArrayBuffer(16)

// DataView 默认使用整个 ArrayBuffer
const fullDataView = new DataView(buf)
console.log(fullDataView.byteOffset) // 0
console.log(fullDataView.byteLength) // 16
console.log(fullDataView.buffer === buf) // true

// 构造函数接收一个可选的字节偏移量和字节长度，byteOffset=0 表示视图从缓冲起点开始，byteLength=8 限制视图为前 8 个字节
const firstHalfDataView = new DataView(buf, 0, 8)
console.log(firstHalfDataView.byteOffset) // 0
console.log(firstHalfDataView.byteLength) // 8
console.log(firstHalfDataView.buffer === buf) // true

// 如果不指定，则 DataView 会使用剩余的缓冲，byteOffset=8 表示视图从缓冲的第 9 个字节开始，byteLength 未指定，默认为剩余缓冲
const secondHalfDataView = new DataView(buf, 8)
console.log(secondHalfDataView.byteOffset) // 8
console.log(secondHalfDataView.byteLength) // 8
console.log(secondHalfDataView.buffer === buf) // true

// 在内存中分配两个字节并声明一个 DataView
const buf = new ArrayBuffer(2)
const view = new DataView(buf)

// 说明整个缓冲确实所有二进制位都是 0
// 检查第一个和第二个字符
console.log(view.getInt8(0)) // 0
console.log(view.getInt8(1)) // 0

// 检查整个缓冲
console.log(view.getInt16(0)) // 0

// 将整个缓冲都设置为 1，255 的二进制表示是 11111111（2^8 - 1）
view.setUint8(0, 255)

// DataView 会自动将数据转换为特定的 ElementType，255 的十六进制表示是 0xFF
view.setUint8(1, 0xff)

// 现在，缓冲里都是 1 了
// 如果把它当成二补数的有符号整数，则应该是-1
console.log(view.getInt16(0)) // -1

// 在内存中分配两个字节并声明一个 DataView
const buf = new ArrayBuffer(2)
const view = new DataView(buf)

// 填充缓冲，让第一位和最后一位都是 1
view.setUint8(0, 0x80)
view.setUint8(1, 0x01)

// 缓冲内容（为方便阅读，人为加了空格）
// 0x8 0x0 0x0 0x1
// 1000 0000 0000 0001
// 按大端字节序读取 Uint16

  // ... 中间省略 ...

view.setUint16(0, 0x0002, true)
// 缓冲内容（为方便阅读，人为加了空格）
// 0x0 0x2 0x0 0x0
// 0000 0010 0000 0000
console.log(view.getUint8(0)) // 2
console.log(view.getUint8(1)) // 0

const buf = new ArrayBuffer(6)
const view = new DataView(buf)

// 尝试读取部分超出缓冲范围的值
view.getInt32(4) // RangeError

// 尝试读取超出缓冲范围的值
view.getInt32(8) // RangeError

// 尝试读取超出缓冲范围的值
view.getInt32(-1) // RangeError

// 尝试写入超出缓冲范围的值
view.setInt32(4, 123) // RangeError

const buf = new ArrayBuffer(1)
const view = new DataView(buf)
view.setInt8(0, 1.5)
console.log(view.getInt8(0)) // 1

view.setInt8(0, [4])
console.log(view.getInt8(0)) // 4

view.setInt8(0, "f")
console.log(view.getInt8(0)) // 0
view.setInt8(0, Symbol())
// TypeError

const buf = new ArrayBuffer(12) // 创建一个 12 字节的缓冲
const ints = new Int32Array(buf) // 创建一个引用该缓冲的 Int32Array
// 这个定型数组知道自己的每个元素需要 4 字节,因此长度为 3
console.log(ints.length) // 3

const ints2 = new Int32Array(6) // 创建一个长度为 6 的 Int32Array
// 每个数值使用 4 字节，因此 ArrayBuffer 是 24 字节
console.log(ints2.length) // 6
// 类似 DataView，定型数组也有一个指向关联缓冲的引用
console.log(ints2.buffer.byteLength) // 24

// 创建一个包含 [2, 4, 6, 8]的 Int32Array

  // ... 中间省略 ...


// 基于传入的参数创建一个 Float32Array
const floats = Float32Array.of(3.14, 2.718, 1.618)
console.log(floats.length) // 3
console.log(floats.buffer.byteLength) // 12
console.log(floats[2]) // 1.6180000305175781

console.log(Int16Array.BYTES_PER_ELEMENT) // 2
console.log(Int32Array.BYTES_PER_ELEMENT) // 4

const ints = new Int32Array(1),
  floats = new Float64Array(1)

console.log(ints.BYTES_PER_ELEMENT) // 4
console.log(floats.BYTES_PER_ELEMENT) // 8

const ints = new Int32Array(4)

console.log(ints[0]) // 0
console.log(ints[1]) // 0
console.log(ints[2]) // 0
console.log(ints[3]) // 0

const ints = new Int16Array([1, 2, 3])
const doubleints = ints.map((x) => 2 * x)
console.log(doubleints instanceof Int16Array) // true

const ints = new Int16Array([1, 2, 3])
for (const int of ints) {
  console.log(int)
}

// 1、2、3
console.log(Math.max(...ints)) // 3

// 创建长度为 8 的 int16 数组
const container = new Int16Array(8)

// 把定型数组复制为前 4 个值，偏移量默认为索引 0
container.set(Int8Array.of(1, 2, 3, 4))
console.log(container) // [1,2,3,4,0,0,0,0]

// 把普通数组复制为后 4 个值，偏移量 4 表示从索引 4 开始插入
container.set([5, 6, 7, 8], 4)
console.log(container) // [1,2,3,4,5,6,7,8]

// 溢出会抛出错误
container.set([5, 6, 7, 8], 7)
// RangeError

const source = Int16Array.of(2, 4, 6, 8)

// 把整个数组复制为一个同类型的新数组
const fullCopy = source.subarray()
console.log(fullCopy) // [2, 4, 6, 8]

// 从索引 2 开始复制数组
const halfCopy = source.subarray(2)
console.log(halfCopy) // [6, 8]

// 从索引 1 开始复制到索引 3
const partialCopy = source.subarray(1, 3)
console.log(partialCopy) // [4, 6]

// 第一个参数是应该返回的数组类型
// 其余参数是应该拼接在一起的定型数组
function typedArrayConcat(typedArrayConstructor, ...typedArrays) {
  // 计算所有数组中包含的元素总数
  const numElements = typedArrays.reduce((x, y) => (x.length || x) + y.length)
  // 按照提供的类型创建一个数组，为所有元素留出空间
  const resultArray = new typedArrayConstructor(numElements)
  // 依次转移数组
  let currentOffset = 0
  typedArrays.map((x) => {
    resultArray.set(x, currentOffset)
    currentOffset += x.length
  })
  return resultArray
}

const concatArray = typedArrayConcat(Int32Array, Int8Array.of(1, 2, 3), Int16Array.of(4, 5, 6), Float32Array.of(7, 8, 9))
console.log(concatArray) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(concatArray instanceof Int32Array) // true

// 长度为 2 的有符号整数数组
// 每个索引保存一个二补数形式的有符号整数
// 范围是-128（-1 * 2^7）~127（2^7 - 1）
const ints = new Int8Array(2)

// 长度为 2 的无符号整数数组
// 每个索引保存一个无符号整数
// 范围是 0~255（2^7 - 1）
const unsignedInts = new Uint8Array(2)

// 上溢的位不会影响相邻索引
// 索引只取最低有效位上的 8 位

  // ... 中间省略 ...

console.log(ints) // [0, -128]

// 下溢自动变成二补数形式
// 0xFF 是无符号整数的 255，是二补数形式的-1
ints[1] = 255 // 0xFF
console.log(ints) // [0, -1]

const clampedInts = new Uint8ClampedArray([-1, 0, 255, 256])
console.log(clampedInts) // [0, 0, 255, 255]

// 普通数组
const normalArray = [1, 2, 3]
normalArray.push(4) // ✅ 可以动态添加
normalArray[0] = "hello" // ✅ 可以存储任意类型

// 定型数组
const typedArray = new Int32Array([1, 2, 3])
// typedArray.push(4) // ❌ TypeError: typedArray.push is not a function
typedArray[0] = 4.7 // ✅ 会转换为整数 4
// typedArray[0] = "hello" // ❌ 会转换为 NaN 或 0

// 性能测试示例
const size = 1000000

// 普通数组
const normalArray = new Array(size).fill(0).map(() => Math.random())
console.time("普通数组")
const normalSum = normalArray.reduce((a, b) => a + b, 0)
console.timeEnd("普通数组")

// 定型数组
const typedArray = new Float32Array(size).map(() => Math.random())
console.time("定型数组")
const typedSum = typedArray.reduce((a, b) => a + b, 0)
console.timeEnd("定型数组")
// 定型数组通常快 2-5 倍

const normalArray = [1, 2, 3, 4]
const typedArray = new Int32Array([1, 2, 3, 4])

// 定型数组：4 个元素 × 4 字节 = 16 字节
console.log(typedArray.buffer.byteLength) // 16

// 普通数组：每个元素都是对象引用，内存占用更大且不固定

const typedArray = new Int32Array([1, 2, 3])

// ❌ 不支持的方法
// typedArray.push(4)
// typedArray.pop()
// typedArray.shift()
// typedArray.unshift(0)
// typedArray.splice(1, 1)
// typedArray.concat([4, 5])

// ✅ 支持的方法
typedArray.slice(1) // 返回新数组
typedArray.map((x) => x * 2) // 返回新数组
typedArray.filter((x) => x > 1) // 返回新数组

const int8Array = new Int8Array([128, -1, 256])
console.log(int8Array) // Int8Array(3) [ -128, -1, 0 ]
// 128 溢出变成 -128，256 溢出变成 0

const uint8Array = new Uint8Array([-1, 256])
console.log(uint8Array) // Uint8Array(2) [ 255, 0 ]
// -1 转换为 255，256 溢出变成 0

// 创建顶点位置数据
const vertices = new Float32Array([
  -1.0,
  -1.0,
  0.0, // 顶点 1
  1.0,
  -1.0,
  0.0, // 顶点 2
  0.0,
  1.0,
  0.0 // 顶点 3
])

  // ... 中间省略 ...

  255,
  255 // 蓝色
])

// 传递给 WebGL
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

// imageData.data 是 Uint8ClampedArray
const pixels = imageData.data

// 处理像素数据（例如：灰度化）
for (let i = 0; i < pixels.length; i += 4) {
  const gray = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3
  pixels[i] = gray // R
  pixels[i + 1] = gray // G
  pixels[i + 2] = gray // B
  // pixels[i + 3] 是 Alpha 通道
}

ctx.putImageData(imageData, 0, 0)

const audioContext = new AudioContext()
const bufferSize = 4096
const audioBuffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate)

// 获取音频数据（Float32Array）
const channelData = audioBuffer.getChannelData(0)

// 生成正弦波
for (let i = 0; i < bufferSize; i++) {
  channelData[i] = Math.sin((2 * Math.PI * 440 * i) / audioContext.sampleRate)
}

async function readBinaryFile(file) {
  const arrayBuffer = await file.arrayBuffer()
  const uint8Array = new Uint8Array(arrayBuffer)

  // 处理二进制数据
  // 例如：解析文件头、提取特定数据等
  const header = uint8Array.slice(0, 4)
  console.log("File header:", Array.from(header))

  return uint8Array
}

function parseNetworkPacket(buffer) {
  const view = new DataView(buffer)

  // 读取协议头（假设：前 4 字节是长度，接下来 2 字节是类型）
  const length = view.getUint32(0, true) // 小端字节序
  const type = view.getUint16(4, true)
  const payload = new Uint8Array(buffer, 6, length - 6)

  return { length, type, payload }
}

// 简单的数据编码示例
function encodeData(data) {
  const buffer = new ArrayBuffer(data.length * 4)
  const view = new DataView(buffer)

  data.forEach((value, index) => {
    view.setFloat32(index * 4, value, true) // 小端字节序
  })

  return new Uint8Array(buffer)
}

function decodeData(uint8Array) {
  const view = new DataView(uint8Array.buffer)
  const result = []

  for (let i = 0; i < uint8Array.length; i += 4) {
    result.push(view.getFloat32(i, true))
  }

  return result
}

// ❌ 浪费内存
const largeArray = new Int32Array(1000000) // 4MB

// ✅ 节省内存
const smallArray = new Int16Array(1000000) // 2MB（如果值在范围内）

// ❌ 性能差
function processData(data) {
  return new Float32Array(data).map((x) => x * 2)
}

// ✅ 性能好
const tempArray = new Float32Array(1000)
function processData(data, output = tempArray) {
  for (let i = 0; i < data.length; i++) {
    output[i] = data[i] * 2
  }
  return output
}

const buffer = new ArrayBuffer(16)

// 共享同一块内存
const int8View = new Int8Array(buffer)
const int16View = new Int16Array(buffer)

int8View[0] = 1
console.log(int16View[0]) // 值会反映在共享视图中

// ❌ 逐个赋值
for (let i = 0; i < source.length; i++) {
  target[i] = source[i]
}

// ✅ 批量复制
target.set(source)

const arr = new Int32Array(5)
// arr.push(6) // ❌ TypeError
// arr.length = 10 // ❌ 无效，长度不会改变

// ✅ 需要创建新数组
const newArr = new Int32Array([...arr, 6])

const uint8 = new Uint8Array([255])
uint8[0] += 1
console.log(uint8[0]) // 0，不是 256

// ✅ 检查溢出
if (uint8[0] < 255) {
  uint8[0] += 1
}

// ❌ 可能在不同系统间出错
const view = new DataView(buffer)
const value = view.getInt32(0) // 默认大端字节序

// ✅ 明确指定字节序
const value = view.getInt32(0, true) // 小端字节序

const int8 = new Int8Array([1, 2, 3])
int8[0] = 1.7 // 转换为 1
int8[0] = "2" // 转换为 2
int8[0] = NaN // 转换为 0
int8[0] = Infinity // 转换为 0 或 -1（取决于类型）

// ✅ 显式转换
int8[0] = Math.floor(1.7)

const buffer = new ArrayBuffer(4)
const view1 = new Int32Array(buffer)
const view2 = new Int32Array(buffer)

view1[0] = 42
console.log(view2[0]) // 42，共享同一块内存

// ✅ 需要独立数据时创建新缓冲
const view3 = new Int32Array(buffer.slice()) // 复制缓冲

const typedArray = new Int32Array([1, 2, 3])
const normalArray = Array.from(typedArray) // 或 [...typedArray]

// ✅ 尽量保持为定型数组进行操作
const doubled = typedArray.map((x) => x * 2) // 返回新的定型数组