Lodash常用用法总结

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

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

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"]
    
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 2,689评论 0 3
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,118评论 0 13
  • 1、新的声明方式 以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种...
    令武阅读 996评论 0 7
  • 转载:在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总...
    七色烟火阅读 3,207评论 0 3
  • 需要在ubnt的路由里面设置一条定向路由
    水泥中的鱼阅读 1,321评论 0 0