lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。或者说是 lodash 封装了很多 string、array、object 等常见数据类型的处理函数。

lodash 的模块化方法 非常适用于:

  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

lodash 的全局对象是 _.

安装

  1. bootCND bootCND 搜索 “lodash” 拷贝地址
  2. 官网下载文件 lodash 中文文档
  3. npm
  1. <!-- 留着偷懒直接复制粘贴 -->
  2. <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

一个快速查找工具

Lodash 个人使用文档来自掘金 (感谢刘三轮妹妹提供的地址)

数组

查找下标 _.indexOf(array, value, [fromIndex=0])

返回首次 value 在数组 array 中被找到的下标。

  1. _.indexOf([1, 2, 1, 2], 2); // 1

与之相似的是 _.lastIndexOf(array, value, [fromIndex=array.length-1]) 右到左遍历 array 的元素。

拆分数组 _.chunk(array, [size=1])

将 array 拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果 array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。很适合做发牌程序

_.chunk(['a', 'b', 'c', 'd'], 2); // => [['a', 'b'], ['c', 'd']] 
_.chunk(['a', 'b', 'c', 'd'], 3);// => [['a', 'b', 'c'], ['d']]

删除 n 个 item _.drop(array, [deleteCount=1])

创建一个切片数组,去除 array 前面的 n 个元素。

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

与之相似的还有 _.dropRight(array, [n=1]) 从右向左删。

查找满足条件的 item 的 index .findIndex(array, [predicate=.identity], [fromIndex=0])

返回找到元素的 index,否则返回 -1

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

_.findIndex(users, function(o) { return o.user == 'barney'; }); // => 0

_.findIndex(users, { 'user': 'fred', 'active': false }); // => 1

_.findIndex(users, ['active', false]); // => 0

_.findIndex(users, 'active'); // => 2

与之相似的 .findLastIndex(array, [predicate=.identity], [fromIndex=array.length-1]) 从后向前查找。

获取 array 中第一个 item _.head(array)

获取数组 array 的第一个元素。

_.head([1, 2, 3]); // => 1

_.head([]); // => undefined

与之相似的是 _.last(array) 获取array中的最后一个元素

扁平化 _.flattenDeep(array)

将array递归为一维数组。

_.flattenDeep([1, [2, [3, [4]], 5]]); // => [1, 2, 3, 4, 5]

与之相似的 _.flattenDepth(array, [depth=1]) 根据传入的参数扁平化层级。

删除数组中的最后一个元素_.initial(array)

获取数组array中除了最后一个元素之外的所有元素。

_.initial([1, 2, 3]); // => [1, 2]

交集 _.intersection([arrays])

查找交集。

_.intersection([2, 1], [4, 2], [1, 2]); // => [2]

去重 _.uniq(array)

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

去重并排序 _.sortedUniq(array)

_.sortedUniq([1, 1, 2]); // => [1, 2]

并集 _.union([arrays])

按顺序返回,返回数组的元素是唯一的。

_.union([2], [1, 2]); // => [2, 1]

差集 _.xor([arrays])

创建一个给定数组唯一值的数组。

_.xor([2, 1], [2, 3]); // => [1, 3]

数组转字符串 _.join(array, [separator=’,’])

将 array 中的所有元素转换为由 separator 分隔的字符串。类似于 join

_.join(['a', 'b', 'c'], '~'); // => 'a~b~c'

获取数组中第 n 个 item _.nth(array, [n=0])

获取array数组的第n个元素。

var array = ['a', 'b', 'c', 'd'];
_.nth(array, 1); // => 'b'
_.nth(array, -2); // => 'c';

移除 _.pullAllWith(array, values, [comparator])

接受 comparator 调用 array 中的元素和 values 比较。comparator 会传入两个参数:(arrVal, othVal)。会改变原数组。

var array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }];
_.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual);
console.log(array); // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]

移除 _.pullAt(array, [indexes])

