lodash常用函数

文章目录

• 一、数组
• • 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 防抖](#3、debounce 防抖)
  • [4、throttle 节流](#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])；

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

四、工具函数

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)