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

发布于：2025-07-30 ⋅ 阅读:(16) ⋅ 点赞:(0)

简介

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替代方案 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布