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. 按需导入:只导入需要的函数,减少打包体积
- 2. 合理使用异步函数:利用
parallel
和map
的异步特性提高性能 - 3. 善用缓存:结合
memo
函数缓存计算结果 - 4. 防抖节流:在事件处理中合理使用
debounce
和throttle
总结
Radash 是一个功能强大且现代化的 JavaScript 实用工具库,它提供了丰富的函数来简化日常开发工作。相比传统的工具库,Radash 更加注重性能、类型安全和现代化的开发体验。
通过合理使用 Radash 的各种工具函数,可以让代码更加简洁、可读和高效。建议在项目中按需导入所需的函数,充分利用其 Tree-shaking 特性来优化最终的打包体积。
Radash.js 现代化JavaScript实用工具库详解 - 轻量级Lodash替代方案 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享