lodash常用函数

文章目录

一、数组
二、对象
- 1、pick、omit
2、get、set
三、数学
- 1、sum、sumBy
- 2、range
四、工具函数
- 1、isEqual、isEmpty
- 2、clone、cloneDeep
- [3、debounce 防抖](#3、debounce 防抖)
- [4、throttle 节流](#4、throttle 节流)
- 5、lodash对象

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

一、数组

1、chunk分组

_.chunk(array, $size=1$ )；size表示间隔

javascript 复制代码

_.chunk(['a', 'b', 'c', 'd', 'e'], 2);
// => [['a', 'b'], ['c', 'd'], ['e']]

2、difference、differenceBy、differenceWith

isEqual函数表示深度比较

difference 代表基础数据类型的对比

differenceBy 表示对值进行转化后对比

differenceWith 表示两个数据整体的对比

取差异集合

javascript 复制代码

// 找不同
_.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库辅助实现即可（当然也可以自己定义实现）

javascript 复制代码

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，只不过函数结果是取交集

javascript 复制代码

_.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

取合集，注意有去重效果；

javascript 复制代码

_.union([2], [1, 2]);
// => [2, 1]
// 另外两种就不一一举例了，跟交集、差集类似

二、对象

1、pick、omit

pick挑选部分属性

omit排除部分属性

javascript 复制代码

// _.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); 设置值

javascript 复制代码

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

快速计算总数

javascript 复制代码

_.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$ )；

javascript 复制代码

_.range([start=0], end, [step=1])

四、工具函数

1、isEqual、isEmpty

isEqual数据深度比较，是否全等返回boolean

isEmpty返回是否是空对象

javascript 复制代码

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无法转化的问题

javascript 复制代码

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

javascript 复制代码

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

javascript 复制代码

document.body.addEventListener('click', _.throttle(() => console.log('click'), 1000))

5、lodash对象

lodash对象可以链式调用

javascript 复制代码

_([1, 2, 3]).map(item => item * item).reduce(_.add)