Lodash

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];

更多见这篇文章。

参考

• http://www.jianshu.com/p/7436e40ac5d1
• http://www.css88.com/doc/lodash/
• http://www.zcfy.cc/article/10-lodash-features-you-can-replace-with-es6-467.html