👇👇lodash.js常用方法

lodash.js官网 www.lodashjs.com/docs/

安装

npm i --save lodash

使用

import _ from 'lodash' // 引入全部方法
import map from 'lodash/map' // 引入具体的单个方法

const users = [
  { 'user': 'barney',  'age': 36, status: 1, count: 44.66 },
  { 'user': 'fred',    'age': 20, status: 0, count: 100.66 },
  { 'user': 'pebbles', 'age': 1, status: 1, count: 8.6688 }
]

console.log(_.map(users, 'user')) // ['barney', 'fred', 'pebbles']
console.log(map(users, 'user')) // ['barney', 'fred', 'pebbles']

数组

1_.findIndex 返回符合给定条件的索引值, 如果是一维数组使用_.indexOf([1, 2, 1, 2], 2)
(可以用来匹配后端返回的图表数据)

// 后端返回的数据(顺序不一致,数据有缺失的情况)
const saleData = [
  { title: 'barney',  data: [1] },
  { title: 'fred',    data: [2] },
  { title: 'pebbles', data: [3] }
];
// 实际的顺序
const saleTilte = ['fred', 'pebbles', 'barney', 'nodata']

const chartData = []
saleTilte.forEach(item => {
  const index = _.findIndex(saleData, (o) => { return o.title == item })
  // console.log(index)
  if (index > -1) {
    chartData.push(saleData[index].data)
  } else {
    chartData.push([])
  }
})
 console.log(chartData) // 0: [2]  1: [3]  2: [1]  3: []

2. _.fill(array, value, start, end)替换数组range范围内元素,会改变原数组 (类似splice)

 const arr = [
      {
        title: 'slien', age: 20
      },
      {
        title: 'juxi', age: 23
      },
      {
        title: 'xiaom', age: 21
      }
    ]
    _.fill(arr, { title: '小明', age: 25 }, 1, 2)

    console.log(arr) // [{title: 'slien', age: 20} {title: '小明', age: 25} {title: 'xiaom', age: 21}]

3. _.uniqBy根据指定条件去重 (限制选择重复项) 👍

const sameArr = [
    { title: 'barney' },
    { title: 'fred' },
    { title: 'pebbles' },
    { title: 'fred' },
    { title: 'pebbles' }
]
const sameData = _.uniqBy(sameArr, 'title')

console.log(sameData) // [{title: 'barney'} {title: 'fred'} {title: 'pebbles'}]

4. _.remove 删除满足指定条件的数组,会改变原数组,返回删除的数据(数据删除)

const users = [
      { 'user': 'barney',  'age': 36 },
      { 'user': 'fred',    'age': 40 },
      { 'user': 'pebbles', 'age': 1 }
    ]

    const result = _.remove(users, (n) => n.age > 30)
    console.log(users, result) // [{user: 'pebbles', age: 1}], [{user: 'barney', age: 36} {user: 'fred', age: 40}]

集合

1. _.every集合中所有原素是否都返回真值 (子级多选框全部选中后,父级选中;状态判断)

const users = [
      { 'user': 'barney',  'age': 36, status: 1 },
      { 'user': 'fred',    'age': 40, status: 1 },
      { 'user': 'pebbles', 'age': 1, status: 1 }
    ]

    const isShow = _.every(users, ['status', 1])
    const isShow2 = _.every(users, (n) => n.status === 0)
    console.log(isShow, isShow2) // true false

2. _.find 返回数组中第一项匹配指定条件的元素 (选项中限制选择某一项,判断对象数组中是否存在某个对象属性) _.findLast 从右到左遍历 👍

     const sameArr = [
        { title: 'barney', age: 99 },
        { title: 'fred' },
        { title: 'pebbles' },
        { title: 'fred' },
        { title: 'pebbles' }
      ]
      // 判断数组中是否有title为barney的数据
      // 传统写法
      const titles = sameArr.map(item => item.title)
      const hasTitle = titles.includes('barney')
      
      const notSelect = _.find(sameArr, ['title', 'barney'])
      console.log(notSelect) // { title: 'barney', age: 99 } 如果匹配不上返回undefined

