ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

es-toolkit/compat 的 reverse 函数:原地反转数组的 Lodash 兼容实现与原生方法取舍

es-toolkit/compat 的 reverse 函数:原地反转数组的 Lodash 兼容实现与原生方法取舍 es-toolkit/compat 的 reverse 函数原地反转数组的 Lodash 兼容实现与原生方法取舍【免费下载链接】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-toolkitreverse是 es-toolkit 的 Lodash 兼容模块es-toolkit/compat中用于原地反转数组元素的工具函数它会直接修改传入的数组把第一个元素变成最后一个、最后一个变成第一个并返回同一个数组对象。本文围绕官方参考文档 reverse 展开结合仓库中的 源码实现、测试用例 与 性能基准讲解其 API 形态、边界行为、与原生Array.prototype.reverse()的取舍以及函数式模块中不可变版本的区别帮助你在迁移 Lodash 代码时做出正确选择。为什么需要es-toolkit/compat中的 reversees-toolkit 在src/compat/目录下提供了一套与 Lodash 行为对齐的兼容实现统一通过es-toolkit/compat入口导出reverse便是其中之一见 compat.ts 导出。与 es-toolkit 主入口下的工具函数相比compat 模块的重点是行为等价让从 Lodash 迁移过来的代码无需修改调用方式即可工作。对于reverse而言Lodash 兼容的关键差异在于对null、undefined的容忍原生Array.prototype.reverse()对null/undefined会直接抛出TypeError而 compat 版会原样返回输入值。这正是官方文档在开头特别标注警告的原因——如果你不需要这种容错原生方法更快、更直观。基本用法与 API 签名从es-toolkit/compat导入后直接传入要反转的数组import { reverse } from es-toolkit/compat; const reversed reverse(array);参数与返回值项说明参数arrayT[] \| null \| undefined要反转的数组。若传入null或undefined则原样返回返回值T[] \| null \| undefined返回反转后的数组输入为null/undefined时返回对应值从源码看实现非常薄src/compat/array/reverse.tsexport function reverseT(array: T[] | null | undefined): T[] | null | undefined { if (array null) { return array; } return Array.prototype.reverse.call(array); }两个关键点使用 null同时捕获null与undefined直接原样返回通过Array.prototype.reverse.call(array)委托给原生反转逻辑因此性能与原生实现相当同时继承了原生方法的原地修改语义。完整的调用示例import { reverse } from es-toolkit/compat; // 反转数字数组 const numbers [1, 2, 3, 4, 5]; const reversed reverse(numbers); console.log(numbers); // [5, 4, 3, 2, 1] console.log(reversed); // [5, 4, 3, 2, 1] // 反转字符串数组 const words [apple, banana, cherry]; reverse(words); console.log(words); // [cherry, banana, apple] // 空数组或 null/undefined 原样返回 reverse([]); // [] reverse(null); // null reverse(undefined); // undefined原地修改语义返回的是同一个数组对象reverse直接修改原数组并返回被修改的同一数组引用而不是副本import { reverse } from es-toolkit/compat; const original [1, 2, 3]; const result reverse(original); console.log(original result); // true同一个数组对象 console.log(original); // [3, 2, 1]原数组已被修改这一点在 测试用例 中被显式验证expect(actual).toBe(array)确认返回的就是原数组引用expect(array).toEqual([3, 2, 1])确认原数组内容被就地改写。测试还覆盖了含重复元素的数组[1, 2, 2, 3]反转后为[3, 2, 2, 1]src/compat/array/reverse.spec.ts混合类型数组[1, two, 3, four]反转后为[four, 3, two, 1]src/compat/array/reverse.spec.ts单元素数组反转后仍为自身且引用不变空数组返回同一个空数组引用result.toBe(array)。兼容更广泛的类数组对象得益于委托给Array.prototype.reverse.call()该函数不仅支持真正的数组还支持具有数字索引与length属性的类数组对象包括函数内部的arguments对象const arrayLike { 0: a, 1: b, 2: c, length: 3 }; const result reverse(arrayLike); console.log(result arrayLike); // true console.log(result); // { 0: c, 1: b, 2: a, length: 3 }对应测试见 src/compat/array/reverse.spec.ts。由于原数组被修改若你需要保留原始顺序务必在调用前自行复制例如reverse([...array])或reverse(array.slice())。类型层面只读数组与类型重载源码为reverse提供了两个函数重载src/compat/array/reverse.tsexport function reverseL extends MutableListany(array: RejectReadonlyL): L; export function reverseT(array: T[] | null | undefined): T[] | null | undefined;第一个重载通过MutableList接口src/compat/_internal/MutableList.d.ts即{ length: number; [k: number]: T }形态与RejectReadonly工具类型在编译期拒绝readonly数组因为函数会原地修改数组传入只读数组在类型上是不安全的。这也提醒使用者reverse的入参应当是可变的数组或类数组对象。与原生Array.prototype.reverse()的取舍官方文档明确建议如果只是反转普通数组优先使用原生Array.prototype.reverse()。它更直观、更快且没有额外的null/undefined分支判断。原生方法的局限在于对null/undefined调用会抛出TypeError没有容错直接对数组调用即可无需经过函数封装。因此适用场景可以这样划分场景推荐反转普通数组、不需要容错原生Array.prototype.reverse()迁移 Lodash 代码入参可能为null/undefined且要求行为一致es-toolkit/compat的reverse在性能上compat 版只是对原生Array.prototype.reverse的一层薄封装Array.prototype.reverse.call(array)没有额外遍历或复制开销。仓库中的 性能基准 也以 1000 元素数组在 es-toolkit compat 与 lodash 之间进行对比用于持续监测兼容实现的性能表现。延伸fp 模块中的不可变 reverse如果你的场景是函数式管道且不希望修改原数组可以参考 es-toolkit 的 fp 模块。es-toolkit/fp导出的 reverse 是一个柯里化工厂函数返回的映射函数不会修改输入数组而是基于slice().reverse()返回反转副本import { pipe, reverse } from es-toolkit/fp; pipe([1, 2, 3], reverse()); // [3, 2, 1]原数组不变这与 compat 版的原地修改语义形成鲜明对照需要副作用式原地反转时用 compat 版需要纯函数式不可变反转时用 fp 版。小结es-toolkit/compat的reverse是一个为 Lodash 兼容而生的轻量工具它以内置的原生Array.prototype.reverse为底层实现补齐了null/undefined容错保持原地修改并返回同一引用的语义同时通过类型重载在编译期约束可变数组。对绝大多数普通反转需求官方建议直接使用原生方法而在 Lodash 迁移场景中需要行为等价时reverse可以无缝替换_.reverse配合 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),仅供参考
返回列表