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

React里使用lodash工具库

安装

使用命令 npm install lodash

页面引入

常见的引入方式
  1. 引入整个lodash对象: import _ from 'lodash'
  2. 按名称引入特定的函数: import { orderBy } from "lodash";
    tips: 这两种引入方式都会引入整个lodash库, 体积大;不推荐
建议引入方式
  1. 只引入需要的函数: import orderBy from 'lodash/orderBy'
  2. 使用 lodash-es: import { orderBy } from 'lodash-es'
    tips: 这两种方式只会引入对应的模块。

常用方法

concat

concat: 创建一个新数组,将原数组和任何数组或值连接在一起
用法:

const array = [1,3];
const newArray = _.concat(array,'4',7,[[8]]);
console.log(newArray)   // [1,3,'4',7,[8]];
findIndex

findIndex :返回第一个判断为真值的元素的索引值。
用法:

  const arr = [{name:'judy',age: 12},{name:'linda',age: 23},{name:'candy',age: 43},{name:'linda',age: 18},]const newArr = _.findIndex(arr,function(o) {return o.name == 'linda';})console.log(newArr);  // 1const newArr1 = _.findIndex(arr,{name: 'linda'});console.log(newArr1)  //1const newArr2 = _.findIndex(arr,['name','linda']);console.log(newArr2,);  //1
orderBy

orderBy: 对数组进行排序,默认为升序;也可以指定为 "desc" 降序,或者指定为 "asc" 升序。
用法:

const arr = [{name:'judy',age: 12},{name:'linda',age: 23},{name:'candy',age: 43},{name:'cindy',age: 18},
]// 根据名字排序,使用orderBy, 升序let arr1 = _.orderBy(arr,['name'],'asc');console.log(arr1)// 根据名字排序,使用orderBy, 降序let arr2 = _.orderBy(arr,['name'],'desc');console.log(arr2)
sample

sample: 获得一个随机元素。
用法:

  const arr = [ 1,2,3,4,5,6];const newArr = _.sample(arr);console.log(newArr)   // 随机返回了一个元素
size

size: 如果是数组或者字符串就返回 length ; 如果是对象,返回其可枚举的属性个数
用法:

  const str = 'string';console.log(_.size(str));  //6const arr = [1,2,3,4];console.log(_.size(arr));  // 4const obj = {name: 'linda',age: '24'};console.log(_.size(obj)) //  2
sortBy

sortBy 允许你指定一个属性来排序,默认为升序。如果需要降序排,需要借助reverse() ;或者使用上方 orderBy
用法:

  const arr = [{name:'judy',age: 12},{name:'linda',age: 23},{name:'candy',age: 43},{name:'cindy',age: 18},]// 根据名字排序,使用sortBy 升序let arr3 = _.sortBy(arr,['name']);console.log(arr3)// 根据名字排序,使用sortBy先进性升序排序,然后使用reverse()函数进行反转let arr4 = _.sortBy(arr,['name']).reverse();console.log(arr4)
debounce

debounce(func,wait ,options): 创建一个 debounced (防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法;可以提供一个 options(选项) 对象决定如何调用func方法。
用法:

// 处理屏幕变化的函数const handle = () => {};// 使用debounce,避免窗口在变动时消耗过大。window.addEventListener('resize',_.debounce(handle,3000))
throttle

throttle(func,wait,options): 创建一个throttle节流函数,在 wait 秒内最多执行 func 一次的函数。
用法:

// 处理滚动事件const handleScroll = () => {};// 使用throttle,避免窗口在变动时消耗过大。window.addEventListener('scroll',_.throttle(handleScroll ,3000))
delay

delay: 延迟多少时间后执行函数
使用:

  _.delay(function() {console.log('延迟执行了~~~')},500)
clone

clone : 创建一个 浅拷贝
使用:

  const arr = [{name: 'linda',age: 13}];var newArr = _.clone(arr);console.log(arr[0] === newArr[0]); // true
cloneDeep

cloneDeep : 创建一个 深拷贝
使用:

  const arr = [{name: 'linda',age: 13}];var newArr = _.cloneDeep(arr);console.log(arr[0] === newArr[0]); // false

总结

更多lodash的方法及使用,可以参考中文官网文档: https://www.lodashjs.com/


http://www.mrgr.cn/news/81349.html

相关文章:

  • 【NLP高频面题 - Transformer篇】Transformer的位置编码是如何计算的?
  • WordPress 去除?v= 动态后缀
  • 谷歌开发者工具 - 控制台篇
  • K8S 黑魔法之如何从 Pod 拿到节点的命令行
  • Y3地图制作1:水果缤纷乐、密室逃脱
  • 国际网络专线怎么申请开通?
  • 机器学习基础
  • Redis缓存数据库
  • [搜广推]王树森推荐系统笔记——矩阵补充最近邻查找
  • 自动驾驶---Parking端到端架构
  • 深度学习中的残差网络、加权残差连接(WRC)与跨阶段部分连接(CSP)详解
  • 结合实例从HCI层分析经典蓝牙连接和配对过程
  • 重温设计模式--1、设计模式七大原则
  • Shell脚本
  • 在【Arduino IDE】中在线下载和离线下载【ESP系列开发板的SDK】
  • idea配置
  • SpringBoot选择CGLIB作为默认动态代理
  • C语言结构体详细讲解
  • gateway网关
  • C语言项目 天天酷跑(上篇)
  • Pytorch分布式训练
  • Unity模型观察脚本
  • Android开发环境搭建和编译系统
  • 知识图谱嵌入大总结:难点、方法、工具、和图嵌入的区别
  • 【innodb 阅读笔记】之 数据页结构介绍
  • springboot容器无法获取@Autowired对象,报null对象空指针问题的解决方式