张家界建设网站公司,公司做网站需要哪些内容,兰州网络推广制度,信息流优化师简历怎么写lodash 模块化、高性能的 JavaScript 实用工具库。官方文档#xff1a;https://www.lodashjs.com
1.对数组进行分组 _.chunk(array, [size1])
使用场景#xff0c;如移动端页面一行能放5个元素#xff0c;总共7条数据#xff0c;将一维数组转为二维数组#xff0c;让一个…lodash 模块化、高性能的 JavaScript 实用工具库。官方文档https://www.lodashjs.com
1.对数组进行分组 _.chunk(array, [size1])
使用场景如移动端页面一行能放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的形式修改发现没有触发页面渲染
templatebutton styleheight:30px clickonDebounce按钮/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 limingfangconsole.log(this.obj,obj2);},
};
/script