3. _.groupBy 通过传入key生成一个对象,key对应的数据是集合中匹配条件的数据 (重复类型的整合) 👍

const salesData = [
      { title: '增信文件', data: [1, 2, 3] },
      { title: '增信文件', data: [11, 22, 33] },
      { title: '投资文件', data: [4, 5, 6] },
      { title: '服务文件', data: [7, 8, 9] },
    ]

    const a = _.groupBy(salesData, 'title')
    console.dir(a) // { 增信文件: (2) [{…}, {…}] 投资文件: [{…}] 服务文件: [{…}] }
    console.dir(a['增信文件']) // [{title: '增信文件', data: Array(3)} {title: '增信文件', data: Array(3)}]

4. _.includes检查值是否存在集合中,可以检查数组,对象,字符串

 console.log(_.includes([1, 2, 3], 4))  // false
    console.log(_.includes({ 'user': 'barney',  'age': 36, status: 1 }, 36)) // true
    console.log(_.includes('barney', 'b')) // true

5. _.filter 返回满足条件的数组 _.reject返回不满足条件的数组

   const users = [
      { 'user': 'barney',  'age': 36, status: 1 },
      { 'user': 'fred',    'age': 40, status: 0 },
      { 'user': 'pebbles', 'age': 1, status: 1 }
    ]

    const result = _.reject(users, ['status', 1])
    const result2 = _.filter(users, ['status', 1]) 
    console.log(result)  // [{user: 'fred', age: 40, status: 0}]
    console.log(result2) // [{user: 'barney', age: 36, status: 1},{user: 'pebbles', age: 1, status: 1}]

6. _.orderBy 数组排序,升序'asc'降序'desc'

 const users = [
  { 'user': 'barney',  'age': 36 },
  { 'user': 'fred',    'age': 40 },
  { 'user': 'pebbles', 'age': 1 }
]
console.log(_.orderBy(users, 'age')) 
// [{user: 'pebbles', age: 1},{user: 'barney', age: 36},{user: 'fred', age: 40}]
console.log(_.orderBy(users, 'age', 'asc'))
// [{user: 'pebbles', age: 1},{user: 'barney', age: 36},{user: 'fred', age: 40}]
console.log(_.orderBy(users, 'age', 'desc'))
// [{user: 'fred', age: 40},{user: 'barney', age: 36},{user: 'pebbles', age: 1}]

函数

1. _.debounce 防抖动函数,该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法 (输入框搜索) 👍

// 输入1s后调用sendMail方法
jQuery(element).on('input', _.debounce(sendMail, 1000))

2. _.throttle 节流函数,在 wait 秒内最多执行 func 一次的函数

// 1s输入内只调用一次sendMail方法
jQuery(element).on('input', _.throttle(sendMail, 1000))

3. _.once 创建一个只能调用 func 一次的函数。 重复调用返回第一次调用的结果 (设置页面初始值) 👍

    const initValue = _.once(() => {
      console.log('我被调用了')
      return {
        a: 1,
        b: 2
      }
    })
    console.log(initValue()) // 打印一次 '我被调用了' {a: 1, b: 2}
    console.log(initValue()) // 不会调用函数,不会打印,获取第一次调用的值 {a: 1, b: 2}
    console.log(initValue()) // 不会调用函数,不会打印,获取第一次调用的值 {a: 1, b: 2}

语言

1. _.cloneDeep 深拷贝对象

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

2. _.isArray 检查是否是对象 _.isArrayLike检查是否是类对象

console.log(_.isArray(users)) // true
console.log(_.isArray('users')) // false

console.log(_.isArrayLike('users')) // true

3. _.isEmpty 检查 value 是否为一个空对象，集合，映射或者set。 判断的依据是除非是有枚举属性的对象，length 大于 0 的 arguments object, array, string 或类jquery选择器。 (判断空对象和空数组) 👍

console.log(_.isEmpty('')) // true
console.log(_.isEmpty(' ')) // false
console.log(_.isEmpty(undefined)) // true
console.log(_.isEmpty(0)) // true
console.log(_.isEmpty([])) // true
console.log(_.isEmpty({})) // true

