Today, there are also very hard to earn cat food money

If there are mistakes or deficiencies in the article, please understand and help me to point out, thank you very much

It encapsulates many functions to handle common data types such as strings, arrays and objects. Lodash makes it easier to use array, number, objects, string and so on JavaScript gets simpler. Can be directly called, such as array deduplication, anti – shake function and so on, which can simplify a lot of code. There are many methods of LoDash, all of which are explained in official documents. The article mentioned some methods that I usually use.

Collection: applies to arrays and object types, and partially applies to strings, such as grouping, searching, filtering, etc. Function: Applies to Function types, such as throttling, delaying, caching, setting hooks, etc. Lang: applies to functions, such as throttling, delaying, caching, setting hooks, etc. Number: used to generate random numbers and compare the relationship between values and numeric ranges. Object: used to generate random numbers. Seq: Used to create chain calls to improve performance (lazy calculation) String: Used for String types. Seq: Used to create chain calls to improve performance (lazy calculation)Copy the code

First install ladash globally through NPM

NPM i-save Lodash \\ global installationCopy the code

It is customary to package some methods in utils toolkit and then mount them globally, because the cost of mounting them globally is quite high, so they are common methods in some projects. The following methods were introduced as needed:

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'
Copy the code

_get

Grammar:

_.get(object, path, [defaultValue])
Copy the code

The @description get method is used to solve the problem that the code is saved and not continued because of undefined in A.B.C.D

@param {Object} [Object] Target Object

@param {String} [path] Specifies the path

@param {*} [defaultVal] is the default value if the value does not exist

    @example
   var object = { 'a': [{ 'b': { 'c': 3}}}; utils._get(object,'a[0].b.c');                 // => 3 (recommended)
   utils._get(object, ['a'.'0'.'b'.'c']);          / / = > 3
   utils._get(object, 'a.b.c'.'default');          // => 'default' (recommended)
Copy the code
  _get = function (object, path, defaultVal) {
    return _get(object, path, defaultVal)
  }
Copy the code

_getObjArray

@description Returns an array of the key values of a specified object. Multiple nested properties are supported, for example, obj.x.y.z. An array of key values is quickly obtained

@param {Array} [objects] Target object

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

_findIndex

@description This method is similar to find, except that it returns the index of the first element judged true by the predicate, not the element itself.

@param {Array} [Array] Target object

@returns {Number} -1 indicates that the corresponding value is not found, and the rest indicates the index of the array

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

_uniq

@description Array decrement (pure array)

    @example
    var a =[1.2.1.5.1.9]
    utils._uniq(a) => [1.2.5.9]
Copy the code

_pick

@description creates an object with a key selected from object.

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

_omit

@description Reverse pick

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

_isUndefined

@description Checks whether the value is undefined

@returns Returns a Boolean value

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

_isUndefined

@description Checks whether the value is undefined

@returns Returns a Boolean value

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

_isNaN

@description determines whether it is NaN

@returns Returns a Boolean value

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

_isString

@description Checks whether a String exists

@returns Returns a Boolean value

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

_debounce

@description Anti – shake function

The anti-shake function is really great, so many buttons in the system need anti-shake treatment. For example, the export button, of course, in addition to the anti-shake function, I also have another lock to avoid multiple requests triggered by users’ multiple clicks due to network reasons.

/ / export
export: utils._debounce(() = > {
  if (this.exportLock) return
  this.exportLock = trueexportCommonData({ ... this.formQuery, ... this.filter }).then(res= > {
    delete this.exportLock
    res.url && window.open(res.url)
  })
}, 1000),
Copy the code