lodash中一些比较常用的方法__Vue.js
发布于 3 年前 作者 banyungong 1638 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: qklhk-chocolate highlight: atelier-cave-light


今天也有很努力的在赚猫粮钱

如若文章存在错误或不足,望理解并帮我指出,感激不尽


无意间看到了公司项目中同事有用到lodash的方法就看了一下,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。可以直接调用,比如数组去重,防抖函数等等,这样可以简化很多代码。lodash的方法有很多,官方文档都有说明,文章中提到的是我平时用到的会比较多的一些方法。

    Array:适用于数组类型,比如填充数据、查找元素、数组分片等操作

    Collection:适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作

    Function:适用于函数类型,比如节流、延迟、缓存、设置钩子等操作

    Lang:普遍适用于各种类型,常用于执行类型判断和类型转换

    Math:适用于数值类型,常用于执行数学运算

    Number:适用于生成随机数,比较数值与数值区间的关系

    Object:适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作

    Seq:常用于创建链式调用,提高执行性能(惰性计算)

    String:适用于字符串类型

首先通过npm全局安装ladash

npm i -save lodash   \\全局安装

image.png

习惯把一些方法封装在utils工具包里,然后再挂载到全局,因为挂载在全局成本还是挺大的,所以都是一些项目中比较常用的方法。按需引入了如下方法:

import _get from 'lodash/get'
import _map from 'lodash/map'
import _uniq from 'lodash/uniq'
import _pick from 'lodash/pick'
import _omit from 'lodash/omit'
import _isNaN from 'lodash/isNaN'
import _property from 'lodash/property'
import _findIndex from 'lodash/findIndex'
import _isUndefined from 'lodash/isUndefined'
import _isString from 'lodash/isString'
import _debounce from 'lodash/debounce'

_get

语法:

_.get(object, path, [defaultValue])

@description get方法,用于解决a.b.c.d出现undefined导致代码保存不继续向下执行

@param {Object} [object] 目标对象

@param {String} [path] 需要取值路径

@param {*} [defaultVal] 值不存在时候的默认值

    @example
   var object = { 'a': [{ 'b': { 'c': 3 } }] };
   utils._get(object, 'a[0].b.c');                 // => 3 (推荐使用)
   utils._get(object, ['a', '0', 'b', 'c']);          // => 3
   utils._get(object, 'a.b.c', 'default');          // => 'default' (推荐使用)
  _get = function (object, path, defaultVal) {
    return _get(object, path, defaultVal)
  }

_getObjArray

@description 返回指定对象的 key 的值的数组,支持多层属性嵌套获取,如:obj.x.y.z,快速获取数组内需要的key值数组

@param {Array} [objects] 目标对象

   var objects = [
      { 'a': { 'b': { 'c': 2 } } },
      { 'a': { 'b': { 'c': 1 } } }
    ]
    
    utils._getObjArray(object, 'a.b.c') => [2, 1]
  _getObjArray = function (objects, path) {
    return _map(objects, _property(path))
  }

_findIndex

@description 该方法类似find,区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值(index),而不是元素本身。

@param {Array} [array] 目标对象

@returns {Number} -1为没找到对应的值,其余为数组对应的index

 users = [
     { 'user': 'barney', 'active': false },
     { 'user': 'fred', 'active': false },
     { 'user': 'pebbles', 'active': true }
 ]
    utils._findIndex(array, function(o) { return o.user == 'barney'; }) => 0
    utils._findIndex(array, { 'user': 'fred', 'active': false }) => 1 (推荐使用)
    utils._findIndex(array, ['active', false]) => 0 (推荐使用)
    utils._findIndex(array, 'active') => 2 (推荐使用)
  _findIndex = function (array, predicate, fromIndex = 0) {
    return _findIndex(array, predicate, fromIndex)
  } 

_uniq

@description 数组去重(纯数组)

    @example
    var a =[1, 2, 1, 5, 1, 9]
    utils._uniq(a) => [1, 2, 5, 9]

_pick

@description 创建一个从 object 中选中的 key 的对象。

    @example
    var object = { 'a': 1, 'b': '2', 'c': 3 }
    utils._pick(object, ['a', 'c']) => { 'a': 1, 'c': 3 }
    var object = { 'a': 1, 'b': '2', 'c': 3 }
    utils._pick(object, ['a', 'c']) => { 'a': 1, 'c': 3 }

_omit

@description 反向版 pick

  @example
  var object = { 'a': 1, 'b': '2', 'c': 3 }
  utils._pick(object, ['a', 'c']) => { 'b': '2' }

_isUndefined

@description 判断是否为undefined

@returns 返回布尔值

  @example
    var a
    utils._isUndefined(a) => true

_isUndefined

@description 判断是否为undefined

@returns 返回布尔值

  @example
  var a
  utils._isUndefined(a) => true

_isNaN

@description 判断是否为NaN

@returns 返回布尔值

 @example
 var a = +'str'
 utils._isNaN(a) => true

_isString

@description 判断是否String

@returns 返回布尔值

 @example
var a = +'str'
utils._isString('abc') => true
utils._isString(1) => false

_debounce

@description 防抖函数

防抖函数真的太棒了,系统里那么多按钮都需要防抖处理。比如导出按钮,当然除了防抖函数我还另外上锁,避免由于网络原因造成的用户多次点击触发多次请求。

// 导出
export: utils._debounce(() => {
  if (this.exportLock) return
  this.exportLock = true
  exportCommonData({
    ...this.formQuery,
    ...this.filter
  }).then(res => {
    delete this.exportLock
    res.url && window.open(res.url)
  })
}, 1000),

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 努力赚钱的铲屎官娟娟 原文链接:https://juejin.im/post/6951627219412189214

回到顶部