lodash库_.chunk、_.pick、_.omit、_.cloneDeep、_.debounce方法

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>
相关推荐
小周不摆烂19 分钟前
探索JavaScript前端开发:开启交互之门的神奇钥匙(二)
javascript
匹马夕阳1 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
我想学LINUX2 小时前
【2024年华为OD机试】 (A卷,100分)- 微服务的集成测试(JavaScript&Java & Python&C/C++)
java·c语言·javascript·python·华为od·微服务·集成测试
screct_demo3 小时前
詳細講一下在RN(ReactNative)中,6個比較常用的組件以及詳細的用法
javascript·react native·react.js
CodeClimb9 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
光头程序员11 小时前
grid 布局react组件可以循数据自定义渲染某个数据 ,或插入某些数据在某个索引下
javascript·react.js·ecmascript
fmdpenny12 小时前
Vue3初学之商品的增,删,改功能
开发语言·javascript·vue.js
小美的打工日记12 小时前
ES6+新特性,var、let 和 const 的区别
前端·javascript·es6
涔溪12 小时前
有哪些常见的 Vue 错误?
前端·javascript·vue.js
程序猿online12 小时前
前端jquery 实现文本框输入出现自动补全提示功能
前端·javascript·jquery