查看网址邯郸网站优化

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的形式修改发现没有触发页面渲染

<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>