es-toolkit 的 isTypedArray 兼容函数:一行代码识别全部 TypedArray 类型
es-toolkit 的 isTypedArray 兼容函数一行代码识别全部 TypedArray 类型【免费下载链接】es-toolkitA modern JavaScript utility library thats 2-3 times faster and up to 97% smaller, a major upgrade to lodash.项目地址: https://gitcode.com/GitHub_Trending/es/es-toolkit本文围绕 es-toolkit 在 Lodash 兼容层es-toolkit/compat中提供的isTypedArray函数展开讲解其 API 用法、底层实现原理ArrayBuffer.isView与instanceof DataView的组合判断、与普通数组 /ArrayBuffer/DataView等易混淆对象的区分方法以及处理二进制数据时的实战用法。读完本文你将掌握如何在项目里可靠地判断任意值是否为 TypedArray并理解为什么官方文档建议在纯现代环境下直接用原生 API 替代。什么是 TypedArray为什么要单独判断TypedArray类型化数组是 JavaScript 中专门用于处理二进制数据的一类视图对象例如Uint8Array、Int16Array、Float32Array、BigInt64Array等。它们与普通数组Array.isArray返回true的数组在底层存储、方法集合和行为上都有显著差异因此在处理文件、网络协议、图像像素、WebAssembly 内存等二进制数据时代码经常需要区分这到底是不是一个 TypedArray。es-toolkit 在 compat 兼容层 中导出了isTypedArray并在 核心 predicate 实现 中提供了类型安全的判断逻辑。它同时被核心库与兼容层复用也与 lodash 的isTypedArray语义保持一致。安装与导入es-toolkit 的兼容层函数统一从es-toolkit/compat子路径导入import { isTypedArray } from es-toolkit/compat;如果你只需要核心库非 lodash 兼容语义也可以从主入口使用同名的isTypedArrayimport { isTypedArray } from es-toolkit;两条路径指向同一套判断逻辑compat 层的实现src/compat/predicate/isTypedArray.ts只是对核心实现的一层薄包装最终调用的是 src/predicate/isTypedArray.ts。API 签名与返回值const result isTypedArray(x);参数xany要检查是否为 TypedArray 的值。核心实现的实际签名是x: unknown兼容层为了与 lodash 的宽泛入参习惯保持一致而声明为any。返回值boolean如果值是 TypedArray 则返回true否则返回false。值得强调的是核心实现的返回类型是一个类型谓词type predicate会一次性枚举全部 11 种 TypedArray 类型// src/predicate/isTypedArray.ts 中的返回类型 // x is Uint8Array | Uint8ClampedArray | Uint16Array | Uint32Array // | BigUint64Array | Int8Array | Int16Array | Int32Array // | BigInt64Array | Float32Array | Float64Array这意味着在 TypeScript 中经过if (isTypedArray(data))分支后data会被自动收窄为具体的 TypedArray 联合类型可以直接访问.length、.byteLength等属性而无需手动断言。底层实现原理整个判断的核心只有一行代码src/predicate/isTypedArray.tsreturn ArrayBuffer.isView(x) !(x instanceof DataView);这一行由两个条件组成缺一不可ArrayBuffer.isView(x)这是原生静态方法只有当参数是某个ArrayBuffer的视图对象TypedArray 或DataView时才返回true。它天然排除了普通数组、字符串、对象、Map、Set、Symbol以及ArrayBuffer本体。!(x instanceof DataView)DataView同样满足ArrayBuffer.isView但它不是 TypedArray。必须显式排除才能保证isTypedArray(new DataView(buffer))返回false。从实现可以看出es-toolkit 没有逐个instanceof比对 11 种构造函数而是利用原生 API 的语义一次判断既简洁又高效且对跨 iframe / 跨 realm 场景同样稳健不依赖某个特定全局对象的构造函数。覆盖全部 11 种 TypedArrayisTypedArray能识别标准中定义的全部 TypedArray 类型按类别划分如下import { isTypedArray } from es-toolkit/compat; // 整数 TypedArray isTypedArray(new Int8Array()); // true isTypedArray(new Int16Array()); // true isTypedArray(new Int32Array()); // true isTypedArray(new Uint8Array()); // true isTypedArray(new Uint16Array()); // true isTypedArray(new Uint32Array()); // true isTypedArray(new Uint8ClampedArray()); // true // 浮点 TypedArray isTypedArray(new Float32Array()); // true isTypedArray(new Float64Array()); // true // BigInt TypedArray isTypedArray(new BigInt64Array()); // true isTypedArray(new BigUint64Array()); // true带初始数据的场景同样成立isTypedArray(new Uint8Array([1, 2, 3])); // true isTypedArray(new Int16Array([1, 2, 3])); // true isTypedArray(new Float32Array([1.1, 2.2])); // true isTypedArray(new BigInt64Array([1n, 2n])); // true与相似对象的区分TypedArray 最容易被三类对象混淆普通数组、ArrayBuffer底层缓冲区本身和DataView另一种视图。isTypedArray对它们的判断结果如下import { isTypedArray } from es-toolkit/compat; const buffer new ArrayBuffer(16); const view new DataView(buffer); const typedArray new Uint8Array(buffer); const regularArray [1, 2, 3, 4]; isTypedArray(buffer); // falseArrayBuffer 不是视图 isTypedArray(view); // falseDataView 是视图但不是 TypedArray isTypedArray(typedArray); // trueUint8Array 是 TypedArray isTypedArray(regularArray); // false普通数组此外字符串、对象、null、undefined等也都返回falseisTypedArray(array); // false isTypedArray({}); // false isTypedArray(null); // false isTypedArray(undefined); // false实战场景二进制数据的分流处理当函数接收的入参可能是多种数据结构时isTypedArray的类型谓词能力可以配合Array.isArray做清晰的分流。官方文档给出了一个典型示例import { isTypedArray } from es-toolkit/compat; function processData(data: unknown) { if (isTypedArray(data)) { // 进入此分支后data 已被 TypeScript 收窄为 TypedArray 联合类型 console.log(TypedArray length: ${data.length}); console.log(Byte length: ${data.byteLength}); console.log(Byte offset: ${data.byteOffset}); console.log(Constructor: ${data.constructor.name}); // 输出第一个值 if (data.length 0) { console.log(First value: ${data[0]}); } } else if (Array.isArray(data)) { console.log(Regular array); } else { console.log(Not an array); } } processData(new Uint8Array([1, 2, 3])); // 输出 TypedArray 信息 processData([1, 2, 3]); // Regular array processData(not an array); // Not an array注意byteLength、byteOffset等属性是 TypedArray 特有的普通数组没有正因为isTypedArray返回类型谓词上述代码才能在不写任何as断言的情况下直接访问这些属性。此类场景常见于解码二进制协议、读取文件缓冲区、解析图像像素数据等需要区分字节视图与普通数组的代码路径。官方建议现代环境下优先用原生 API文档开头明确给出了一条警告isTypedArray本质是一次简单的类型检查如果运行环境足够现代建议直接用ArrayBuffer.isView()或instanceof运算符替代// 方案一仅判断是不是 ArrayBuffer 的视图 ArrayBuffer.isView(value); // 方案二精确判断某一种具体类型 value instanceof Int8Array;需要留意两者的差异ArrayBuffer.isView(value)会把DataView也算作视图返回true因此它不等于isTypedArrayvalue instanceof Int8Array只能判断单一类型无法一次覆盖全部 11 种 TypedArray。也就是说es-toolkit 的isTypedArray的价值在于在不依赖逐个构造函数比对的前提下一次完成是视图且非 DataView的完整判断并借助类型谓词提供编译期收窄。而文档的警告则提醒使用者如果只是想判断是不是二进制视图直接用ArrayBuffer.isView()反而更简单如果明确知道目标类型instanceof也足够。isTypedArray最适合的场景是既要全面覆盖所有 TypedArray又不想要 DataView且需要类型收窄的中间地带以及需要与 lodash 保持兼容的存量代码。测试如何验证这些行为仓库用两套测试覆盖了上述全部行为核心库测试src/predicate/isTypedArray.spec.ts对 11 种 TypedArray每种都基于new ArrayBuffer(8)构造逐一断言返回true对数字、Map、Set、空字符串、Symbol、普通数组、false等断言返回false。兼容层测试src/compat/predicate/isTypedArray.spec.ts移植自 lodash 官方的isTypedArray测试使用 _internal/typedArrays.ts 中列出的 9 种构造函数Float32Array、Float64Array、Int8Array、Int16Array、Int32Array、Uint8Array、Uint8ClampedArray、Uint16Array、Uint32Array做批量断言并针对arguments对象、普通数组、Date、Error、函数、对象、数字、正则、字符串、Symbol等非 TypedArray 值逐一验证返回false同时覆盖了不传参数undefined的情况。小结isTypedArray是 es-toolkit compat 层中一个小而精的类型判断函数用法简单isTypedArray(x)返回布尔值参数可为任意值实现可靠底层由ArrayBuffer.isView(x) !(x instanceof DataView)组成一行代码覆盖全部 11 种 TypedArray并排除DataView与普通数组等易混淆对象类型友好返回类型谓词在 TypeScript 中可直接触发类型收窄取舍明确纯现代环境可优先使用ArrayBuffer.isView()或instanceof需要完整 TypedArray 语义与 lodash 兼容性时则使用本函数。如需查看更多相关实现可继续阅读 核心实现、compat 包装层 及其对应的两份测试文件。【免费下载链接】es-toolkitA modern JavaScript utility library thats 2-3 times faster and up to 97% smaller, a major upgrade to lodash.项目地址: https://gitcode.com/GitHub_Trending/es/es-toolkit创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
上一篇/下一篇内容由系统自动关联
返回资讯列表 →