lodash 简介
lodash是一套工具库,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数。中文文档在此。
模块组成
- Lodash 提供的辅助函数主要分为以下几类:
- Array,适用于数组类型,比如填充数据、查找元素、数组分片等操作
- Collection,适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作
- Function,适用于函数类型,比如节流、延迟、缓存、设置钩子等操作
- Lang,普遍适用于各种类型,常用于执行类型判断和类型转换
- Math,适用于数值类型,常用于执行数学运算
- Number,适用于生成随机数,比较数值与数值区间的关系
- Object,适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作
- Seq,常用于创建链式调用,提高执行性能(惰性计算)
- String,适用于字符串类型
常用的方法
- times:循环N次
_.times(5, function(){
// ...
});
- cloneDeep:深度克隆JavaScript对象
var objB = _.cloneDeep(objA);
- random:在指定范围内获取一个随机值
_.random(20); // 返回 0 到 20的随机数
_.random(15, 20, true); // 返回 15 到 20的浮点型随机数;
- assign:扩展对象
var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};
_.assign(objA, objB););
- omit:从对象中删除属性
var objA = {"name": "colin", "car": "suzuki", "age": 17};
bjA = _.omit(objA, ['car', 'age']); // {"name": "colin"}
- forEach:对集合中的元素进行遍历,调 用function (迭代函数)遍历 collection中的每个元素,function如果显式的返回 false ,迭代会提前退出。
_.forEach(collection, function (value, index, collection){})
- map: 创建一个数组,value(值) 是 function(迭代函数)遍历 collection中的每个元素后返回的结果。某次迭代的返回值可能是null
_.map(collection, function (value, index, collection){})
- find: 返回 function(断言函数)第一个返回真值的第一个元素。如果没有匹配元素返回undefined
_.find(collection, function (value, index, 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');
// => object for 'barney'
- findIndex: 类似find,区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值(index),而不是元素本身。如果没有匹配元素返回-1
_.findIndex(collection, function (value, index, collection){})
- filter: 返回predicate(断言函数)返回真值 的所有元素的数组,返回值是一个新的过滤后的数组(浅拷贝), 不会改变原数组
_.filter(collection, function (value, index, 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']
_.filter(users, ['active', false]);
// => objects for ['fred']
- every: 通过 predicate(断言函数) 检查 collection(集合)中的 所有 元素是否都返回真值。如果都返回真值则函数最终返回true,否则返回false。
注意:这个方法对于对于空集合返回 true,因为空集合的任何元素都是 true 。
_.every(collection, function (value, index, collection){})
_.every([true, 1, null, 'yes'], Boolean);
// => false
- some: 通过 predicate(断言函数) 检查collection(集合)中的元素是否存在 任意 truthy(真值)的元素,一旦 predicate(断言函数) 返回 truthy(真值),遍历就停止, 返回true,否则返回false
_.some(collection, function (value, index, collection){})
_.some([null, 0, 'yes', false], Boolean);
// => true
- remove:移除数组中predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。这个方法会改变数组 array
_.remove(collection, function (value, index, collection){})
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]
- join: 将array中所有元素用separator 分隔符连接,返回该字符串
_.join(['a', 'b', 'c'], '~');
// => 'a~b~c'
- flatten:减少一级array的维度
_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]
- flattenDeep:将array递归为一维数组
_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]
- flattenDepth:根据 depth 递归减少 array 的嵌套层级
var array = [1, [2, [3, [4]], 5]];
_.flattenDepth(array, 1);
// => [1, 2, [3, [4]], 5]
_.flattenDepth(array, 2);
// => [1, 2, 3, [4], 5]
- sortBy:数组排序,这个方法执行稳定排序,相同元素会保持原始排序。
var users = [
{ 'user': 'fred', 'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 40 },
{ 'user': 'barney', 'age': 34 }
];
_.sortBy(users, function(o) { return o.user; });
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]
- orderBy:类似于_.sortBy,除了增加了一个参数orders指定)结果如何排序。指定为”desc” 降序,或者指定为 “asc” 升序,默认为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]]
- reverse:反转array, 会改变原数组
var array = [1, 2, 3];
_.reverse(array);
console.log(array);
// => [3, 2, 1]
- uniq:数组去重
_.uniq([2, 1, 2]);
// => [2, 1]
- uniqBy:类似 _.uniq ,除了它接受一个 iteratee (迭代函数),根据函数执行结果进行去重
_.uniqBy(collection, function (value){})
_.uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]
- forIn:遍历对象的自身和继承的可枚举属性。返回值是一个object,如果返回 false,iteratee 会提前退出遍历。
function Foo() {
this.a = 1;
this.b = 2;
}
Foo.prototype.c = 3;
_.forIn(new Foo, function(value, key) {
console.log(key);
});
// => Logs 'a', 'b', then 'c' (无法保证遍历的顺序)。
- chain:创建链式调用,解除链式调用并返回值使用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() //获取数组 array 的第一个元素。
.value();
- _.defer(func, [args]): 推迟调用func,直到当前堆栈清理完毕。 调用时,任何附加的参数会传给func。
_.defer(func, [args])
_.defer(function(stamp) {
console.log(_.now() - stamp);
}, _.now());
// => 记录延迟函数调用的毫秒数
- delay:延迟 wait 毫秒后调用 func。 调用时,任何附加的参数会传给func。
_.delay(function(text) {
console.log(text);
}, 1000, 'later');
// => 一秒后输出 'later'。
ES6替代
ES6里面有一些特性可以直接替代将lodash的方法:
- Map, find, filter, some, every, forEach:这些集合方法使数据转化变得轻而易举。
var test = array.map(function (value) {
return value.id + 10000
});
- head, tail:解构语法 让我们可以获取一个列表的头(head)和尾(tail),而无需工具函数。
_.head([1, 2, 3]);
// 1
_.tail([1, 2, 3]);
// [2, 3]
// 变为
const [head, ...tail] = [1, 2, 3];
更多见这篇文章。