共计 4373 个字符,预计需要花费 11 分钟才能阅读完成。
loadsh 简介
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法 非常适用于:
遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数
1、lodash 的引用
npm i -g npm
npm i –save lodash
import _ from ‘lodash’
2、lodash 的常用方法
数组 Array
_.difference(array, [values]) 创建一个具有唯一 array 值的数组,每个值不包含在其他给定的数组中。(愚人码头注:即创建一个新数组,这个数组中的值,为第一个数字(array 参数)排除了给定数组中的值。)该方法使用 SameValueZero 做相等比较。结果值的顺序是由第一个数组中的顺序确定。
如:_.difference([2, 1, 1994], [4, 2]);
// => [1,1994]
_.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]
_.uniq(array) 创建一个去重后的 array 数组副本。使用了 SameValueZero 做等值比较。只有第一次出现的元素才会被保留。
如:_.uniq([2, 1, 2]);
// => [2, 1]
_.last(array) 获取 array 中的最后一个元素。
如:_.last([1, 2, 3]);
// => 3
集合 Collection
_.forEach(collection, [iteratee=_.identity]) 调用 iteratee 遍历 collection(集合) 中的每个元素,iteratee 调用 3 个参数:(value, index|key, collection)。如果迭代函数(iteratee)显式的返回 false,迭代会提前退出。
如:_([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).
_.filter(collection, [predicate=_.identity]) 遍历 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’]
_.groupBy(collection, [iteratee=_.identity]) 创建一个对象,key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果。分组值的顺序是由他们出现在 collection(集合) 中的顺序确定的。每个键对应的值负责生成 key 的元素组成的数组。iteratee 调用 1 个参数:(value)。
如:var users = [
{‘user’: ‘barney’, ‘age’: 36, ‘active’: true},
{‘user’: ‘fred’, ‘age’: 40, ‘active’: false}
];
_.groupBy(users, ‘user’);
// => {“barney”:[{“user”:”barney”,”age”:36,”active”:true}],”fred”:[{“user”:”fred”,”age”:40,”active”:false}]}
_.includes(collection, value, [fromIndex=0]) 检查 value(值) 是否在 collection(集合) 中。如果 collection(集合) 是一个字符串,那么检查 value(值,子字符串)是否在字符串中,否则使用 SameValueZero 做等值比较。如果指定 fromIndex 是负数,那么从 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]) 此方法类似于_.sortBy,除了它允许指定 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]]
_.sortBy(collection, [iteratees=[_.identity]]) 创建一个元素数组。以 iteratee 处理的结果升序排序。这个方法执行稳定排序,也就是说相同元素会保持原始排序。iteratees 调用 1 个参数:(value)。
如: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]]
_.sortBy(users, ‘user’, function(o) {
return Math.floor(o.age / 10);
});
// => objects for [[‘barney’, 36], [‘barney’, 34], [‘fred’, 48], [‘fred’, 40]]
_.debounce(func, [wait=0], [options={}]) 创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。debounced(防抖动)函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。可以提供一个 options(选项)对象决定如何调用 func 方法,options.leading 与 | 或 options.trailing 决定延迟前后如何触发(愚人码头注:是 先调用后等待 还是 先等待后调用)。func 调用时会传入最后一次提供给 debounced(防抖动)函数 的参数。后续调用的 debounced(防抖动)函数返回是最后一次 func 调用的结果。
注意: 如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用防抖方法。
如果 wait 为 0 并且 leading 为 false, func 调用将被推迟到下一个点,类似 setTimeout 为 0 的超时。
如:// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on(‘resize’, _.debounce(calculateLayout, 150));
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on(‘click’, _.debounce(sendMail, 300, {
‘leading’: true,
‘trailing’: false
}));
// 确保 `batchLog` 调用 1 次之后,1 秒内会被触发。
var debounced = _.debounce(batchLog, 250, { ‘maxWait’: 1000});
var source = new EventSource(‘/stream’);
jQuery(source).on(‘message’, debounced);
// 取消一个 trailing 的防抖动调用
jQuery(window).on(‘popstate’, debounced.cancel);