当前位置: 首页 > news >正文

Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案

简介

Radash 是一个现代化的 JavaScript 实用工具库,专为现代 JavaScript 开发而设计。它提供了一系列高性能、类型安全的实用函数,可以帮助开发者更高效地处理数组、对象、字符串、数字等常见数据操作。

特点

  • • 🚀 现代化设计:基于 ES6+ 语法,充分利用现代 JavaScript 特性
  • • 📦 轻量级:体积小,按需导入,减少打包体积
  • • 🔒 类型安全:完整的 TypeScript 支持
  • • ⚡ 高性能:优化的算法实现,性能优异
  • • 🌳 Tree-shaking 友好:支持按需导入,减少最终打包体积

安装

# npm
npm install radash# yarn
yarn add radash# pnpm
pnpm add radash

基本使用

// 全量导入
import * as _ from "radash";// 按需导入(推荐)
import { map, filter, reduce } from "radash";// CommonJS
const { map, filter, reduce } = require("radash");

核心功能模块

1. 数组操作 (Array)

map - 数组映射
import { map } from "radash";// 同步映射
const numbers = [1, 2, 3, 4, 5];
const doubled = await map(numbers, (x) => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
reduce - 数组归约
import { reduce } from "radash";const numbers = [1, 2, 3, 4, 5];
const sum = await reduce(numbers, (acc, num) => acc + num, 0);
console.log(sum); // 15
group - 数组分组
import { group } from "radash";const users = [{ name: "Alice", role: "admin" },{ name: "Bob", role: "user" },{ name: "Charlie", role: "admin" },
];const grouped = group(users, (user) => user.role);
console.log(grouped);
// {
//   admin: [{ name: 'Alice', role: 'admin' }, { name: 'Charlie', role: 'admin' }],
//   user: [{ name: 'Bob', role: 'user' }]
// }
unique - 数组去重
import { unique } from "radash";const numbers = [1, 2, 2, 3, 3, 4, 5];
const uniqueNumbers = unique(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]// 基于属性去重
const users = [{ id: 1, name: "Alice" },{ id: 2, name: "Bob" },{ id: 1, name: "Alice" },
];
const uniqueUsers = unique(users, (user) => user.id);
console.log(uniqueUsers); // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

2. 对象操作 (Object)

pick - 选择对象属性
import { pick } from "radash";const user = {id: 1,name: "Alice",email: "alice@example.com",password: "secret",role: "admin",
};const publicUser = pick(user, ["id", "name", "email"]);
console.log(publicUser);
// { id: 1, name: 'Alice', email: 'alice@example.com' }
omit - 排除对象属性
import { omit } from "radash";const user = {id: 1,name: "Alice",email: "alice@example.com",password: "secret",
};const safeUser = omit(user, ["password"]);
console.log(safeUser);
// { id: 1, name: 'Alice', email: 'alice@example.com' }
mapKeys - 映射对象键
import { mapKeys } from "radash";const data = {first_name: "Alice",last_name: "Smith",email_address: "alice@example.com",
};const camelCased = mapKeys(data, (key) =>key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
);
console.log(camelCased);
// { firstName: 'Alice', lastName: 'Smith', emailAddress: 'alice@example.com' }

3. 字符串操作 (String)

capitalize - 首字母大写
import { capitalize } from "radash";console.log(capitalize("hello world")); // 'Hello world'
console.log(capitalize("HELLO WORLD")); // 'Hello world'
camel - 转换为驼峰命名
import { camel } from "radash";console.log(camel("hello_world")); // 'helloWorld'
console.log(camel("hello-world")); // 'helloWorld'
console.log(camel("hello world")); // 'helloWorld'
snake - 转换为蛇形命名
import { snake } from "radash";console.log(snake("helloWorld")); // 'hello_world'
console.log(snake("HelloWorld")); // 'hello_world'
console.log(snake("hello-world")); // 'hello_world'

4. 数字操作 (Number)

random - 生成随机数
import { random } from "radash";console.log(random(1, 10)); // 1-10之间的随机整数
console.log(random(1, 10, true)); // 1-10之间的随机浮点数
round - 数字四舍五入
import { round } from "radash";console.log(round(3.14159, 2)); // 3.14
console.log(round(3.14159, 0)); // 3

5. 异步操作 (Async)

sleep - 延迟执行
import { sleep } from "radash";async function example() {console.log("开始");await sleep(1000); // 等待1秒console.log("结束");
}
retry - 重试机制
import { retry } from "radash";const fetchData = async () => {const response = await fetch("/api/data");if (!response.ok) throw new Error("请求失败");return response.json();
};// 在async函数中使用
async function getData() {// 最多重试3次,每次间隔1秒const data = await retry({ times: 3, delay: 1000 }, fetchData);return data;
}
parallel - 并行执行
import { parallel } from "radash";const tasks = [() => fetch("/api/users"),() => fetch("/api/posts"),() => fetch("/api/comments"),
];// 在async函数中使用
async function fetchAllData() {// 并行执行所有任务,最多同时执行2个const results = await parallel(2, tasks, async (task) => {const response = await task();return response.json();});return results;
}

6. 函数工具 (Function)

debounce - 防抖
import { debounce } from "radash";const handleSearch = debounce({ delay: 300 }, (query) => {console.log("搜索:", query);
});// 在300ms内多次调用只会执行最后一次
handleSearch("react");
handleSearch("radash"); // 只有这次会执行
throttle - 节流
import { throttle } from "radash";const handleScroll = throttle({ interval: 100 }, () => {console.log("滚动事件");
});window.addEventListener("scroll", handleScroll);

实际应用示例

数据处理示例

import { select, group, pick } from "radash";// 模拟API数据
const rawUsers = [{id: 1,name: "Alice",age: 25,role: "admin",active: true,email: "alice@example.com",},{id: 2,name: "Bob",age: 30,role: "user",active: false,email: "bob@example.com",},{id: 3,name: "Charlie",age: 35,role: "admin",active: true,email: "charlie@example.com",},
];// 数据处理流水线
const processUsers = (users) => {// 使用 select 同时过滤活跃用户并映射只保留需要的字段return select(users,(user) => pick(user, ["id", "name", "role"]), // 映射函数(user) => user.active // 过滤函数);
};const activeUsers = processUsers(rawUsers);
console.log(activeUsers);
// [
//   { id: 1, name: 'Alice', role: 'admin' },
//   { id: 3, name: 'Charlie', role: 'admin' }
// ]// 按角色分组
const usersByRole = group(activeUsers, (user) => user.role);
console.log(usersByRole);//   {
//     admin: [
//       { id: 1, name: 'Alice', role: 'admin' },
//       { id: 3, name: 'Charlie', role: 'admin' }
//     ]
//   }

表单验证示例

import { pick, shake, mapKeys, camel } from "radash";const validateAndTransformForm = (formData) => {// 转换字段名为驼峰命名const camelCased = mapKeys(formData, camel);// 移除空值字段const cleaned = shake(camelCased, (value) => !value || value.trim() === "");// 只保留允许的字段const allowed = pick(cleaned, ["firstName", "lastName", "email", "phone"]);return allowed;
};const formData = {first_name: "Alice",last_name: "Smith",email: "alice@example.com",phone: "",password: "secret123",
};const result = validateAndTransformForm(formData);
console.log(result);
// { firstName: 'Alice', lastName: 'Smith', email: 'alice@example.com' }

性能优化建议

  1. 1. 按需导入:只导入需要的函数,减少打包体积
  2. 2. 合理使用异步函数:利用 parallel 和 map 的异步特性提高性能
  3. 3. 善用缓存:结合 memo 函数缓存计算结果
  4. 4. 防抖节流:在事件处理中合理使用 debounce 和 throttle

总结

Radash 是一个功能强大且现代化的 JavaScript 实用工具库,它提供了丰富的函数来简化日常开发工作。相比传统的工具库,Radash 更加注重性能、类型安全和现代化的开发体验。

通过合理使用 Radash 的各种工具函数,可以让代码更加简洁、可读和高效。建议在项目中按需导入所需的函数,充分利用其 Tree-shaking 特性来优化最终的打包体积。

Radash.js 现代化JavaScript实用工具库详解 - 轻量级Lodash替代方案 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

http://www.lryc.cn/news/603254.html

相关文章:

  • python优秀案例:基于机器学习算法的景区旅游评论数据分析与可视化系统,技术使用django+lstm算法+朴素贝叶斯算法+echarts可视化
  • 机器学习、深度学习与数据挖掘:三大技术领域的深度解析
  • uipath数据写入excel的坑
  • perf工具在arm上的安装记录
  • 机器学习、深度学习与数据挖掘:核心技术差异、应用场景与工程实践指南
  • p5.js 从零开始创建 3D 模型,createModel入门指南
  • 新升级超值型系列32位单片机MM32G0005
  • p5.js 三角形triangle的用法
  • 逻辑回归算法
  • [源力觉醒 创作者计划]_文心大模型4.5开源:从技术突破到生态共建的国产AI解读与本地部署指南
  • 单片机学习笔记.PWM
  • hive专题面试总结
  • 墨者:SQL过滤字符后手工注入漏洞测试(第1题)
  • 2.oracle保姆级安装教程
  • Linux重定向的理解
  • 05动手学深度学习(下)
  • Docker镜像仓库Harbor安装
  • 【C++算法】81.BFS解决FloodFill算法_岛屿的最大面积
  • [极客大挑战 2019]FinalSQL
  • VitePress学习-自定义主题
  • 深度学习篇---百度AI Studio模型
  • Luogu P2577 午餐(ZJOI2004)
  • rtp、rtcp、rtsp、rtmp协议详解
  • 【网络工程师软考版】网络安全
  • ArkTS懒加载LazyForEach的基本使用
  • CNN卷积神经网络之模型评估指标(二)
  • 嵌入式系统分层开发:架构模式与工程实践(一)
  • HammerDB:一款免费开源的数据库基准测试工具
  • 【学习笔记】Lean4 定理证明 ing
  • C++ 模板类型 <T>,对函数参数传递兼容性检查