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.mzph.cn/diannao/34300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react学习——09react中props属性

1、基本使用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><!-- 移动端适配--><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>1_props基…

行业原型:智能资产管理平台-个人资产服务

​行业原型预览链接&#xff1a;&#xff08;请与班主任联系获取原型文档&#xff09; 文件类型&#xff1a;.rp 支持版本&#xff1a;Axrure RP 8 文档名称&#xff1a;金融&#xff1a;智能资产管理平台&#xff08;个人资产服务&#xff09; 文件大小&#xff1a;1.75 MB 智…

光伏发电项目是如何提高开发效率的?

随着全球对可再生能源需求的持续增长&#xff0c;光伏发电项目的高效开发成为关键。本文将深入探讨如何在实际操作中提高光伏发电项目的开发效率。 一、优化选址流程 1、数据收集与分析&#xff1a;利用卫星地图和遥感技术&#xff0c;收集目标区域的光照资源、地形地貌、阴影…

chrome 使用本地替换功能替换接口返回内容

前言 在web开发或测试过程中&#xff0c;我们经常会需要修改接口返回值来模拟数据进行开发或测试。 常用的方式一般通过抓包工具&#xff0c;如charles&#xff0c;或fildder 的功能。 例如我们可以使用charles打断点的方式&#xff0c;或者使用charles的map local 功能进行…

手工微调embedding模型,让RAG应用检索能力更强

BAAI/bge-small-en 目前HuggingFace的MTEB(海量文本Embedding基准)排行榜上排名第一的Embedding模型是big-large-en&#xff0c;它由北京人工智能研究院(BAAI&#xff0c;智源)开发。它是一种预训练的transformer模型&#xff0c;可用于各种自然语言处理任务&#xff0c;如文本…

VLLM部署通义千问

vllm 通过不同的chat_template推理部署常见qwen、chatglm、llama3等开源大模型 vllm官网地址&#xff1a;Installation — vLLM vllm 版本 4.0.0 镜像 vllm github 官方镜像 gpu v100 32g a800 80g openai api 方式 出现的问题通过 chat-template 聊天模板解决 1 推理部署qw…

艺术家电gorenje x 设计上海丨用设计诠释“生活的艺术”

2024年6月19日—22日&#xff0c;艺术家电gorenje亮相“设计上海”2024&#xff0c;以“gorenje是家电更是艺术品”为题&#xff0c;为人们带来融入日常的艺术之美。设计上海2024不但汇集了国内外卓越设计品牌和杰出独立设计师的家具设计作品&#xff0c;还联合国内外多名设计师…

ESP-01S 模块使用串口助手获取天气参数

ESP-01S 模块 接线AT命令ESP01S联网测试并获取心知天气测试流程 接线 引脚接线3V3接电源RST外部复位引脚&#xff0c;低电平复位。可以悬空或者接高电平。EN接高电平&#xff0c;高电平使能。TX接CH340的RXRX接CH340的TXIO0悬空&#xff1a;Flash Boot&#xff0c;工作模式。下…

素数筛(算法篇)

算法之素数筛 素数筛 引言&#xff1a; 素数(质数)&#xff1a;除了1和自己本身之外&#xff0c;没有任何因子的数叫做素数(质数) 朴素筛法(优化版) 概念&#xff1a; 朴素筛法&#xff1a;是直接暴力枚举2到当前判断的数x(不包括)&#xff0c;然后看在这范围内是否存在因…

用c 代码来研究 dft(discrete fourier transform)

/// // author: hjjdebug // date : 2024年 06月 24日 星期一 15:59:53 CST // descpripton: // 用c 代码来研究 dft(discrete fourier transform) /// 文章目录 甲: DFT 的定义&#xff1a;乙: 下面给出用c代码实现的dft 公式&#xff0c; 验证了手工计算的正确性.丙&#xff…

智慧在线医疗在线诊疗APP患者端+医生端音视频诊疗并开处方

智慧在线医疗&#xff1a;音视频诊疗新纪元 &#x1f310; 智慧医疗新篇章 随着科技的飞速发展&#xff0c;智慧医疗正逐步走进我们的生活。特别是在线医疗&#xff0c;凭借其便捷、高效的特点&#xff0c;已成为许多患者的首选。而其中的“智慧在线医疗患者端医生端音视频诊疗…

Jrebel热部署

1、下载包 2、解压后本地启动exe文件 3、配置 http://127.0.0.1:8888/{GUID} https://www.guidgen.com/ 获取 GUID 4、激活后&#xff0c;Jrebel针对本项目模块进行勾选 5、如果报错&#xff0c;setting设置offine

代码随想录训练营Day 69|并查集理论基础、卡码网107.寻找存在的路径

1.并查集理论基础 并查集理论基础 | 代码随想录 并查集可以解决什么问题呢&#xff1f; 主要就是集合问题&#xff0c;两个节点在不在一个集合&#xff0c;也可以将两个节点添加到一个集合中。 注意&#xff1a;求根是求箭头出发的数 路径压缩&#xff1a;求根的根。把根的根的…

解析JSON字符串

QJsonDocument类用于解析JSON字符串&#xff0c;

详解 | DigiCert EV代码签名证书

简介 DigiCert EV 代码签名证书是一种高级别的代码签名证书&#xff0c;它不仅提供了标准代码签名证书的所有安全特性&#xff0c;还增加了额外的身份验证流程&#xff0c;以确保软件开发者或发布者的身份得到最严格验证。这对于提升软件的信任度、防止恶意篡改和确保下载安全…

10,PWM

.通过定时器 计数器:根据时钟频率计数 时钟源:为计数器提供时钟 重装栽植:计数的最大值 想改变周期和频率&#xff1a;需要调节定时器的时钟源和重装栽植 想改变占空比&#xff1a;调节定时器的比较值

vue3的网站项目内嵌到别的项目内部,通过用户名免登陆

前言&#xff1a;想把vue3的网站项目1内嵌到别的项目2内部。 希望在项目2内&#xff0c;点击一个按钮就出现一个页面进入项目1&#xff0c;其中用户名密码是互通的&#xff08;这一块需要接口调用实现同步&#xff09;&#xff0c;仔细一想&#xff0c;原理应该是提供一个地址链…

求满足abc + cba = 1333的a、b、c分别是什么

已知 abccba1333&#xff0c;其中 a、b、c 均为一个数字&#xff0c;编写一个程序求出 a、b、 c 分别代表什么数字&#xff1f; 可以考虑采用暴力枚举的方法&#xff0c;分别求出数的个位、十位、百位&#xff0c;然后相乘判断。代码如下&#xff1a; #include <stdio.h&g…

【Python系列】FastAPI 中的路径参数和非路径参数解析问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

dockercompose部署redis哨兵模式并集成springboot

第一步 编写compose文件 docker-compose.yml version: 3.8networks:redis-network:driver: bridgeservices:redis-master:image: redis:7.2.4container_name: redis-mastercommand: ["sh", "-c", "redis-server --protected-mode no --slave-announ…