当前位置: 首页 > news >正文

Lodash-js工具库

1. Lodash 简介

Lodash 是一个现代 实用工具库,提供了许多有用的函数,帮助开发者处理常见的编程任务,如数组操作、对象处理、字符串处理等。Lodash 使得代码更简洁、更高效,极大地提高了开发效率。Lodash 的设计灵感来自于 Underscore.js,但提供了更多的功能和更好的性能。

2. 安装 Lodash

Lodash 可以通过多种方式安装:

  • 具体安装:参考官网

使用 npm 安装

npm i --save lodash

在浏览器环境

<script src="lodash.js"></script>

3. 常用函数示例

3.1 数组操作

_.chunk

将数组分成多个长度为指定大小的数组块。

const _ = require('lodash');const array = [1, 2, 3, 4, 5, 6, 7, 8];
const chunkedArray = _.chunk(array, 2);
console.log(chunkedArray); // [[1, 2], [3, 4], [5, 6], [7, 8]]
_.flatten

将嵌套的数组展开一层。

const array = [1, [2, [3, [4]], 5]];
const flattenedArray = _.flatten(array);
console.log(flattenedArray); // [1, 2, [3, [4]], 5]
_.uniq

移除数组中的重复元素。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = _.uniq(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

3.2 对象操作

_.merge

深度合并两个对象。

const object1 = { a: 1, b: { c: 2 } };
const object2 = { b: { d: 3 } };
const mergedObject = _.merge(object1, object2);
console.log(mergedObject); // { a: 1, b: { c: 2, d: 3 } }
_.get

获取对象中指定路径的值。

const object = { a: { b: { c: 3 } } };
const value = _.get(object, 'a.b.c');
console.log(value); // 3
_.set

设置对象中指定路径的值。

const object = { a: { b: { c: 3 } } };
_.set(object, 'a.b.c', 4);
console.log(object.a.b.c); // 4

3.3 集合操作

_.groupBy

根据指定的条件将集合中的元素分组。

const array = [6.1, 4.2, 6.3];
const groupedByFloor = _.groupBy(array, Math.floor);
console.log(groupedByFloor); // { '4': [4.2], '6': [6.1, 6.3] }
_.map

创建一个新数组,其结果是对每个集合元素执行函数后的返回值。

const array = [1, 2, 3];
const doubledArray = _.map(array, (n) => n * 2);
console.log(doubledArray); // [2, 4, 6]

3.4 函数操作

_.debounce

创建一个防抖动函数,在一定时间内重复调用时,只有最后一次调用的结果会被执行。

const saveInput = _.debounce((value) => {console.log('Saving data', value);
}, 300);document.getElementById('input').addEventListener('input', (event) => {saveInput(event.target.value);
});
_.throttle

创建一个节流函数,在一定时间内只能执行一次。

const updatePosition = _.throttle((event) => {console.log('Mouse position', event.clientX, event.clientY);
}, 100);document.addEventListener('mousemove', updatePosition);

3.5 字符串操作

_.capitalize

将字符串的首字母转换为大写。

const text = 'hello world';
const capitalizedText = _.capitalize(text);
console.log(capitalizedText); // 'Hello world'
_.kebabCase

将字符串转换为 kebab case。

const text = 'Hello World';
const kebabText = _.kebabCase(text);
console.log(kebabText); // 'hello-world'

4. 总结

Lodash 是一个强大的 工具库,提供了许多实用的函数,帮助开发者简化数据操作。无论是数组、对象、集合、函数还是字符串操作,Lodash 都提供了丰富的 API,使得代码更简洁、高效。熟练掌握 Lodash 能显著提高开发效率和代码质量。

http://www.lryc.cn/news/380947.html

相关文章:

  • Makefile实战论(一)
  • Hi3861 OpenHarmony嵌入式应用入门--PWM 三色灯
  • CH5xx USB下载工具
  • 问题1.用PGP解密出keybox.xml,过程中报“Can‘t check signature: No public key”如图,这个正常吗?如何解决?
  • 网络物理隔离后 可以用保密U盘进行数据安全交换吗?
  • 机械臂 CoppeliaSim Simulink联合仿真
  • MySQL数据库(一):数据库介绍与安装
  • 天津媒体邀约,及媒体名单?
  • Java | Leetcode Java题解之第168题Excel表列名称
  • 代码随想录算法训练营刷题复习10:二叉树、二叉搜索树复习2
  • 预测准确率达95.7%,ChatMOF利用LLM预测和生成金属有机框架,包含人工智能词汇表(AI glossary)
  • 【Linux】环境基础开发工具使用(yum、vim、gcc/g++、gdb、make/Makefile)
  • Linux基础二
  • Linux运维面试--yum安装和编译安装区别
  • redis 的内存尽量不要超过 10g,超过 10g 可能会有问题
  • 力扣(2024.06.23)
  • OpenCV颜色检测
  • VScode开发ARM环境搭建
  • AI-人工智能指数报告(四):科学、医学与教育
  • Redis内存数据库
  • LabVIEW高精度电能质量监测系统
  • Java程序之可爱的小兔兔
  • ▶《强化学习的数学原理》(2024春)_西湖大学赵世钰 Ch5 蒙特卡洛方法【model-based ——> model-free】
  • 【linux】Valgrind工具集详解(十六):交叉编译、移植到arm(失败)
  • 前端面试题(七)答案版
  • 为微信小程序项目添加eslint
  • Win10用户必看:最好用最稳定的版本在此,值得一试!
  • 处理文本内容的命令和正则表达式
  • AI与音乐:当技术与艺术发生冲突
  • java泛型学习