4. _.isFunction 检查是否是一个函数

console.log(_.isFunction('a')) // false
console.log(_.isFunction(() => {})) // true

5. _.toNumber转为number类型 _.toString转为string类型

 console.log(_.toNumber('1')) // 1
console.log(_.toNumber(Infinity), _.isNumber(_.toNumber(Infinity))) // Infinity true

console.log(_.toString(1)) // '1'
console.log(_.toString(Infinity), _.isString(_.toString(Infinity))) // 'Infinity' true

数学

1. _.ceil 根据 precision（精度） 向上舍入 number。_.floor 根据 precision（精度） 向下舍入 number

_.ceil(4.006); // => 5
_.ceil(6.004, 2); // => 6.01
_.ceil(6040, -2); // => 6100

_.floor(4.006); // => 4
_.floor(0.046, 2); // => 0.04
_.floor(4060, -2); // => 4000

2. _.divide 两数相除

_.divide(6, 4);
// => 1.5

3. _.max 计算 array 中的最大值。 _.maxBy 根据传入的计算标准计算 array 中的最大值

const users = [
  { 'user': 'barney',  'age': 36 },
  { 'user': 'fred',    'age': 40 },
  { 'user': 'pebbles', 'age': 1 }
]
console.log(_.max([1, 3, 5])) // 5

console.log(_.maxBy(users, (o) => o.age)) // {user: 'fred', age: 40}

4. _.min 计算 array 中的最小值。 _.minBy 根据传入的计算标准计算 array 中的最小值

const users = [
  { 'user': 'barney',  'age': 36 },
  { 'user': 'fred',    'age': 40 },
  { 'user': 'pebbles', 'age': 1 }
]
console.log(_.min([1, 3, 5])) // 1
console.log(_.minBy(users, (o) => o.age)) // {user: 'pebbles', age: 1}

5. _.sum 计算 array 的和。 _.sumBy 根据传入的计算标准计算 array 中的和 👍

const users = [
  { 'user': 'barney',  'age': 36 },
  { 'user': 'fred',    'age': 40 },
  { 'user': 'pebbles', 'age': 1 }
]
console.log(_.sum([1, 3, 5])) // 9
console.log(_.sumBy(users, (o) => o.age)) // 77

对象

1. .assign 分配来源对象的可枚举属性到目标对象上。.assignIn 这个方法类似_.assign， 除了它会遍历并继承来源对象的属性。会改变源数据

 function Foo() {
    this.a = 1;
  }
  const bar = {
    c: 8
  }
  Foo.prototype.b = 2;
  console.log(_.assign({ 'a': 0 }, new Foo, bar)) // {a: 1, c: 8}
  console.log(_.assignIn({ 'a': 0 }, new Foo, bar)) // {a: 1, b: 2, c: 8}

2. _.defaults 获取传入对象中原对象没有的属性. 有相同属性不会被覆盖(对象数据来源多个对象,可以避免值覆盖)

const product = {
  id: 1,
  name: '产品',
}
const sale = {
  id: 2,
  amount: 100
}
const types = {
  id: 3,
  color: 'red'
}

const result = _.defaults(product, sale, types)
console.log(result) // {id: 1, name: '产品', amount: 100, color: 'red'}

3. 对象遍历 _.forIn 使用 iteratee 遍历对象的自身和继承的可枚举属性 .forInRight同.forIn 顺序是从右往左
   _.forOwn 使用 iteratee 遍历自身的可枚举属性 .forOwnRight同.forOwn 顺序是从右往左

 function Foo() {
    this.a = 1
    this.b = 2
  }
  Foo.prototype.c = 3

  _.forIn(new Foo, (value, key) => {
    console.log(value, key)
  })
  // 1 'a'
  // 2 'b'
  // 3 'c'
  _.forInRight(new Foo, (value, key) => {
    console.log(value, key)
  })
  // 3 'c'
  // 2 'b'
  // 1 'a'

  _.forOwn(new Foo, (value, key) => {
    console.log(value, key)
  })
  // 1 'a'
  // 2 'b'
  _.forOwnRight(new Foo, (value, key) => {
    console.log(value, key)
  })
  // 2 'b'
  // 1 'a'

