lodash 学习笔记

中文 - https://www.lodashjs.com/docs/latest

英文- https://lodash.com/docs/4.17.15

1、作用

lodash是一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数。

2、组成

lodash :全部功能

lodash.core:只有核心的一些函数,详细见这儿https://github.com/lodash/lod...

lodash.fp :全部功能的函数式实现,文档见 https://github.com/lodash/lodash/wiki/FP-Guide

lodash.fp 暂不介绍(待写)

3、竞品比较

Lodash最初是 Underscore 的分支,后来逐渐壮大后自立门户。

Lodash 功能比 Underscore 更丰富,且 Underscore 已有3、4年没有更新,所以推荐使用 Loadash。

二、安装 1、browser <script src="http://www.likecs.com/lodash.js"></script>

CDN:

https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js

2、Node.js

npm i lodash

// Load the full build. var _ = require('lodash'); // Load the core build. var _ = require('lodash/core'); // Load method categories. var array = require('lodash/array'); // Load method. var chunk = require('lodash.chunk'); 三、使用

注:本人装的是 latest 版本,_.VERSION可查看版本号,为4.17.15。

下面介绍的方法,是一些我认为属于重难点的、常用的。并有一些解释借鉴了 underscore 文档。

1、Array (1)集合运算

intersection - 交集

union - 并集

difference - ( A - B )

xor - 只要一个元素出现两次及以上,则 remove 掉,其他的元素合并成一个新数组。

(2)difference

difference - 没有第三个参数

differenceBy - 第三个参数传的是 iteratee (value)

differenceWith - 第三个参数传的是 comparator (arrVal, othVal)

// 1、difference _.difference([3, 2, 1], [4, 2]); // => [3, 1] // 2、differenceBy _.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor); // => [3.1, 1.3] // 3、differenceWith var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual); // => [{ 'x': 2, 'y': 1 }]


注:x、xBy、xWith 这三种模式在别的很多方法中也有体现。如 pullAll / pullAllBy / pullAllWith。

(3)drop

drop - 从数组左边 remove 元素,可指定个数

dropRight - 从数组右边 remove 元素,可指定个数

dropWhile - 从数组左边 按条件 remove 元素,遇到条件不符合则终止

dropRightWhile - 从数组右边 按条件 remove 元素,遇到条件不符合则终止

这里是 遇到条件不符合则终止,若想 遇到条件不符合不终止,也就没有左右之分,一律用 filter 替换即可。


注:x、xWhile 这两种模式在别的很多方法中也有体现。如 zip / zipWith。

(4)几种 删数组元素的方法

1、提供另一些 元素/数组/索引 来删除

without(提供元素)- 不改变原数组

difference(提供数组) - 不改变原数组

pull(提供元素)/pullAll(提供数组)/ pullAt (提供索引)- 改变了原数组

2、单纯针对原数组去删除

filter - 不改变原数组

remove - 改变了原数组

所以 lodash 提供的方法也不都是 Immutable 的。

(5)remove 类空值

remove 掉: false, null, 0, "", undefined, 和 NaN 。

_.compact([0, 1, false, 2, '', 3]);// => [1, 2, 3] 2、Collection

集合函数能在数组,对象,和类数组对象,比如 arguments, NodeList 和类似的数据类型 (如 string) 上正常工作。

但是它通过鸭子类型工作,所以要避免传递一个不固定length属性的对象。

拓展:什么是鸭子类型?

原话:“当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子,那么这只鸟就可以被称为鸭子。”

所以鸭子类型关注点在对象的行为,而不是类型

怎么有种 “不管黑猫白猫,抓住老鼠就是好猫” 的既视感。

(1)判断

every - 全都符合返回 true

some - 只要一条符合返回 true

注意:上面对空集合还是会返回 true。

(2)筛选

filter - 正

reject - 反

partition - 同时输出正与反

(3)排序

sortBy - 只能升序

orderBy - 可升序可降序

(4)遍历

forEach / forEachRight

_([1, 2]).forEach(function(value) { console.log(value); }); // => Logs `1` then `2`. _.forEach({ 'a': 1, 'b': 2 }, function(value, key) { console.log(key); }); // => Logs 'a' then 'b' (iteration order is not guaranteed). (5)遍历输出

map

invokeMap - this 相当于 map 的 item,此外还可以额外传入多个参数参与运算

function square(item) { return item * item; } function invokeSquare(n, m) { return this * n * m; } re1 = _.map([1, 2], square); re2 = _.invokeMap([1, 2], invokeSquare, 2, 3); console.log(re1); // [ 1, 4 ] console.log(re2); // [ 6, 12 ]

还有类似 map 的 flatMap/flatMapDeep/flatMapDepth ,在 map 的基础上实现扁平化。

(6)聚合

countBy - 只算出现的次数

groupBy - 囊括出现的内容

keyBy - 自定义程度更高

(7)迭代归纳

reduce 和transform

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zygjgp.html