JS中Lodash工具库（秒懂如何使用Lodash并手写精简版Lodash）

目录

一、Lodash介绍

1.Lodash的概念

2.Lodash的特点

3.Lodash的主要功能

二、Lodash的使用与实例

安装 Lodash

导入 Lodash

使用 Lodash

初体验

1. 数组操作

2. 对象操作

3. 函数操作

4. ***操作

5. 数字操作

6. 字符串操作

7. 实例：使用 Lodash 对数组进行求和、过滤偶数、排序，以及对对象进行获取键值、深拷贝等操作。

三、Lodash的应用

一、Lodash介绍

1.Lodash的概念

    Lodash 是一个现代化的 JavaScrIPt 实用工具库，提供了大量的实用函数，旨在简化 JavaScript 编程的复杂性。它由 John-David DAlton 创建，并且广受 JavaScript 社区的欢迎和认可。

2.Lodash的特点

1. 高性能： Lodash 专注于提供高性能的函数，它们经过优化以在各种 JavaScript 运行环境中提供优秀性能。
2. 模块化： Lodash 提供了模块化的架构，可以按需导入需要的函数，从而减小项目的体积。
3. 广泛的功能： Lodash 提供了丰富的功能集，涵盖了数组、对象、函数、***、字符串、日期等多个方面，可以满足各种编程需求。
4. 跨浏览器兼容性： Lodash 在各种现代浏览器和 Node.js 等 JavaScript 运行环境中都能正常工作，并提供了对 ES6+ 特性的良好支持。
5. 易于学习和使用： Lodash 的 API 设计简洁清晰，易于学习和记忆，可以大大提高 JavaScript 编程的效率。

3.Lodash的主要功能

1. 数组操作： 包括对数组进行迭代、过滤、映射、排序、查找等操作。
2. 对象操作： 包括对对象进行遍历、获取键值对、合并、深拷贝等操作。
3. 函数操作： 包括创建柯里化函数、部分应用函数、防抖节流等高级函数操作。
4. ***操作： 包括对***进行过滤、排序、查找等操作。
5. 字符串操作： 包括对字符串进行格式化、截取、转换大小写等操作。
6. 日期操作： 包括日期格式化、计算日期间隔、日期比较等操作。

二、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))//shenkaobei

3. 函数操作

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-10

6. 字符串操作

//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-> 01

7. 实例：使用 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 在实际应用中的常见用途：

1. 数据操作： Lodash 提供了丰富的数组和对象操作方法，包括过滤、映射、排序、查找、合并、拆分等，能够极大地简化数据处理的逻辑。

2. 函数式编程： Lodash 提供了一系列函数式编程的工具函数，如柯里化、偏应用、组合等，使得函数的组合和复用更加简单和灵活。

3. 异步编程： Lodash 提供了一些实用的异步编程工具函数，如 _.debounce、_.throttle 等，能够帮助开发者处理异步操作的流程控制和性能优化。

4. ***操作： Lodash 提供了一些***操作的工具函数，如对***进行过滤、排序、分组、求交集、并集、差集等，能够方便地处理***数据。

5. 字符串操作： Lodash 提供了一些字符串操作的工具函数，如格式化、截取、转换大小写、去除空格等，能够简化字符串处理的代码。

6. 日期操作： Lodash 提供了一些日期操作的工具函数，如格式化、计算日期间隔、日期比较等，能够方便地处理日期时间相关的逻辑。

7. 类型检查： Lodash 提供了一些类型检查的工具函数，如检查是否是数组、对象、函数等，能够帮助开发者进行类型安全的编程。

8. 函数工具： 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);

TAG：lodash