陪你读一遍lodash(一)

在平常开发中,大家一定会对数组,类数组,对象等数据结构进行复杂处理。lodash提供了强大的功能帮助你解决这些难题。官网对lodash的定义是这样的“这是一个具有一致接口、模块化、高性能等的 JavaScript 工具库”。整个库只暴露一个,'_'也就是lodash对象,类似于jquery的($)。而且其函数式编程的风格,不会污染原始数组。我在开发中一直在使用lodash的方法,但是没有系统的读过lodash的API,有些功能实现时候发现lodash可能很容易的一句话就能做到,俗话说,工欲善其事必先利其器。因此打算系统的学习一下,从头到尾撸一遍lodash,算是做一个学习笔记,我会借鉴lodash的官方API以及结合源码和大家一起详细研究一下这个工具箱,如果有翻译错误,或者理解错误的地方非常感谢各位大神、前辈批评指正。

一、Array Methods(数组方法)

  1、_.chunk(arr,size)
   创建一个新数组,将传入的数组深复制到新数组中,将新数组拆分成几个子数组,并返回整个新数组。
   arr:传入的数组(允许字符串),如果传入的参数没有length属性,返回空数组;
   size:划分的子数组的长度(不传默认为1),如果是非正数,返回空数组;如果是正小数,size=parseInt(size);
  * // => [['a', 'b'], ['c', 'd']]
  *
  * _.chunk(['a', 'b', 'c', 'd'], 3);
  * // => [['a', 'b', 'c'], ['d']]
 2、_.compact(arr)
 创建一个新数组,将入参数组中非假的值加到新数组中,并返回新数组。
arr:传入的数组。如果传入字符串,得到的效果类似对字符串执行split(' ')方法。
   * // => [1, 2, 3]```

3、_concat(arr,[values])
  创建一个新的数组,将入参的数组和之后传入的参数加到新数组中,并返回新的数组,类似数组的concat()方法。
arr:传入的数组。
[values]:额外的值。
```    * var array = [1];
   * var other = _.concat(array, 2, [3], [[4]]);
   *
   * console.log(other);
   * // => [1, 2, 3, [4]]
   *
   * console.log(array);
   * // => [1]

4、difference(arr,[values])
类似
.difference方法,创建一个新数组,将入参数组深复制新数组,将去掉数组中与第二个参数数组相同的值,返回新数组。
arr:传入的数组(如果入参不是数组结果会返回一个空数组)。
[values]:过滤参数。
简单来说,这个方法返回的是传入第一个数组的子集或者本身。
* _.difference([3, 2, 1], [4, 2]);
* // => [3, 1]

5、.differenceBy(arr, [values],[iteratee=.identity]
)
创建一个新数组,将如参数组深复制新数组,使用第三个参数(遍历器方法),对第二个参数进行运算,将处理之后的参数执行_.difference方法。

   [values]:额外的参数
   [iteratee=_.identity]:运算规则
  * _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
  * // => [{ 'x': 2 }]
  * _.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
  * // => [3.1, 1.3]

6、.differenceWith(arr, [values], [comparator])
类似
.difference方法,创建一个新数组,将入参数组深复制到新数组,通过第三个参数,对前两个入参进行组合,返回一个新数组
arr:传入的数组
[values]:额外的参数
[comparator]:运算规则
* _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual); * // => [{ 'x': 2, 'y': 1 }]

注意:.differenceBy和.differenceWith的区别是:
The iteratee is invoked with one argument: (value).
The comparator is invoked with two arguments:(arrVal, othVal).
简单来说就是,第三个方法只会对.differenceBy方法中的第二个参数进行处理,但是会对.differenceWith方法中的前两个入参都进行处理。

7、_.drop(arr, [n])
创建一个数组,将入参数组深复制到新数组,将新数组从头开始删除n个元素,返回新数组。
arr:传入的数组
n:需要删除的元素个数

    * // => [2, 3]
    *
    * _.drop([1, 2, 3], 2);
    * // => [3]
    *
    * _.drop([1, 2, 3], 5);
    * // => []
    *
    * _.drop([1, 2, 3], 0);
    * // => [1, 2, 3]```

8、_.dropRight(arr, [n])
   与_.drop类似,区别就是从尾部删除n个元素。
   arr:传入的数组
   n:需要删除元素的个数
  ``` * _.dropRight([1, 2, 3]);
    * // => [1, 2]
    *
    * _.dropRight([1, 2, 3], 2);
    * // => [1]
    *
    * _.dropRight([1, 2, 3], 5);
    * // => []
    *
    * _.dropRight([1, 2, 3], 0);
    * // => [1, 2, 3]```

   9、_.fill(arr, value, [start], [end)
     创建一个数组,将入参数组深复制到新数组,对新数组的元素进行替换,如果传入第三个第四个值则根据索引值进行替换,如果没有传入第三个第四个参数则默认将数组所有元素都替换成第二个元素。
     arr:传入的数组。
     value:替换的值。
     start:开始的索引(包括),默认为0
     end:结束的索引(不包括),默认为数组的长度
       ``` * var array = [1, 2, 3];
    *
    * _.fill(array, 'a');
    * console.log(array);
    * // => ['a', 'a', 'a']
    *
    * _.fill(Array(3), 2);
    * // => [2, 2, 2]
    *
    * _.fill([4, 6, 8, 10], '*', 1, 3);
    * // => [4, '*', '*', 10]```

10、_.flatten(arr)
     创建一个数组,将入参数组深复制到新数组,将新数组的层级减一,返回新数组。
     arr:传入的数组。
  ```  * _.flatten([1, [2, [3, [4]], 5]]);
    * // => [1, 2, [3, [4]], 5]```

11、_.flattenDeep(arr)
       创建一个数组,将入参数组深复制到新数组,将数组递归的执行层级减一,直到深    度为一。简单来说就是将数组中层叠的数组全部解开。
     arr:传入的数组。
   ```   * _.flattenDeep([1, [2, [3, [4]], 5]]);
      * // => [1, 2, 3, 4, 5]---+9```

12、_.flattenDepth(array, [depth=1])
     创建一个数组,将入参数组深复制到新数组,递归的执行数组层级减n次。
     arr:传入的数组。
     depth:减少的层级数(默认为1)。
   ``` * var array = [1, [2, [3, [4]], 5]];
    *
    * _.flattenDepth(array, 1);
    * // => [1, 2, [3, [4]], 5]
    *
    * _.flattenDepth(array, 2);
    * // => [1, 2, 3, [4], 5]。```
这一篇就先到这,接下来会继续陪大家;读lodash,希望大家多多指教。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,579评论 18 139
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • ——嗯 。 ——是什么? ——高中时代的爱情吧。 ——为什么? ——大概是,我喜欢他...
    _charon_cc阅读 170评论 0 1
  • 你,还是那个模样 噙着笑 坐在同样的位置 只是我不敢靠近 不敢触碰 怕一碰 梦 就破了
    守望海洋的猫阅读 196评论 2 8
  • npm install express --registry=https://registry.npm.taoba...
    圣手小青龙阅读 156,770评论 6 66