Summary of common usage of Lodash

Some time ago, due to the deep copy of objects and arrays, there were some stuck bugs in the process of working on the project, so today I will give the front-end friends a super easy-to-use tool library, Lodash

Official website URL: Lodash Introduction | Lodash Chinese Documentation | Lodash Chinese Website

Lodash is a lightweight JavaScript tool function library, which facilitates the operation of data in daily development and improves development efficiency. In daily development, various operations such as reading and writing are generally performed on data, especially arrays and objects: such as deduplication, copying, merging, filtering, intersection, summation, and so on .

Why choose Lodash?

Lodash makes JavaScript easier by making it easier to work with arrays, numbers, objects, strings, and more. Lodash's modular approach is ideal for:

Traverse array, object and string
Manipulating and testing values
Create a function that conforms to the function

compatibility

Tested on Chrome 74-75, Firefox 66-67, IE 11, Edge 18, Safari 11-12, and Node.js 8-12.

Install

Browser environment:

<script src="lodash.js"></script>

via npm:

$ npm i -g npm
$ npm i --save lodash

Quote:

import * as _ from 'lodash'

Common usage of Lodash

Array

Create

Create an array with elements 0, 1, 2, ... , 23java

_.range([start=0], end, [step=1])
```
let arr = _.range(24)

console.log(arr) // [0, 1, 2, 3, ... , 23]
```
Create an array with elements of 100, 100, 100, 100, 100 arrays

_.fill(array, value, [start=0], [end=array.length])
```
let arr = _.fill(Array(5), 100)

console.log(arr) // [100, 100, 100, 100, 100]
```

Read

Get the last element dom in the array

_.last(array)

let arr = [1, 2, 3, 4, 5]
let lastElement = _.last(arr)

console.log(lastElement) // 5

Get the second last element ide in the array

_.nth(array, [n=0])

let arr = [1, 2, 3, 4, 5]
let lastSecondElement = _.nth(-2) 

console.log(lastSecondElement) // 4

Aggregate function to get the property value of a property with the same name in the object array

_.map(collection, [iteratee=_.identity])

let users = [{
      id: 12,
      name: 'Adam',
      hobbies: [
        {name: 'running', index: 100},
        {name: 'cycling', index: 95}
      ]
   },{
      id: 14,
      name: 'Bob',
      hobbies: [
        {name: 'movie', index: 98},
        {name: 'music', index: 85}
      ]
   },{
      id: 16,
      name: 'Charlie',
      hobbies: [
       {name: 'travelling', index: 90},
       {name: 'fishing', index: 88}
      ]
   },{
      id: 18,
      name: 'David',
      hobbies: [
       {name: 'walking', index: 99},
       {name: 'football', index: 85}
     ]                


   }
]
let userIds = _.map(users, 'id')
let mostFavouriteHobbies = _.map(users, 'hobbies[0].name')

console.log(userIds) // [12, 14, 16, 18]
console.log(mostFavouriteHobbies) // ["running", "movie", "travelling", "walking"]

Get the object tool with the largest attribute value in the object array

_.maxBy(array, [iteratee=_.identity])

let arr = [{a:1, b: 2, c: {d:4}}, {a:3, b: 4, c: {d:6}}]
let maxBObj = _.maxBy(arr, 'b')

console.log(maxBObj) // {a: 3, b: 4, c: {d: 6}}

Find the elements with the same element value in two arrays learning

_.intersection([arrays])

let arr1 = [2, 1, {a: 1, b: 2}]
let arr2 = [2, 3, {a: 1, b: 2}]
let intersection = _.intersection(arr1, arr2) 

console.log(intersection) // [2]

Finds the average of the element values in a numeric array spa

_.mean(array)

let numbers = [1, 2, 3, 4, 5]
let average = _.mean(numbers)

console.log(average) // 3

Find the average value of an attribute in an object array code

_.meanBy(array, [iteratee=_.identity])

let objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }]
let average = _.meanBy(objects, 'n')

console.log(average) // 5

Get the first n elements in the array without changing the original array

_.take(array, [n=1])

let arr = [1, 2, 3, 4, 5]
let part1Arr = _.take(arr, 4)
let part2Arr = _.take(arr, 6)
let part3Arr = _.take([], 5)

console.log(part1Arr) // [1, 2, 3, 4]
console.log(part2Arr) // [1, 2, 3, 4, 5]
console.log(part3Arr) // []

Delete

Delete elements with value falsy in the array

_.compact(array)

let arr = [0, 1, false, 2, '', 3, null, undefined, NaN]
let truthyArr = _.compact(arr) 

console.log(truthyArr) // [1, 2, 3]

Format

deduplication.

_.uniq(array)

let arr = [2, 1, 2, '2', true]
let uniqArr = _.uniq(arr)

console.log(uniqArr) // [2, 1, '2', true]

Sort. Array of objects, sorted in ascending or descending order according to the value of a property in the object

_.orderBy(collection, [iteratees=[_.identity]], [orders])

let users = [
  {user: 'Tom', age: 25},
  {user: 'Amy', age: 23},
  {user: 'Perter', age: 22},
  {user: 'Ben', age: 29}
]
let sortedUsers = _.orderBy(users, 'age', 'desc')

