扁平化中文网站模板下载保定中企动力怎么样

扁平化中文网站模板下载,保定中企动力怎么样,网站小程序,怎样注册网站中文域名TypedArray 详解一、什么是 TypedArrayTypedArray 是 JavaScript 中处理二进制数据的对象#xff0c;它提供了类似数组的视图来访问原始二进制缓冲区中的数据。核心特点#xff1a;类型化#xff1a;每个元素都有固定的数据类型#xff08;如 Int8、Uint32、Float64 等它提供了类似数组的视图来访问原始二进制缓冲区中的数据。核心特点类型化每个元素都有固定的数据类型如 Int8、Uint32、Float64 等高性能直接操作内存避免了 JavaScript 对象的开销固定长度创建后长度不可变内存高效数据在内存中连续存储二、TypedArray 类型类型字节长度数值范围描述Int8Array1-128 ~ 1278位有符号整数Uint8Array10 ~ 2558位无符号整数Uint8ClampedArray10 ~ 2558位无符号整数限制范围Int16Array2-32768 ~ 3276716位有符号整数Uint16Array20 ~ 6553516位无符号整数Int32Array4-2³¹ ~ 2³¹-132位有符号整数Uint32Array40 ~ 2³²-132位无符号整数Float32Array4±1.2×10⁻³⁸ ~ ±3.4×10³⁸32位浮点数Float64Array8±5.0×10⁻³²⁴ ~ ±1.8×10³⁰⁸64位浮点数BigInt64Array8-2⁶³ ~ 2⁶³-164位有符号大整数BigUint64Array80 ~ 2⁶⁴-164位无符号大整数三、基本使用1.创建 TypedArrayjavascript复制下载// 方式1指定长度元素个数 const int8 new Int8Array(10); // 10个8位整数 const float32 new Float32Array(100); // 100个32位浮点数 // 方式2从普通数组创建 const arr [1, 2, 3, 4, 5]; const int16 new Int16Array(arr); // [1, 2, 3, 4, 5] // 方式3从 ArrayBuffer 创建 const buffer new ArrayBuffer(16); // 16字节的缓冲区 const int32 new Int32Array(buffer); // 4个32位整数4×416字节 const uint8 new Uint8Array(buffer); // 16个8位整数 // 方式4从其他 TypedArray 创建 const source new Float64Array([1.1, 2.2, 3.3]); const copy new Float32Array(source); // 类型转换2.基本操作javascriptconst float64 new Float64Array(5); // 赋值和访问 float64[0] 3.14; float64[1] 2.718; console.log(float64[0]); // 3.14 // 长度属性 console.log(float64.length); // 5元素个数 console.log(float64.byteLength); // 40字节数5×8字节 console.log(float64.BYTES_PER_ELEMENT); // 8每个元素的字节数 // 迭代 for (let value of float64) { console.log(value); } // 使用数组方法大部分Array方法可用 float64.fill(0); // 填充为0 const mapped float64.map(x x * 2); const sum float64.reduce((a, b) a b, 0);四、性能优势1.排序性能对比javascript// 准备测试数据 const size 1000000; const normalArray new Array(size).fill().map(() Math.random()); const typedArray new Float64Array(normalArray); // 测试原生数组排序 console.time(Array sort); const sortedNormal [...normalArray].sort((a, b) a - b); console.timeEnd(Array sort); // ~400-500ms // 测试 TypedArray 排序 console.time(TypedArray sort); const sortedTyped typedArray.slice().sort(); console.timeEnd(TypedArray sort); // ~50-80ms快5-10倍2.数值计算性能javascript// 矩阵乘法示例 function matrixMultiply(A, B, size) { const C new Float64Array(size * size); for (let i 0; i size; i) { for (let k 0; k size; k) { const aik A[i * size k]; for (let j 0; j size; j) { C[i * size j] aik * B[k * size j]; } } } return C; } // 使用 TypedArray 比普通数组快 2-3 倍五、实际应用场景1.WebGL / 图形处理javascript// 顶点缓冲区 const vertices new Float32Array([ // x, y, z -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 0.0, 1.0, 0.0 ]); // 颜色缓冲区 const colors new Uint8Array([ // r, g, b, a 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255 ]); // 传递给 WebGL gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);2.音频处理javascript// 音频缓冲区 const audioContext new AudioContext(); const sampleRate 44100; const duration 2; // 2秒 const frameCount sampleRate * duration; // 创建音频数据 const audioBuffer audioContext.createBuffer( 1, // 单声道 frameCount, sampleRate ); // 获取 TypedArray 进行数据处理 const channelData audioBuffer.getChannelData(0); // Float32Array // 生成正弦波 for (let i 0; i frameCount; i) { const time i / sampleRate; channelData[i] Math.sin(2 * Math.PI * 440 * time); // 440Hz A音 }3.图像处理javascript// 处理 Canvas 图像数据 const canvas document.getElementById(canvas); const ctx canvas.getContext(2d); const imageData ctx.getImageData(0, 0, canvas.width, canvas.height); // data 是 Uint8ClampedArray const data imageData.data; // RGBA 格式 // 灰度化处理 for (let i 0; i data.length; i 4) { const avg (data[i] data[i 1] data[i 2]) / 3; data[i] data[i 1] data[i 2] avg; } ctx.putImageData(imageData, 0, 0);4.网络通信 / 文件处理javascript// 从文件读取二进制数据 async function readFileAsTypedArray(file) { const arrayBuffer await file.arrayBuffer(); return new Uint8Array(arrayBuffer); } // WebSocket 二进制数据传输 const socket new WebSocket(ws://example.com); socket.binaryType arraybuffer; socket.onmessage function(event) { const data new Float32Array(event.data); // 处理二进制数据... };六、高级特性1.共享内存的 DataViewjavascriptconst buffer new ArrayBuffer(16); // 使用 DataView 读写不同字节序的数据 const view new DataView(buffer); // 以小端序写入32位整数 view.setInt32(0, 0x12345678, true); // true 表示小端序 // 以大端序读取 const value view.getInt32(0, false); // false 表示大端序2.多个视图共享同一缓冲区javascriptconst buffer new ArrayBuffer(16); // 创建不同视图操作同一内存 const int32View new Int32Array(buffer); const uint8View new Uint8Array(buffer); int32View[0] 0x12345678; console.log(uint8View[0].toString(16)); // 78小端序最低字节 console.log(uint8View[1].toString(16)); // 56 console.log(uint8View[2].toString(16)); // 34 console.log(uint8View[3].toString(16)); // 123.与 Web Workers 共享内存javascript// 主线程 const sharedBuffer new SharedArrayBuffer(1024 * 1024); // 1MB 共享内存 const sharedArray new Int32Array(sharedBuffer); // 传递给 Worker worker.postMessage({ buffer: sharedBuffer }); // Worker 线程中可以直接操作同一内存七、注意事项1.类型限制javascriptconst uint8 new Uint8Array([255]); uint8[0] 256; // 溢出实际存储 0 console.log(uint8[0]); // 0 // Uint8ClampedArray 会限制在 0-255 const clamped new Uint8ClampedArray([255]); clamped[0] 300; // 被限制为 255 console.log(clamped[0]); // 2552.长度不可变javascriptconst arr new Int32Array(3); arr.push(4); // ❌ 错误TypedArray 没有 push 方法 arr.length 5; // ❌ 无效长度不会改变 // 只能创建新的 const newArr new Int32Array([...arr, 4]);3.兼容性所有现代浏览器都支持Node.js 完全支持IE 10 部分支持八、总结TypedArray 的主要优势性能极高- 直接内存操作无 GC 压力内存高效- 紧凑存储无对象开销类型安全- 明确的数据类型硬件加速- 某些操作可使用 SIMD 指令适用场景大规模数值计算图形/音频处理网络协议解析文件格式处理需要高性能排序时不适用场景需要动态改变长度的数组混合类型数据存储简单的数据操作普通数组更简单