知识点小记：🌟🌟🌟🌟 lodash的使用

Lodash是一个轻量级的JavaScript工具函数库，它方便了日常开发中对数据的操作，提高了开发效率。

​ 日常开发中，通常会对数据，特别是数组和对象进行各种读写等操作：比如去重，拷贝，合并，过滤，求交集，求和等等。根据平时开发中对数据的操作，我对Lodash常见的用法做了以下总结，方便今后的学习和整理。

lodash的引用

import _ from 'lodash'

用一个数组遍历来说明为什么要使用lodash

常规数组遍历

agent.forEach(function (n,key) {
    agent[key].agent_id = agent[key].agent_name;
    return agent;
})

使用lodash来遍历

_.forEach(agent,function(n,key) {

    agent[key].agent_id= agent[key].agent_name

})

这是一个常见的forEach的数组遍历，使用了lodash过后，_.forEach()这是一个值，而不是一个函数。就可以直接:

const arr = _.forEach();

这时候arr就是新的数组agent。而在常规的js数组遍历中，还需要考虑return的值和this的指向问题。虽然这样看起来，二者相差不大，但是在实际的开发过程中，熟练的使用lodash能大大的提高开发的效率。

再来总结一些lodash常用函数:

1.chunk，将数组进行切分。

const arr = [1,2,3,4,5,6,7,8,9];
_.chunk(arr,2);
// =>[[1,2],[3,4],[5,6],[7,8],[9]]

这个函数把数组按照一定的长度分开，返回新的数组。（片段化数组）

2.compact，去除假值。（将所有的空值，0，NaN过滤掉）

_.compact(['1','2',' ',0])
// => ['1','2']

对应的还有一个数组去重函数，这在实际的开发中很有作用。

3.uniq，数组去重。（将数组中的对象去重，只能是数组去重，不能是对象去重。）

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

这跟介绍的第二个函数compact有很好的配合作用。（后端接口传来的数据很多是有重复或者空值的，这时候就可以使用两个函数来过滤数据。ladash只是最基础的库，其实可以将几个函数封装起来组件自己的库。）

4.filter和reject，过滤集合，传入匿名函数。（二者放在一起讨论的原因是，两个函数类似但返回的值是相反。）

_.filter([1,2],x => x = 1)
// => [1]
 
_.reject([1,2],x => x=1)
// => [2]

这两个过滤器，第二个参数值是false的时候返回是reject的功能，相反是true的时候是filter。

5.map和forEach，数组遍历。（相似）

如果不明白map和forEach有什么相似的可以百度一下，简单说一下不同点就是，map的回调函数中是支持return返回值的。

不过二者都不改变原来的数组。

_.map([1,2],x => x+1)
// => [2,3]

推荐使用map

6.merge,参数合并。（merge函数像是Git的merge分支操作一样，将两个参数合并在一起。）

官网的解释是，递归的将源对象和继承的可枚举字符串监控属性合并到目标对象中。源对象从左到右引用，后续来源将覆盖以前来源的属性分配。

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

这里就像借用官网的代码来解释一下了。在实际开发中，前端在接口的请求可以merge一下之前的query和现在改变的查询的值，再去请求后端接口的数据。

7.cancat，数组连接

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
 
console.log(array);
// => [1]

可以接受多个参数，将多个参数合并为一个数组元素

8.keys ，取出对象中所有的key值组成新的数组。

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.keys(new Foo);
// => ['a', 'b'] (iteration order is not guaranteed)
 
_.keys('hi');
// => ['0', '1']

类似object.keys()，返回对象中可枚举属性的数组。

Array

Create

• 创建一个数组，元素为0, 1, 2, ... , 23

  _.range([start=0], end, [step=1])

  let arr = _.range(24)
  
  console.log(arr) // [0, 1, 2, 3, ... , 23]
  

• 创建一个数组，元素为100, 100, 100, 100, 100

  _.fill(array, value, [start=0], [end=array.length])

  let arr = _.fill(Array(5), 100)
  
  console.log(arr) // [100, 100, 100, 100, 100]
  

Read

• 获取数组中最后一个元素

  _.last(array)

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

• 获取数组中倒数第二个元素

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

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

• 获取对象数组中某一同名属性的属性值集合

  .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"]
  

• 获取对象数组中某一属性值最大的对象

  .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}}
  

• 找出两个数组中元素值相同的元素

  _.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]
  

• 求数值数组中元素值的平均数

  _.mean(array)

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

• 求对象数组中某个属性值的平均数

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

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

• 获取数组中前n个元素，不改变原数组

  _.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

• 删除数组中值为falsy的元素

  _.compact(array)

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

Format

• 去重。

  _.uniq(array)

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

• 排序。对象数组，根据对象中的某个属性的值，升序或降序排序

  .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}]
  

• 分割数组[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]为 [1, 2, 3, 4, 5] 和 [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]
  

• 脱掉一层[]

  _.flatten(array)

  let address = {
    '江苏省': ['南京市', '苏州市'],
    '浙江省': ['杭州市', '绍兴市']
  }
  let cities = _.flatten(_.values(address))
  
  console.log(cities) // ["南京市", "苏州市", "杭州市", "绍兴市"]
  

• 将多维数组转为一维数组

  _.flattenDeep(array)

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

Object

Create

• 通过数组["x", "y"] 和 数组[10, 10] 创建对象 {x: 10, y: 10}

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

  let keys = ["x", "y"]
  let values = [10, 10]
  let obj = _.zipObject(keys, values) 
  
  console.log(obj) // {x: 10, y: 10}
  

• 合并对象

  _.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: ""}
  

• 深拷贝对象

  _.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]}}
  

• 合并多个对象中key值相同的键值对

  _.merge(object, [sources])

  let obj1 = {'9': {name: '乐购超市'}}
  let obj2 = {'9': {storeToken: 'xxx'}}
  let obj3 = {'9': {storePosition: 'Hangzhou'}}
  let mergedObj = _.merge(obj1, obj2, obj3) 
  
  console.log(mergedObj)
  // 9: {name: "乐购超市", storeToken: "xxx", storePosition: "Hangzhou"}
  

Read

• 判断对象中是否有某个属性

  _.has(object, path)

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

• 获取对象中的某个属性的值

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

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

Update

• 设置对象中的某个属性的值

  _.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
  

• 对多个对象相同属性的属性值求和。

  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

• 生成一个随机数，范围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

• 判断数据类型

  _.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));
  

• 数据类型转换

  • _.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

• 重复多次某个元素

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

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