文章目录
- 一、数组
- 1、chunk分组
- 2、difference、differenceBy、differenceWith
- 3、findIndex
- 4、intersection、intersectionBy、intersectionWith
- 5、union、unionBy、unionWith
- 二、对象
- 1、pick、omit
- 2、get、set
- 三、数学
- 1、sum、sumBy
- 2、range
- 四、工具函数
- 1、isEqual、isEmpty
- 2、clone、cloneDeep
- 3、debounce 防抖
- 4、throttle 节流
- 5、lodash对象
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
一、数组
1、chunk分组
_.chunk(array, [size=1]);size表示间隔
_.chunk(['a', 'b', 'c', 'd', 'e'], 2);
// => [['a', 'b'], ['c', 'd'], ['e']]
2、difference、differenceBy、differenceWith
isEqual
函数表示深度比较
- difference 代表
基础数据类型
的对比- differenceBy 表示对
值进行转化
后对比- differenceWith 表示
两个数据整体
的对比- 取
差异集合
// 找不同
_.difference([3, 2, 1], [4, 2]);
// => [3, 1]
// array: 目标 values:排除值;iteratee调用每个元素后返回值,再对比该返回值
// _.differenceBy(array, [values], [iteratee=_.identity])
_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// 等同于
_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], (value) => Math.floor(value));
// => [3.1, 1.3] // 2.2 2.5 调用后都是2,所以被识别成同一个值
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], (arrVal, othVal) => arrVal.x > othVal.x);
// => [{ 'x': 1, 'y': 2 }]
3、findIndex
- findIndex(array, [iteratee=_.identity], [fromIndex=0]),
[] 中括号表示可选参数,可传可不传
,但是不能跨可选,也就是说连续两个可选参数,想要使用第二个参数,也必须使用第一个参数[predicate=_.identity]
(Array|Function|Object|string) 该参数可以有多种参数类型,Function基本就是js中的findIndex实现,也可以使用其他快捷方式- 由于一些用户的浏览器版本比较低,当使用最新的ECMAScript新语法可能出现异常,直接导致线上问题(自己本地开发不一定有问题),所以一些函数可以借用lodash库辅助实现即可(当然也可以自己定义实现)
var users = [
{ 'user': 'barney', 'active': false },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': true }
];
_.findIndex(users, function(o) { return o.user == 'barney'; }); // Function
// => 0
_.findIndex(users, { 'user': 'fred', }) // Object
// => 1
4、intersection、intersectionBy、intersectionWith
- 类似于
difference
,只不过函数结果是取交集
_.intersection([2, 1], [4, 2], [1, 2]); // 基础数据类型
// => [2]
_.intersectionBy([2.1, 1.2], [4.3, 2.4], Math.floor); // 值进行转化
// => [2.1]
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
_.intersectionWith(objects, others, _.isEqual); // 两个数据整体
// => [{ 'x': 1, 'y': 2 }]
5、union、unionBy、unionWith
- 取
合集
,注意有去重效果;
_.union([2], [1, 2]);
// => [2, 1]
// 另外两种就不一一举例了,跟交集、差集类似
二、对象
1、pick、omit
- pick挑选部分属性
- omit排除部分属性
// _.pick(object, [props])
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
_.omit(object, ['a', 'c']);
// => { 'b': '2' }
2、get、set
- _.get(object, path, [defaultValue]); 注意
path
表示动态的路径
- _.set(object, path, value); 设置值
var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
_.set(object, 'a[0].b.c', 5);
console.log(object.a[0].b.c);
// => 5
三、数学
1、sum、sumBy
快速计算总数
_.sum([4, 2, 8, 6]);
// => 20
var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];
_.sumBy(objects, function(o) { return o.n; }); // 函数更加灵活
// => 20
2、range
_.range([start=0], end, [step=1]);
// 包含起始点,不包含终止点(跟Array.slice有些类似)可以快速创建范围数的集合
_.range(1, 5, 1);
// => [1, 2, 3, 4]
四、工具函数
1、isEqual、isEmpty
- isEqual数据深度比较,是否全等返回boolean
- isEmpty返回是否是空对象
var object = { 'a': 1 };
var other = { 'a': 1 };
_.isEqual(object, other);
// => true
_.isEmpty({})
// => true
2、clone、cloneDeep
- clone表示浅拷贝,一般被解构赋值代替
- cloneDeep表示深拷贝,注意如果数据量大,有性能问题;一般使用JSON性能比较高
JSON.parse(JSON.stringify([{}]))
,当然JSON存在function、undefined无法转化的问题
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
3、debounce 防抖
- _.debounce(func, [wait=0], [options=]);options.leading 表示是否延迟开始前调用,默认false;
options.maxWait 表示fun被推迟的最大值;options.maxWait 表示是否延迟开始后调用,默认true
function click(params) {
console.log('click')
}
document.body.addEventListener('click', _.debounce(click, 300))
4、throttle 节流
- _.throttle(func, [wait=0], [options=]);options.leading 表示是否延迟开始前调用,默认true;options.maxWait 表示是否延迟开始后调用,默认false
document.body.addEventListener('click', _.throttle(() => console.log('click'), 1000))
5、lodash对象
- lodash对象可以链式调用
_([1, 2, 3]).map(item => item * item).reduce(_.add)