JavaScript 生态系统中有丰富的工具库,合理使用可以提高开发效率。
| 类型 | 代表库 |
|---|---|
| 工具函数 | Lodash、Underscore |
| HTTP 请求 | Axios、Fetch、SuperAgent |
| 日期处理 | Day.js、date-fns、Moment.js |
| 表单验证 | Validator.js、Yup、Joi |
| 数据处理 | immutable.js、Immer |
| 动画 | GSAP、Framer Motion |
| 图表 | ECharts、Chart.js、D3 |
// ❌ 导入整个库
import _ from 'lodash';
// ✅ 按需导入
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';const obj = { a: { b: 1 } };
// Lodash
import cloneDeep from 'lodash/cloneDeep';
const newObj = cloneDeep(obj);
// 原生 JSON 方法(有局限性,会丢失函数、undefined、Date 等)
const jsonCopy = JSON.parse(JSON.stringify(obj));
// structuredClone(现代浏览器)
const structured = structuredClone(obj);import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
const debouncedFn = debounce(fn, 300);
const throttledFn = throttle(fn, 300);import isEqual from 'lodash/isEqual';
if (isEqual(obj1, obj2)) {
// 深度相等
}// Lodash
_.map(arr, fn);
_.filter(arr, fn);
_.find(arr, fn);
_.reduce(arr, fn, init);
// 原生
arr.map(fn);
arr.filter(fn);
arr.find(fn);
arr.reduce(fn, init);// Moment.js (体积大)
import moment from 'moment';
moment().format('YYYY-MM-DD');
// Day.js (轻量)
import dayjs from 'dayjs';
dayjs().format('YYYY-MM-DD');| 场景 | 推荐 | 原因 |
|---|---|---|
| 工具函数 | Lodash ES | 按需导入、功能完善 |
| 日期处理 | Day.js | 轻量、API 简洁 |
| HTTP 请求 | Axios | 功能丰富、拦截器 |
| 表单验证 | Yup | Schema 验证、TypeScript |
| 状态管理 | Immer | 不可变数据 |
💡 提示:优先使用原生 API,工具库只在必要时引入。