优美编程WEB前端程序开发Web前端之路

相见恨晚的loadsh函数-Collection

2019-10-05  本文已影响0人  小遁哥

Lodash 中文文档 打开开发者工具,可以直接在控制台调试。

Collection 中的函数特点是,至少可以处理 Array、Object、String的两种,里面的方法运用再实际开发中,可以做到高效简洁。

0 .keyBy(collection, [iteratee=.identity])

常见的场景是将一维数组转换为id为key值的对象

var array = [
  { 'dir': 'left', 'code': 97 ,id:12},
  { 'dir': 'right', 'code': 100 ,id:14}
];
_.keyBy(array,"id")
// 12: {dir: "left", code: 97, id: 12}
// 14: {dir: "right", code: 100, id: 14} 

官网例子

var array = [
  { 'dir': 'left', 'code': 97 },
  { 'dir': 'right', 'code': 100 }
];
 
_.keyBy(array, function(o) {
  return String.fromCharCode(o.code);
});
// => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
 
_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }

1 .countBy(collection, [iteratee=.identity])

统计value出现的次数

_.countBy({name:1,age:2,klo:2});
// {1: 1, 2: 2}
_.countBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': 1, '6': 2 }
 
// The `_.property` iteratee shorthand.
_.countBy(['one', 'two', 'three'], 'length');
// => { '3': 2, '5': 1 }


根据value分组 _.groupBy

2 .forEach(collection, [iteratee=.identity])

iteratee 调用3个参数: (value, index|key, collection)

不同Es6 的forEach返回false可以停止循环,回调参数
可以处理数组和集合

_([1, 2]).forEach(function(value) {
  console.log(value);
});
// => Logs `1` then `2`.
 
_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});

从右到左遍历集合中每一个元素的。 .forEachRight(collection, [iteratee=.identity])

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

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

注意: 这个方法对于对于 空集合返回 true,因为空集合的 任何元素都是 true

检测是否包含指定的{key:value}

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

_.every(users, { 'age': 40, 'active': false });
// true

检测是否包含指定的[key,value]

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

_.every(users,  ['active', false,"age",40]);
// true

检测key值对应的value能否转换为true

也可以检测对象是否有指定的key值

var users = [
  { 'user': 'barney', 'age': 0, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': true }
];

_.every(users, 'age');
// false
_.every(users, 'user','active');
// true

_.some

4 .filter(collection, [predicate=.identity])

相比Es6 ,能处理数组和对象,以及一些简易的处理

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

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
 
// The `_.matches` iteratee shorthand.
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.filter(users, ['active', false]);
// => objects for ['fred']
 
// The `_.property` iteratee shorthand.
_.filter(users, 'active');
// => objects for ['barney']

_.map
_.reduce
_.reduceRight

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

相比Es6 ,能处理数组和对象,以及一些简易的处理

遍历 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'
 
// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'
 
// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'

是从右至左遍历collection (集合)元素的。 _.findLast

检查 value(值) 是否在 collection(集合) 中 _.includes

6 .flatMap(collection, [iteratee=.identity])

创建一个扁平化(同阶数组)的数组,这个数组的值来自collection(集合)中的每一个值经过 iteratee(迭代函数) 处理后返回的结果,并且扁平化合并。 iteratee 调用三个参数: (value, index|key, collection)。

function duplicate(n) {
  return [n, n];
}
 
_.flatMap([1, 2], duplicate);
// => [1, 1, 2, 2]

继续扁平化递归映射的结果 .flatMapDeep

根据指定的 depth(递归深度)继续扁平化递归映射结果 flatMapDepth

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

如果没指定 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]]

_.sortBy

8 _.sample(collection)

从collection(集合)中获得一个随机元素。

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

_.sampleSize 从collection(集合)中获得 n 个随机元素。

9 _.shuffle(collection)

创建一个被打乱值的集合

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

10 _.size(collection)

返回collection(集合)的长度,如果集合是类数组或字符串,返回其 length ;如果集合是对象,返回其可枚举属性的个数。

_.size({12:{},14:{}})
// 2
_.size([1, 2, 3]);
// => 3
 
_.size({ 'a': 1, 'b': 2 });
// => 2
 
_.size('pebbles');
// => 7

结合_.keyBy,可以判断id是否重复

上一篇 下一篇

猜你喜欢

热点阅读