根据索引 indexes,移除 array 中对应的元素,并返回被移除元素的数组。会改变原数组。

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
console.log(array); // => [5, 15]
console.log(evens); // => [10, 20]

移除 .remove(array, [predicate=.identity])

移除数组中 predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。predicate(断言) 会传入3个参数: (value, index, array)。会改变原数组。

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
console.log(array); // => [1, 3]
console.log(evens); // => [2, 4]

截取 _.slice(array, [start=0], [end=array.length])

同原生 slice

获取第二个及以后的所有 item _.tail(array)

获取除了 array 第一个元素以外的全部元素。

_.tail([1, 2, 3]); // => [2, 3]

截取 n 个 item _.take(array, [n=1])

创建一个数组切片,从 array 的起始元素开始提取 n 个元素。

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

与之相似的是 _.takeRight(array, [n=1]) 从后向前截取

删除 _.without(array, [values])

创建一个剔除所有给定值的新数组。

_.without([2, 1, 2, 3], 1, 2); // => [3]

字符串

转驼峰 _.camelCase([string=’’])

转换字符串 string 为驼峰写法

_.camelCase('Foo Bar'); // => 'fooBar'
_.camelCase('--foo-bar--'); // => 'fooBar'
_.camelCase('__FOO_BAR__'); // => 'fooBar'

首字母大写 _.capitalize([string=’’])

转换字符串首字母为大写,剩下为小写。

_.capitalize('FRED'); // => 'Fred'

同 _.upperFirst([string=’’])

转换大小写 .upperCase([string=’’]) 和 .lowerCase([string=’’])

转换字符串string以空格分开单词,并转换为小写。

_.lowerCase('--Foo-Bar--'); // => 'foo bar'
_.lowerCase('fooBar'); // => 'foo bar'
_.lowerCase('__FOO_BAR__'); // => 'foo bar'

与之相似的 .startCase([string=’’]) 和 .toUpper([string=’’])

字符串拆分 _.split([string=’’], separator, [limit])

据separator 拆分字符串string。

  1. [string=’’] (string): 要拆分的字符串。
  2. separator (RegExp|string): 拆分的分隔符。
  3. [limit] (number): 限制结果的数量。
    _.split('a-b-c', '-', 2); // => ['a', 'b']
    

    去除前后空格 _.trim([string=’’], [chars=whitespace])

    从string字符串中移除前面和后面的 空格 或 指定的字符。
    _.trim('  abc  '); // => 'abc'
    _.trim('-_-abc-_-', '_-'); // => 'abc'
    _.map(['  foo  ', '  bar  '], _.trim); // => ['foo', 'bar']
    
    与之相似的 .trimEnd([string=’’], [chars=whitespace]) 和 .trimStart([string=’’], [chars=whitespace])

集合

.every(collection, [predicate=.identity])

通过 predicate(断言函数) 检查 collection(集合)中的 所有 元素是否都返回真值。一旦 predicate(断言函数) 返回假值,迭代就马上停止。predicate(断言函数)调用三个参数: (value, index|key, collection)。对于空集合返回 true,因为空集合的任何元素都是 true

_.every([true, 1, null, 'yes'], Boolean); // => false

var users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred',   'age': 40, 'active': false }
];
_.every(users, { 'user': 'barney', 'active': false }); // => false
_.every(users, ['active', false]); // => true
_.every(users, 'active'); // => false

查找 .find(collection, [predicate=.identity], [fromIndex=0])

遍历 collection(集合)元素,返回 predicate(断言函数)第一个返回真值的第一个元素。predicate(断言函数)调用3个参数: (value, index|key, collection)

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.find(users, function(o) { return o.age < 40; }); // => object for 'barney'

_.find(users, { 'age': 1, 'active': true }); // => object for 'pebbles'
_.find(users, ['active', false]); // => object for 'fred'
_.find(users, 'active'); // => object for 'barney'

与之相似的 .findLast(collection, [predicate=.identity], [fromIndex=collection.length-1]) 右至左遍历

