React里使用lodash工具库
安装
使用命令 npm install lodash
页面引入
常见的引入方式
- 引入整个lodash对象：
import _ from 'lodash' - 按名称引入特定的函数：
import { orderBy } from "lodash";
tips: 这两种引入方式都会引入整个lodash库， 体积大；不推荐
建议引入方式
- 只引入需要的函数：
import orderBy from 'lodash/orderBy' - 使用
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/