是时候抛弃 Lodash 了，试试当红炸子鸡 Radash 吧！！！

背景

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。很多前端开发人员基本上都会在项目种引入 Lodash 第三方库帮助处理业务数据。在过去的十多年里，Lodash 补齐了很多 JS 数据的原生方法，帮助开发人员更轻松的处理数据。通过 npm 网站可以看看 Lodash 的下载量

每周的下载量有四千多万，可以说是非常重要的前端开发依赖

但是，这么重要的前端开发依赖的上一次版本更新却在 8 年前，如图所示

当红炸子鸡

Radash 是一个全新JS工具库。基于 JS 最新的原生方法，提供性能更好的数据除非方法。同时提供类型支持和零依赖性

前端常用方法

Radash 虽然提供了很多方法，但是下列方法是经常会用到的

debounce

debounce 确保一个函数在一定时间内只被调用一次。主要用于输入框搜索、窗口调整大小、滚动事件处理和按钮点击等场景

来看 React 项目中输入框搜索的例子

import { debounce } from "radash";

const App = () => {
  const onTextChange = debounce(() => {
    // do something
  }, 500);

  return (
    <div>
      <input onChange={onTextChange} />
    </div>
  );
};

throttle

throttle 与 debounce 类似，它也用于限制函数调用的频率，但与 debounce 不同的是，throttle 会确保在一定时间段内函数被调用的频率不会超过某个设定的阈值。换句话说，它确保函数在一定时间段内最多被调用一次

throttle 常用于处理滚动事件处理、按钮点击、拖拽操作和定时任务等场景

import { throttle } from 'radash'

const onMouseMove = () => {
  rerender()
}

addEventListener('mousemove', throttle({ interval: 200 }, onMouseMove))

range

range 用于创建一个包含从 start 到 end，但不包含 end 本身范围数字的数组。笔者常用来渲染骨架屏

const App = () => {
  return (
    <div>
      {range(5).map((i) => (
        <Skeleton />
      ))}
    </div>
  );
};

try

radash 种专门提供try 方法，抽象了 try/catch 的逻辑分支，并提供错误优先回调提醒响应

const [err, response] = await _.try(api.gods.create)({ name: 'Ra' })
if (err) {
  throw new Error('Your god is weak and could not be created')
}

这种处理错误的方式挺像 golang 语言的

clone

创建给定对象/值的浅拷贝

import { clone } from 'radash'

const ra = {
  name: 'Ra',
  power: 100
}

const gods = [ra]

clone(ra) // => copy of ra
clone(gods) // => copy of gods

uid

uid 方法用于生成唯一标识符。所以你可以不用在项目中单独引入 nanoid 第三方依赖

import { uid } from 'radash'

uid(7) // => UaOKdlW
uid(20, '*') // => dyJdbC*NsEgcnGjTHS

pick

pick 用来从对象中选取所需的属性

import { pick } from 'radash'

const fish = {
  name: 'Bass',
  weight: 8,
  source: 'lake',
  barckish: false
}

pick(fish, ['name', 'source']) // => { name, source }

omit

与 pick 相反的方法是 omit，删除对象中不需要的属性

import { omit } from 'radash'

const fish = {
  name: 'Bass',
  weight: 8,
  source: 'lake',
  brackish: false
}

omit(fish, ['name', 'source']) // => { weight, brackish }

Radash 提供线上的 供开发人员测试所有的方法。点击链接打开Playground页面，在编辑器里输入内容，点击 run 按钮，即可得出结果

依赖大小对比

Lodash 的大小如下

Radash 的大小如下

通过对比可以看出，Radash 仅仅只是 Lodash 五分之一，如果 Radash 可以满足您的项目需求，还有什么理由要坚持使用 Lodash 呢？

总结

Radash 是一个全新 JS 工具库，大小只有 Lodash 的五分之一