Lodash JS工具库：前端开发必备的高效数据处理与性能优化指南

## 标准安装
npm install lodash --save

## 如需使用函数式编程模块
npm install lodash-fp --save

// 引入完整版本
const _ = require('lodash');

// 仅引入核心功能（约4KB gzipped）
const _ = require('lodash/core');

// 按需引入特定方法（最佳性能实践）
const { map, filter } = require('lodash');

// 函数式编程模块
const fp = require('lodash/fp');

<!-- 完整版 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<!-- 核心版（更小体积） -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.core.min.js"></script>

const users = [
  { id: 1, name: 'Alice', age: 28, active: true },
  { id: 2, name: 'Bob', age: 32, active: false },
  { id: 3, name: 'Charlie', age: 24, active: true }
];

// 筛选活跃用户并提取姓名
const activeUserNames = _.map(
  _.filter(users, { active: true }), 
  'name'
);
// 结果: ['Alice', 'Charlie']

// 按年龄分组用户
const usersByAge = _.groupBy(users, 'age');

// 安全访问深层数组并默认值
const firstUserName = _.get(users, '[0].name', 'Guest');

const user = {
  id: 1,
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'New York',
    zip: '10001'
  },
  hobbies: ['reading', 'coding', 'hiking']
};

// 安全获取深层属性
const userCity = _.get(user, 'address.city', 'Unknown');

// 合并对象（深层合并）
const updatedUser = _.merge({}, user, {
  address: { zip: '10002' },
  age: 29
});

// 提取对象属性子集
const userSummary = _.pick(user, ['id', 'name', 'address.city']);

const fp = require('lodash/fp');

// 函数组合
const getActiveUserNames = fp.pipe(
  fp.filter(fp.prop('active')),
  fp.map(fp.prop('name'))
);

const activeNames = getActiveUserNames(users);

// 自动柯里化
const multiply = fp.multiply;
const double = multiply(2);
const doubledNumbers = fp.map(double, [1, 2, 3, 4]); // [2, 4, 6, 8]

// 不可变数据处理
const updatedUser = fp.set('address.zip', '10002', user);

// 只引入需要的方法（推荐）
import map from 'lodash/map';
import filter from 'lodash/filter';

// 比引入整个库节省约80%的体积

// React组件中使用Lodash处理数据
function UserList({ users }) {
  // 按名称排序并筛选活跃用户
  const activeUsers = useMemo(() => 
    _.chain(users)
      .filter({ active: true })
      .sortBy('name')
      .value()
  , [users]);
  
  return (
    <ul>
      {_.map(activeUsers, user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// Express路由中使用Lodash处理请求数据
router.get('/api/users', async (req, res) => {
  try {
    const users = await User.find();
    // 格式化响应数据
    const response = _.map(users, user => 
      _.pick(user, ['id', 'name', 'email'])
    );
    res.json(response);
  } catch (err) {
    res.status(500).json({ error: _.get(err, 'message', 'Unknown error') });
  }
});

// 使用Lodash预处理图表数据
function prepareChartData(rawData) {
  return _.chain(rawData)
    .groupBy('category')
    .mapValues(group => _.sumBy(group, 'value'))
    .toPairs()
    .map(([name, value]) => ({ name, value }))
    .sortBy('value')
    .reverse()
    .value();
}