查找返回布尔值 _.includes(collection, value, [fromIndex=0])

检查 value 是否在 collection(集合) 中。

_.includes([1, 2, 3], 1); // => true
_.includes([1, 2, 3], 1, 2); // => false
_.includes({ 'user': 'fred', 'age': 40 }, 'fred'); // => true
_.includes('pebbles', 'eb'); // => true

排序 .orderBy(collection, [iteratees=[.identity]], [orders])

允许指定 iteratee(迭代函数)结果如何排序。 如果没指定 orders(排序),所有值以升序排序。 否则,指定为”desc” 降序,或者指定为 “asc” 升序,排序对应值。可以做扑克牌排序

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];
// 以 `user` 升序排序 再  `age` 以降序排序。
_.orderBy(users, ['user', 'age'], ['asc', 'desc']); // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

获取随机元素 _.sample(collection)

_.sample([1, 2, 3, 4]); // => 2

获得 n 个随机元素 _.sampleSize(collection, [n=1])

从集合中获得 n 个随机元素。

_.sampleSize([1, 2, 3], 2); // => [3, 1]
_.sampleSize([1, 2, 3], 4); // => [2, 3, 1]

打乱集合 _.shuffle(collection)

创建一个被打乱值的集合。

_.shuffle([1, 2, 3, 4]); // => [4, 1, 3, 2]

.some(collection, [predicate=.identity])

检查collection(集合)中的元素是否存在 任意 truthy(真值)的元素,一旦 predicate(断言函数) 返回 truthy(真值),遍历就停止。 predicate 调用3个参数:(value, index|key, collection)

_.some([null, 0, 'yes', false], Boolean); // => true

var users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred',   'active': false }
];
_.some(users, { 'user': 'barney', 'active': false }); // => false
_.some(users, ['active', false]); // => true
_.some(users, 'active'); // => true

语言

深克隆 _.cloneDeep(value)

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

判断相等 _.eq(value, other)

var object = { 'a': 1 };
var other = { 'a': 1 };

_.eq(object, object); // => true
_.eq(object, other); // => false
_.eq('a', 'a'); // => true
_.eq('a', Object('a')); // => false
_.eq(NaN, NaN); // => true

与之相似的

  1. _.gt(value, other) 检查 value 是否大于 other
  2. _.gte(value, other) 检查 value 是否大于或者等于 other
  3. _.lt(value, other) 检查 value 是否小于 other
  4. _.lte(value, other) 检查 value 是否小于等于 other

    转换为数字 _.toNumber(value)

    _.toNumber(3.2); // => 3.2
    _.toNumber(Infinity); // => Infinity
    _.toNumber('3.2'); // => 3.2
    

    转换为字符串 _.toString(value)

    转换 value 为字符串。 null 和 undefined 将返回空字符串。-0 将被转换为字符串”-0”。

    _.toString(null); // => ''
    _.toString(-0); // => '-0'
    _.toString([1, 2, 3]); // => '1,2,3'
    

    数学

  5. .add(6,4); // => 10_

  6. .subtract(6,4); // => 2_
  7. .multiply(6,4); // => 24_
  8. .divide(6,4); // => 1.5_
  9. .ceil(4.006); // => 5_
  10. .floor(4.006); // => 4_
  11. .max([4,2,8,6]); // => 8_
  12. .min([4,2,8,6]); // => 2_
  13. .mean([4,2,8,6]); // => 5_
  14. .sum([4,2,8,6]);// => 20_
  15. _.random(0,5);

链式

链式的好处在此不必多说了,先看官网的语法 _.chain(value) 表示创建一个lodash包装实例,包装value以启用显式链模式。要解除链必须使用_.value()

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

var youngest = _
.chain(users)
.sortBy('age')
.map(function(o) {
  return o.user + ' is ' + o.age;
})
.head()
.value();

行了就这了,国庆假期第一天我居然还在加班,而你们!在!玩!耍!