阅读量:6
目录
7. 实例：使用 Lodash 对数组进行求和、过滤偶数、排序，以及对对象进行获取键值、深拷贝等操作。
一、Lodash介绍
1.Lodash的概念
Lodash 是一个现代化的 JavaScript 实用工具库，提供了大量的实用函数，旨在简化 JavaScript 编程的复杂性。它由 John-David Dalton 创建，并且广受 JavaScript 社区的欢迎和认可。
2.Lodash的特点
- 高性能： Lodash 专注于提供高性能的函数，它们经过优化以在各种 JavaScript 运行环境中提供最佳性能。
- 模块化： Lodash 提供了模块化的架构，可以按需导入需要的函数，从而减小项目的体积。
- 广泛的功能： Lodash 提供了丰富的功能集，涵盖了数组、对象、函数、集合、字符串、日期等多个方面，可以满足各种编程需求。
- 跨浏览器兼容性： Lodash 在各种现代浏览器和 Node.js 等 JavaScript 运行环境中都能正常工作，并提供了对 ES6+ 特性的良好支持。
- 易于学习和使用： Lodash 的 API 设计简洁清晰，易于学习和记忆，可以大大提高 JavaScript 编程的效率。
3.Lodash的主要功能
- 数组操作： 包括对数组进行迭代、过滤、映射、排序、查找等操作。
- 对象操作： 包括对对象进行遍历、获取键值对、合并、深拷贝等操作。
- 函数操作： 包括创建柯里化函数、部分应用函数、防抖节流等高级函数操作。
- 集合操作： 包括对集合进行过滤、排序、查找等操作。
- 字符串操作： 包括对字符串进行格式化、截取、转换大小写等操作。
- 日期操作： 包括日期格式化、计算日期间隔、日期比较等操作。
二、Lodash的使用与实例
安装 Lodash
你可以通过 npm 或者 yarn 来安装 Lodash：
npm install lodash # 或者 yarn add lodash也可以通过本地lodash库Lodash 简介 | Lodash中文文档 | Lodash中文网 查看官方文档
导入 Lodash
在你的 JavaScript 代码中导入 Lodash：
const _ = require('lodash');使用 Lodash
Lodash 提供了丰富的工具函数，涵盖了数组、对象、函数、集合等多个方面。以下是一些常用的示例：
初体验
// 1.打印一下 console.log("%O",_) console.log(_.VERSION) //查看lodash的版本号 console.log(_.join([2023,11,13],'-'))1. 数组操作
const array = [1, 2, 3, 4, 5]; // 获取数组的第一个元素 const firstElement = _.head(array); // 获取数组的最后一个元素 const lastElement = _.last(array); // 数组元素求和 const sum = _.sum(array); // 数组元素平均值 const mean = _.mean(array); 2. 对象操作
const obj = {a: 1, b: 2, c: 3}; // 获取对象的所有键 const keys = _.keys(obj); // 获取对象的所有值 const values = _.values(obj); // 深拷贝对象 const newObj = _.cloneDeep(obj); var user = { name: 'liujun', age: '17', height: '1.66', friends: [ 'Evan', 'John', 'Mark', 'Jack', 'David' ] } //1.Object.assign // console.log(_.pick(user,['name','friends'])) // console.log(_.omit(user,['name','friends'])) console.log(_.clone(user)) console.log(_.cloneDeep(user))//shenkaobei3. 函数操作
function greet(name) { return `Hello, ${name}!`; } // 创建一个带有固定参数的函数 const greetBob = _.partial(greet, 'Bob'); console.log(greetBob()); // 输出: Hello, Bob! 4. 集合操作
const numbers = [1, 2, 3, 4, 5]; // 过滤出所有偶数 const evens = _.filter(numbers, num => num % 2 === 0); // 查找第一个符合条件的元素 const firstEven = _.find(numbers, num => num % 2 === 0); 5. 数字操作
//1.获取随机数 console.log(_.random(5)) //0-5 console.log(_.random(5,10)) //5-106. 字符串操作
//1.将字符串转化成驼峰命名 console.log(_.camelCase('foo bar')) console.log(_.camelCase('---foo bar----')) console.log(_.capitalize('foobar')) console.log(_.endsWith('logo.png','.png')) console.log(_.padStart('1',2,'0')) //1-> 017. 实例：使用 Lodash 对数组进行求和、过滤偶数、排序，以及对对象进行获取键值、深拷贝等操作。
// 导入 Lodash const _ = require('lodash'); // 创建一个数组 const numbers = [1, 2, 3, 4, 5]; // 使用 Lodash 操作数组 const sum = _.sum(numbers); // 求和 const evens = _.filter(numbers, num => num % 2 === 0); // 获取偶数 const sortedNumbers = _.sortBy(numbers); // 对数组进行排序 // 输出结果 console.log('数组:', numbers); console.log('数组求和:', sum); console.log('偶数:', evens); console.log('排序后的数组:', sortedNumbers); // 创建一个对象 const person = { name: 'Alice', age: 30, city: 'New York', }; // 使用 Lodash 操作对象 const keys = _.keys(person); // 获取所有键 const values = _.values(person); // 获取所有值 const clonedPerson = _.cloneDeep(person); // 深拷贝对象 // 输出结果 console.log('对象:', person); console.log('对象所有键:', keys); console.log('对象所有值:', values); console.log('深拷贝后的对象:', clonedPerson);三、Lodash的应用
Lodash 在实际应用中有着广泛的用途，它提供了许多实用的函数和方法，可以大大简化 JavaScript 编程中的复杂性。下面列举了一些 Lodash 在实际应用中的常见用途：
数据操作： Lodash 提供了丰富的数组和对象操作方法，包括过滤、映射、排序、查找、合并、拆分等，能够极大地简化数据处理的逻辑。
函数式编程： Lodash 提供了一系列函数式编程的工具函数，如柯里化、偏应用、组合等，使得函数的组合和复用更加简单和灵活。
异步编程： Lodash 提供了一些实用的异步编程工具函数，如
_.debounce、_.throttle等，能够帮助开发者处理异步操作的流程控制和性能优化。集合操作： Lodash 提供了一些集合操作的工具函数，如对集合进行过滤、排序、分组、求交集、并集、差集等，能够方便地处理集合数据。
字符串操作： Lodash 提供了一些字符串操作的工具函数，如格式化、截取、转换大小写、去除空格等，能够简化字符串处理的代码。
日期操作： Lodash 提供了一些日期操作的工具函数，如格式化、计算日期间隔、日期比较等，能够方便地处理日期时间相关的逻辑。
类型检查： Lodash 提供了一些类型检查的工具函数，如检查是否是数组、对象、函数等，能够帮助开发者进行类型安全的编程。
函数工具： Lodash 提供了一些函数工具，如函数绑定、节流、防抖等，能够帮助开发者优化函数的执行和性能。
四、手写精简版Lodash工具库
(function(g) { function Lodash() {} // 添加类方法 Lodash.VERSION = '1.0.0'; // 将数组元素连接成字符串 Lodash.join = function(arr, separator) { return arr.join(separator); } // 函数节流 Lodash.throttle = function(func, wait) { let timeout; return function(...args) { const context = this; if (!timeout) { func.apply(context, args); timeout = setTimeout(() => { timeout = null; }, wait); } } } // 函数防抖 Lodash.debounce = function(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); } } // 生成一个指定范围内的随机数 Lodash.random = function(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 检查字符串是否以指定字符串结尾 Lodash.endsWith = function(str, target) { return str.endsWith(target); } // 浅拷贝对象或数组 Lodash.clone = function(source) { if (Array.isArray(source)) { return source.slice(); } else if (typeof source === 'object' && source !== null) { return Object.assign({}, source); } else { return source; } } // 深拷贝对象或数组 Lodash.cloneDeep = function(source) { return JSON.parse(JSON.stringify(source)); } // 合并多个对象或数组 Lodash.merge = function(...sources) { return Object.assign({}, ...sources); } // 将多个对象的属性合并到第一个对象 Lodash.assign = function(target, ...sources) { return Object.assign(target, ...sources); } // 将 Lodash 对象挂载到全局对象上 g._ = Lodash; })(this);