lodash 模块化、高性能的 JavaScript 实用工具库。官方文档:https://www.lodashjs.com
1.对数组进行分组 _.chunk(array, [size=1])
使用场景,如移动端页面一行能放5个元素,总共7条数据,将一维数组转为二维数组,让一个数组只有5个成员
参数:arr表示要分组的数组,num表示一个分组里面放几个元素
arr: [{a: 1},{a: 2},{a: 3},{a: 4},{a: 5},{a: 6},{a: 7}],
2.选中和过滤对象的属性_.pick(Object,[prop])和_.omit()
_.pick(Object,[prop]) :第一个参数数据源,必须是对象,第二个参数需要获取的属性(可以是数组形式),返回新的数组
_.omit():和pick相反,排除某个数据
3.防抖处理
_.debounce(fn,wait,[options]) : [options]是一个对象,可以设置定时器各种配置
leading: true延时开始前是否调用,默认false
trailing: false延时结束后是否调用,默认true
注意:防抖函数在vue中的使用,在data中定义函数并调用_.debounce()函数后,进行return。
直接在methods里面写不能被正常调用,因为_.debounce()主要是接收一个返回值,然后再执行返回函数。
4. 数据进行深拷贝 _.cloneDeep(obj)
使用场景:如vuex中对state数据是引用数据类型的修改,直接通过obj.a = 1的形式修改发现没有触发页面渲染
javascript
<template>
<button style="height:30px" @click="onDebounce">按钮</button>
</template>
<script>
import _ from "lodash";
export default {
name: "Form",
data() {
const onDebounce = _.debounce(function() {
console.log("按钮触发了---");
},
1000,
{
leading: false,
trailing: true
})
return {
onDebounce,
arr: [
{ a: 1 },
{ a: 2 },
{ b: 3 },
{ b: 4 },
{ c: 5 },
{ c: 6 },
{ d: 7 }
],
obj:{
name:'lmf',
age: 23
}
};
},
mounted(){
console.log(_.chunk(this.arr, 5));
console.log(_.pick(this.obj, ['name']));
console.log(_.omit(this.obj, ['name']));
let obj2 = _.cloneDeep(this.obj)
obj2.name = "limingfang"
console.log(this.obj,obj2);
},
};
</script>