Lodash usage and common methods

Introduction

Lodash is a consistent, modular, high-performance JavaScript utility library. It internally encapsulates many processing functions for common data types such as strings, arrays, and objects. Lodash makes JavaScript easier by reducing the difficulty of using arrays, numbers, objects, strings, etc.

official website

Introduction to Lodash | Lodash Chinese Documentation | Lodash Chinese Website

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

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

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

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

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

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

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

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

    String：适用于字符串类型

use

1. First install ladash globally through npm

npm i -save lodash   \\全局安装

2. The following methods are 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'


方法二：

import {debounce, isString, isUndefined, isNaN, map} from 'lodash'

common method

• _.chunk(array, [size=1])

Meaning: split the array (array) into  size blocks of multiple lengths, and form these blocks into a new array.

example:

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

• _getObjArray

@description Returns an array of key values ​​of the specified object, supports nested acquisition of multi-layer attributes, such as: obj.xyz, quickly obtains the array of key values ​​​​needed in the array

@param {Array} [objects] target object

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

• _.findIndex(array, [predicate=_.identity], [fromIndex=0])

This method is similar to _.find , the difference is that this method returns the index value (index) of the first  predicate element that is judged to be true, instead of the element itself.

parameter:

1. array (Array) : Array to search.
2. [predicate=_.identity] (Array|Function|Object|string) : This function will be called on each iteration.
3. [fromIndex=0] (number): The index to search from.

return value:

(number) : Returns the index value (index) of the found element, otherwise returns  -1.

example:

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
 
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
 
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

• _.uniq(array)

Create a deduplicated arraycopy of the array. SameValueZero is used  for equality comparison. Only the first occurrence of an element will be kept

parameter:

1. array (Array) : Array to check.

return value:

(Array) : Returns the new deduplicated array.

example:

_.uniq([2, 1, 2]);
// => [2, 1]

• _isUndefined

@description judges whether it is undefined

@returns returns a boolean value

 var a
 utils._isUndefined(a) => true

• _.isNaN(value)

Check  value if yes  NaN.
Note:  This method is based on Number.isNaN ,  which differs from the global isNaN in that the global isNaN is returned for  undefined and other non-number values  true.

parameter:

1. value (*) : The value to check.

return value:

(boolean) :  Return  if value one  , otherwise return  .NaNtruefalse

example:

_.isNaN(NaN);
// => true
 
_.isNaN(new Number(NaN));
// => true
 
isNaN(undefined);
// => true
 
_.isNaN(undefined);
// => false

• _debounce

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

// 导出
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),

• _.isEmpty (value)

​ Checks if value is an empty object, collection, map or set. The judgment is based on the arguments object, array, string or jquery-like selector whose length is greater than 0, unless it is an object with enumerated properties.

​ Objects are objects that do not have their own enumerable properties if they are considered empty.

​ Array-like values, such as arguments object, array, buffer, string, or jQuery-like collections whose length is 0, are considered empty. Similarly, maps and sets with a size of 0 are considered empty.

parameter:

value (*): The value to check.

return value:

(boolean): Returns true if value is empty, otherwise returns false.

example:

_.isEmpty(null);
// => true
 
_.isEmpty(true);
// => true
 
_.isEmpty(1);
// => true
 
_.isEmpty([1, 2, 3]);
// => false
 
_.isEmpty({ 'a': 1 });
// => false