console.log(sortedUsers)
// [{user: "Ben", age: 29}, {user: "Tom", age: 25}, {user: "Amy", age: 23}, {user: "Perter", age: 22}]

Split the array [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] into [1, 2, 3, 4, 5] and [6, 7, 8, 9, 10]

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

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [left, right] = _.chunk(arr, 5)

console.log(left) // [1, 2, 3, 4, 5]
console.log(right) // [6, 7, 8, 9, 10]

Take off a layer[]

_.flatten(array)

let address = {
  'Jiangsu Province': ['Nanjing City', 'Suzhou City'],
  'Zhejiang Province': ['Hangzhou City', 'Shaoxing City']
}
let cities = _.flatten(_.values(address))

console.log(cities) // ["Nanjing City", "Suzhou City", "Hangzhou City", "Shaoxing City"]

Convert multidimensional array to one-dimensional array

_.flattenDeep(array)

let flattenedArr = _.flattenDeep([1, [2, [3, [4]], 5]]);

console.log(flattenedArr) // [1, 2, 3, 4, 5]

Object

Create

Create an object {x: 10, y: 10} through the array ["x", "y"] and the array [10, 10]

_.zipObject([props=[]], [values=[]])

let keys = ["x", "y"]
let values = [10, 10]
let obj = _.zipObject(keys, values) 

console.log(obj) // {x: 10, y: 10}

merge object

_.assign(object, [sources])

let desObj = {name: '', gender: 'male', job: 'developer'}
let sourceObj = {name: 'Tom', job: ''}
let mergedObj = _.assign(desObj, sourceObj)

console.log(mergedObj) // {name: "Tom", gender: "male", job: ""}

deep copy object

_.cloneDeep(value)

let sourceObj = {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14]}}
let desObj = _.cloneDeep(sourceObj)
desObj.permissions.store.push(15, 16)

console.log(desObj)
// {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14, 15, 16]}}
console.log(sourceObj)
// {department_id: 1, permissions: {management: [1, 2, 3, 4], store: [11, 12, 13, 14]}}

Merge key-value pairs with the same key value in multiple objects

_.merge(object, [sources])

let obj1 = {'9': {name: 'Tesco'}}
let obj2 = {'9': {storeToken: 'xxx'}}
let obj3 = {'9': {storePosition: 'Hangzhou'}}
let mergedObj = _.merge(obj1, obj2, obj3) 

console.log(mergedObj)
// 9: {name: "Tesco", storeToken: "xxx", storePosition: "Hangzhou"}

Read

Determine whether an object has a property

_.has(object, path)

let obj = {a: [{b: {c: 3}}]}
let hasC = _.has(obj, 'a[0].b.c')

console.log(hasC) // true

Get the value of a property in an object

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

let obj = {a: [{b: {c: 3}}]}
let c = _.get(obj, 'a[0].b.c')

console.log(c) // 3

Update

Set the value of a property in an object

_.set(object, path, value)

let obj = {a: [{b: {c: 3}}]}
let newObj = _.set(obj, 'a[0].b.c', 4);

console.log(obj.a[0].b.c); // 4

Sums the property values of the same property across multiple objects.

let customers = {
  new_customer: {0: 33, 1: 5, ... , 23: 0},
  old_customer: {0: 22, 1: 7, ... , 24: 0}
}
let customer = {}
let keys = _.keys(customers.new_customer)
let values = _.values(customers)
_.map(keys, key => {
  customer[key] = _.sumBy(values, key)
})

customers.customer = customer

console.log(customers)
// console
{
  customer: {0: 55, 1: 12, ... , 23: 0}
  new_customer: {0: 33, 1: 5, ... , 23: 0}
  old_customer: {0: 22, 1: 7, ... , 23: 0}
}

Number

Generate a random number in the range n~m

_.random([lower=0], [upper=1], [floating])

let random1 = _.random(2, 5)
let random2 = _.random(5)

console.log(random1) // 2, 3, 4, 5
console.log(random2) // 0, 1, 2, 3, 4, 5

Data Type

Judgment data type

_.isNumber(value)
_.isInteger(value)

...

_.isPlainObject(value)

let variable = 'hello';
// Number
console.log(_.isNumber(variable));
// Integer
console.log(_.isInteger(variable));
// Boolean
console.log(_.isBoolean(variable));
// String
console.log(_.isString(variable));
// Null
console.log(_.isNull(variable));
// Undefined
console.log(_.isUndefined(variable));
// Array
console.log(_.isArray(variable));
// Function
console.log(_.isFunction(variable));
// Object
console.log(_.isPlainObject(variable));
// Date
console.log(_.isDate(variable));

// DOM element
console.log(_.isElement(variable));

data type conversion

_.toArray
```
_.toArray('abc') // ["a", "b", "c"]
```

_.toInteger

_.toInteger(3.2); // 3
_.toInteger('3.2'); // 3

_.toNumber
```
_.toNumber('3.2') // 3.2
```

_.toString

_.toString(1); // "1"
_.toString([1, 2, 3]); // "1,2,3"

Util

Repeat an element multiple times

_.times(n, [iteratee=_.identity])

const dateParams = _.times(2, () => '2018-08-27');
console.log(dateParams) // ["2018-08-27", "2018-08-27"]