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

avatar
作者
筋斗云
阅读量:6

目录

一、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);

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!