工具库

JavaScript工具库是为了提高开发效率而封装的一系列实用函数和方法集合，它们可以帮助开发者快速实现各种功能，避免重复造轮子。

1. Lodash

Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。

安装

bash 
npm install lodash

核心功能

数组操作

javascript 
const _ = require('lodash');

// 数组去重
const array = [1, 2, 3, 2, 1];
const uniqueArray = _.uniq(array);
console.log(uniqueArray); // [1, 2, 3]

// 数组切片
const sliceArray = _.slice(array, 0, 2);
console.log(sliceArray); // [1, 2]

// 数组扁平化
const nestedArray = [1, [2, [3, [4]]]];
const flattenedArray = _.flattenDeep(nestedArray);
console.log(flattenedArray); // [1, 2, 3, 4]

对象操作

javascript 
// 合并对象
const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };
const mergedObject = _.merge(object1, object2);
console.log(mergedObject); // { a: 1, b: 3, c: 4 }

// 提取对象属性
const user = { name: 'Alice', age: 25, email: 'alice@example.com' };
const userInfo = _.pick(user, ['name', 'age']);
console.log(userInfo); // { name: 'Alice', age: 25 }

// 检查对象是否为空
const emptyObject = {};
console.log(_.isEmpty(emptyObject)); // true

函数操作

javascript 
// 防抖函数
const debouncedFunction = _.debounce(() => {
  console.log('Debounced function called');
}, 1000);

// 节流函数
const throttledFunction = _.throttle(() => {
  console.log('Throttled function called');
}, 1000);

// 柯里化函数
const add = (a, b) => a + b;
const curriedAdd = _.curry(add);
console.log(curriedAdd(1)(2)); // 3

2. Axios

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。

安装

bash 
npm install axios

核心功能

基本请求

javascript 
const axios = require('axios');

// GET请求
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// POST请求
axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

请求配置

javascript 
// 自定义请求配置
axios({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/posts',
  params: {
    _limit: 5
  },
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

创建实例

javascript 
// 创建axios实例
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: {
    'X-Custom-Header': 'foobar'
  }
});

// 使用实例
instance.get('/posts/1')
  .then(response => {
    console.log(response.data);
  });

拦截器

javascript 
// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    console.log('Request sending:', config);
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    console.log('Response received:', response);
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

3. Moment.js

Moment.js是一个用于解析、验证、操作和显示日期和时间的JavaScript库。

安装

bash 
npm install moment

核心功能

javascript 
const moment = require('moment');

// 当前时间
const now = moment();
console.log(now.format()); // 2026-02-08T10:30:00+08:00

// 格式化日期
console.log(now.format('YYYY-MM-DD')); // 2026-02-08
console.log(now.format('HH:mm:ss')); // 10:30:00
console.log(now.format('YYYY年MM月DD日 HH时mm分ss秒')); // 2026年02月08日 10时30分00秒

// 日期解析
const date = moment('2026-02-08');
console.log(date.isValid()); // true

// 日期操作
const tomorrow = moment().add(1, 'days');
console.log(tomorrow.format('YYYY-MM-DD'));

const lastWeek = moment().subtract(1, 'weeks');
console.log(lastWeek.format('YYYY-MM-DD'));

// 日期比较
const date1 = moment('2026-02-08');
const date2 = moment('2026-02-09');

console.log(date1.isBefore(date2)); // true
console.log(date1.isAfter(date2)); // false
console.log(date1.diff(date2, 'days')); // -1

4. Day.js

Day.js是一个轻量级的日期时间处理库，API设计与Moment.js兼容。

安装

bash 
npm install dayjs

核心功能

javascript 
const dayjs = require('dayjs');

// 当前时间
const now = dayjs();
console.log(now.format()); // 2026-02-08T10:30:00+08:00

// 格式化日期
console.log(now.format('YYYY-MM-DD')); // 2026-02-08
console.log(now.format('HH:mm:ss')); // 10:30:00

// 日期解析
const date = dayjs('2026-02-08');
console.log(date.isValid()); // true

// 日期操作
const tomorrow = dayjs().add(1, 'day');
console.log(tomorrow.format('YYYY-MM-DD'));

const lastWeek = dayjs().subtract(1, 'week');
console.log(lastWeek.format('YYYY-MM-DD'));

// 日期比较
const date1 = dayjs('2026-02-08');
const date2 = dayjs('2026-02-09');

console.log(date1.isBefore(date2)); // true
console.log(date1.isAfter(date2)); // false
console.log(date1.diff(date2, 'day')); // -1

5. Chart.js

Chart.js是一个用于创建交互式图表的JavaScript库。

安装

bash 
npm install chart.js

核心功能

html 
<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

6. Ramda

Ramda是一个实用的函数式编程库，提供了许多纯函数。

安装

bash 
npm install ramda

核心功能

javascript 
const R = require('ramda');

// 函数组合
const add1 = x => x + 1;
const multiply2 = x => x * 2;
const add1ThenMultiply2 = R.compose(multiply2, add1);
console.log(add1ThenMultiply2(3)); // 8

// 函数柯里化
const add = R.curry((a, b) => a + b);
const add1 = add(1);
console.log(add1(2)); // 3

// 数据优先
const array = [1, 2, 3, 4, 5];
const double = R.map(x => x * 2, array);
console.log(double); // [2, 4, 6, 8, 10]

const even = R.filter(x => x % 2 === 0, array);
console.log(even); // [2, 4]

const sum = R.reduce((acc, x) => acc + x, 0, array);
console.log(sum); // 15

最佳实践

  1. 按需引入：只引入需要的函数，减少打包体积
  2. 考虑替代方案：对于现代浏览器，某些功能可以使用原生方法实现
  3. 了解版本兼容性：使用时注意库的版本兼容性
  4. 避免过度依赖：不要过度依赖工具库，保持代码的可维护性
  5. 性能考虑：选择性能良好的工具库，特别是在大型应用中

学习资源

最后更新：2026-02-08