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: 创建一个新数组,将原数组和任何数组或值连接在一起

用法:

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

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

用法:

js 复制代码
  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);  // 1

  const newArr1 = _.findIndex(arr,{name: 'linda'});
  console.log(newArr1)  //1

  const newArr2 = _.findIndex(arr,['name','linda']);
  console.log(newArr2,);  //1
orderBy

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

用法:

js 复制代码
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: 获得一个随机元素。

用法:

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

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

用法:

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

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

用法:

js 复制代码
  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方法。

用法:

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

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

用法:

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

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

使用:

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

clone : 创建一个 浅拷贝

使用:

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

cloneDeep : 创建一个 深拷贝

使用:

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

总结

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

相关推荐
前端小巷子15 分钟前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路37 分钟前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
醉方休1 小时前
React Fiber 风格任务调度库
前端·javascript·react.js
华仔啊2 小时前
摸鱼神器!前端大佬私藏的 11 个 JS 神级 API,复制粘贴就能用,效率翻倍
前端·javascript
念念不忘 必有回响2 小时前
js设计模式-状态模式
javascript·设计模式·状态模式
小桥风满袖2 小时前
极简三分钟ES6 - 箭头函数
前端·javascript
bug_kada2 小时前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
hj5914_前端新手2 小时前
深入分析 —— JavaScript 深拷贝
前端·javascript
jqq6662 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
织_网2 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app