Некоторые из наиболее часто используемых методов в lodash

Vue.js

Сегодня также очень трудно заработать деньги на корм для кошек.

Если в статье есть ошибки или недостатки, я надеюсь понять и помочь мне указать, большое спасибо

Я случайно увидел, как мои коллеги в проекте компании использовали lodash и посмотрел, он инкапсулирует множество функций обработки для распространенных типов данных, таких как строки, массивы, объекты и т. д. Lodash уменьшает массив, число, объекты, строку и т. д. Это делает JavaScript проще в использовании. Его можно вызывать напрямую, например, дедупликацию массива, функцию защиты от сотрясения и т. д., что может упростить большую часть кода.lodashМетодов много, и в официальных документах есть описания.В статье упоминаются некоторые методы, которыми я обычно пользуюсь больше.

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

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

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

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

    Math：适用于数值类型，常用于执行数学运算

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

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

    Seq：常用于创建链式调用，提高执行性能（惰性计算）

    String：适用于字符串类型

Сначала установите ладаш глобально через npm

npm i -save lodash   \\全局安装

image.png

Обычно некоторые методы инкапсулируются в utils toolkit, а затем монтируются глобально.Поскольку глобальная стоимость монтирования довольно велика, этот метод широко используется в некоторых проектах. При необходимости вводятся следующие методы:

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

Метод get @description используется для решения проблемы неопределенности в a.b.c.d, в результате чего код сообщает об ошибке и не продолжает выполняться вниз.

@param {Object} [object] целевой объект

@param {String} [путь] требует пути значения

@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 Возвращает массив значений ключа указанного объекта, поддерживает многоуровневое вложенное получение свойств, например: obj.x.y.z, быстро получает требуемый массив значений ключа в массиве

@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, разница в том, что этот метод возвращает значение индекса (index) первого элемента, который считается истинным значением по предикату, а не сам элемент.

@param {Array} [массив] целевой объект

@returns {Число} -1 означает, что соответствующее значение не найдено, остальные — индексы, соответствующие массиву

 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 Создает объект с выбранным ключом из объекта.

    @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 обратный выбор

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

_isUndefined

@description определяет, является ли оно неопределенным

@returns возвращает логическое значение

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

_isUndefined

@description определяет, является ли оно неопределенным

@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),
Категории