js工具库Lodash的使用

目录

Lodash是什么：

 Lodash的主要功能：

数组操作（Array）

集合操作（Collection）

函数操作（Function）

对象操作（Object）

实用工具（Util）

字符串操作（String）

数学计算（Math）

序列操作（Seq）

 Lodash的安装与使用：

npm安装：

项目中引入（二选一）：

使用示例：

数组操作（Array）

集合操作（Collection）

函数操作（Function）

对象操作（Object）

实用工具（Util）

字符串操作（String）

数学计算（Math）

序列操作（Seq）

日期处理

Lodash是什么：

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

• 遍历 array、object 和 string
• 对值进行操作和检测
• 创建符合功能的函数

 Lodash的主要功能（用法请看使用示例）：

数组操作（Array）

集合操作（Collection）

函数操作（Function）

对象操作（Object）

实用工具（Util）

字符串操作（String）

数学计算（Math）

序列操作（Seq）

 Lodash的安装与使用：

npm安装：

$ npm i --save lodash

项目中引入（二选一）：

const _ = require('lodash');

import _ from 'lodash';

使用示例：

数组操作（Array）

// 分块
_.chunk(['a', 'b', 'c', 'd'], 2); // => [['a','b'], ['c','d']]

// 去假值
_.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3]

// 深度扁平化
_.flattenDeep([1, [2, [3, [4]], 5]); // => [1, 2, 3, 4, 5]

// 差集
_.difference([2, 1], [2, 3]); // => [1]

// 去重
_.uniq([2, 1, 2]); // => [2, 1]

// 交集
_.intersection([2, 1], [2, 3]); // => [2]

集合操作（Collection）

const users = [
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 }
];

// 分组
_.groupBy(users, 'age'); // => { '36': [barney对象], '40': [fred对象] }

// 键值映射
_.keyBy(users, 'user'); // => { 'barney': barney对象, 'fred': fred对象 }

// 条件统计
_.countBy(users, user => user.age > 36); // => { 'false': 1, 'true': 1 }

// 多条件排序
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);

// 随机取样
_.sample([1, 2, 3, 4]); // => 随机一个元素

函数操作（Function）

// 防抖（停止操作500ms后执行）
const debounced = _.debounce(() => console.log('Resized!'), 500);
window.addEventListener('resize', debounced);

// 节流（每100ms最多执行一次）
const throttled = _.throttle(() => console.log('Scrolling!'), 100);
window.addEventListener('scroll', throttled);

// 单次执行
const init = _.once(() => console.log('Initialized!'));
init(); // => 'Initialized!'
init(); // 无效果

// 柯里化
const add = (a, b) => a + b;
const curried = _.curry(add);
curried(1)(2); // => 3

对象操作（Object）

const obj = { 'a': 1, 'b': 2 };
const nested = { 'a': { 'b': { 'c': 3 } } };

// 安全取值
_.get(nested, 'a.b.c'); // => 3
_.get(nested, 'a.b.d', 'default'); // => 'default'

// 排除属性
_.omit(obj, ['a']); // => { 'b': 2 }

// 选择属性
_.pick(obj, ['b']); // => { 'b': 2 }

// 深度合并
_.merge({ 'a': 1 }, { 'b': 2 }); // => { 'a': 1, 'b': 2 }

// 深度克隆
const cloned = _.cloneDeep(nested);

实用工具（Util）

// 类型检查
_.isArray([1, 2, 3]); // => true
_.isObject({}); // => true
_.isEmpty(null); // => true

// 范围生成
_.range(4); // => [0, 1, 2, 3]

// 唯一ID
_.uniqueId('contact_'); // => 'contact_1'

// 深度比较
_.isEqual({ 'a': 1 }, { 'a': 1 }); // => true

// 执行多次
_.times(3, () => console.log('Hello')); // 打印3次Hello

字符串操作（String）

// 驼峰转换
_.camelCase('Foo Bar'); // => 'fooBar'

// 短横线命名
_.kebabCase('fooBar'); // => 'foo-bar'

// 截断文本
_.truncate('hi-diddly-ho there', { 'length': 14 }); // => 'hi-diddly-ho...'

// 填充字符
_.pad('abc', 8, '_-'); // => '_-abc_-_'

// 首字母大写
_.capitalize('FRED'); // => 'Fred'

数学计算（Math）

// 数组求和
_.sum([4, 2, 8, 6]); // => 20

// 最大值
_.max([4, 2, 8, 6]); // => 8

// 平均值
_.mean([4, 2, 8, 6]); // => 5

// 向上取整
_.ceil(4.006); // => 5

// 随机数
_.random(5, 10); // => 5到10之间的整数

序列操作（Seq）

// 链式调用
const result = _.chain([1, 2, 3])
  .map(n => n * 2)
  .filter(n => n > 2)
  .value(); // => [4,6]

// 链式中间操作
_.chain([1, 2, 3])
  .tap(array => array.pop())
  .value(); // => [1,2]

日期处理

// 日期比较（需安装lodash-date）
_.date.compare(new Date(2023, 0, 1), new Date(2023, 0, 2), 'day'); // => -1

总结：

虽然现代JavaScript引入了许多新特性，但Lodash仍然具有不可替代的优势：

1. 稳定性与可靠性：超过10年的开发迭代，处理了各种边界情况

2. 性能优化：针对大型数据集的操作进行了深度优化

3. 丰富功能：提供精心设计的实用函数

4. 一致性API：所有函数保持一致的参数结构和命名规范

无论是处理复杂的数据转换、优化应用性能，还是简化日常开发任务，Lodash都能提供优雅而高效的解决方案。