4. _.omit 忽略对象属性 (提交数据时,不提交某些属性) 👍

const info = {
    id: 2,
    name: 'jelli',
    age: 18,
    status: 1,
    remark: '666'
  }
  const result = _.omit(info, ['status', 'remark'])
  console.log(result) // {id: 2, name: 'jelli', age: 18}

5. _.pick 选取对象属性 _.omit的反向方法 👍

 const info = {
    id: 2,
    name: 'jelli',
    age: 18,
    status: 1,
    remark: '666'
  }
  const result = _.pick(info, ['status', 'remark'])
  console.log(result) // {status: 1, remark: '666'}

6. _.set修改对象属性 _.update可以传入修改函数 会改变源对象

const info = {
    id: 2,
    name: 'jelli',
    age: 18,
    status: 1
  }
   _.set(info, 'age', 22)
  _.update(info, 'status', (o) => o + 1)
  console.log(info) // {id: 2, name: 'jelli', age: 22, status: 2}

字符串

1. _.capitalize 转换字符串string首字母为大写，剩下为小写 _.lowerFirst转换首字母为小写,剩下的不变 _.upperFirst转换首字母为大写,剩下的不变

console.log(_.capitalize('test test TEST')) // Test test test

console.log(_.upperFirst('test test TEST')) // Test test TEST

console.log(_.lowerFirst('Test Test TEST')) // test Test TEST

2. _.parseInt将字符串转换为整数

_.parseInt('08');
// => 8
 
_.map(['6', '08', '10'], _.parseInt);
// => [6, 8, 10]

3. _.trim 从string字符串中移除前面和后面的 空格 或 指定的字符 _.trimEnd移除后面的空格 _.trimStart移除前面的空格 👍

console.log(_.trim('  abc ')) // abc
console.log(_.trim('_ abc ', '_')) //  abc 有空格
console.log(_.trim('_ abc ', '_ ')) // abc 无空格

console.log(_.trimStart(' abc')) // abc
console.log(_.trimStart('_ abc _', '_ ')) // abc _ 

console.log(_.trimEnd('abc ')) // abc
console.log(_.trimEnd('_ abc _', '_ ')) // _ abc

4. _.truncate 截断string字符串，如果字符串超出了限定的最大值。 被截断的字符串后面会以 omission 代替，omission 默认是 "..." (文字超出省略)👍

const result = _.truncate('hi-diddly-ho there, neighborino ');
const result1 = _.truncate('hi-diddly-ho there neighborino 如果字符串超出了限定的最大值。 被截断', {
'length': 30,
'separator': ' ' // 空格处截断
})
const result2 = _.truncate('hi-diddly-ho there, neighborino 如果字符串, 超出了限定的最大值。 separator, 截断点', {
'length': 50, // 超过50个字符
'separator': /,? +/ // 逗号处截断
})
console.log(result) // hi-diddly-ho there, neighbo...
console.log(result1) // hi-diddly-ho there...
console.log(result2) // hi-diddly-ho there, neighborino 如果字符串...

链式调用 👍 👍

lodash的方法支持链式调用,创建一个lodash对象，包装value后的对象启用隐式方法链。返回的数组、集合、方法相互之间能够链式调用,要解除链必须使用_#value 方法

const users = [
  { 'user': 'barney',  'age': 36, status: 1, count: 44.66 },
  { 'user': 'fred',    'age': 20, status: 0, count: 100.66 },
  { 'user': 'pebbles', 'age': 1, status: 1, count: 8.6688 }
]

// 获取年龄排序后数组第一项
const youngest = _
  .chain(users)
  .sortBy('age')
  .head()
  .value() // 需要调用value()方法解除链式调用

console.log(youngest) // {user: 'pebbles', age: 1, status: 1, count: 8.6688}

// 获得count相加的和
const sum = _
  .chain(users)
  .sumBy('count')
  .parseInt()
  .value()

console.log(sum) // 153

// 判断xiaomi是否存在users数组中
const hasExit = _
  .chain(users)
  .map('user')
  .includes('xiaomi')
  .value()

console.log(hasExit) // false