在平常开发中,大家一定会对数组,类数组,对象等数据结构进行复杂处理。lodash提供了强大的功能帮助你解决这些难题。官网对lodash的定义是这样的“这是一个具有一致接口、模块化、高性能等的 JavaScript 工具库”。整个库只暴露一个,'_'也就是lodash对象,类似于jquery的($)。而且其函数式编程的风格,不会污染原始数组。我在开发中一直在使用lodash的方法,但是没有系统的读过lodash的API,有些功能实现时候发现lodash可能很容易的一句话就能做到,俗话说,工欲善其事必先利其器。因此打算系统的学习一下,从头到尾撸一遍lodash,算是做一个学习笔记,我会借鉴lodash的官方API以及结合源码和大家一起详细研究一下这个工具箱,如果有翻译错误,或者理解错误的地方非常感谢各位大神、前辈批评指正。
一、Array Methods(数组方法)
1、_.chunk(arr,size)
创建一个新数组,将传入的数组深复制到新数组中,将新数组拆分成几个子数组,并返回整个新数组。
arr:传入的数组(允许字符串),如果传入的参数没有length属性,返回空数组;
size:划分的子数组的长度(不传默认为1),如果是非正数,返回空数组;如果是正小数,size=parseInt(size);
* // => [['a', 'b'], ['c', 'd']]
*
* _.chunk(['a', 'b', 'c', 'd'], 3);
* // => [['a', 'b', 'c'], ['d']]
2、_.compact(arr)
创建一个新数组,将入参数组中非假的值加到新数组中,并返回新数组。
arr:传入的数组。如果传入字符串,得到的效果类似对字符串执行split(' ')方法。
* // => [1, 2, 3]```
3、_concat(arr,[values])
创建一个新的数组,将入参的数组和之后传入的参数加到新数组中,并返回新的数组,类似数组的concat()方法。
arr:传入的数组。
[values]:额外的值。
``` * var array = [1];
* var other = _.concat(array, 2, [3], [[4]]);
*
* console.log(other);
* // => [1, 2, 3, [4]]
*
* console.log(array);
* // => [1]
4、difference(arr,[values])
类似.difference方法,创建一个新数组,将入参数组深复制新数组,将去掉数组中与第二个参数数组相同的值,返回新数组。
arr:传入的数组(如果入参不是数组结果会返回一个空数组)。
[values]:过滤参数。
简单来说,这个方法返回的是传入第一个数组的子集或者本身。
* _.difference([3, 2, 1], [4, 2]);
* // => [3, 1]
5、.differenceBy(arr, [values],[iteratee=.identity]
)
创建一个新数组,将如参数组深复制新数组,使用第三个参数(遍历器方法),对第二个参数进行运算,将处理之后的参数执行_.difference方法。
[values]:额外的参数
[iteratee=_.identity]:运算规则
* _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
* // => [{ 'x': 2 }]
* _.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
* // => [3.1, 1.3]
6、.differenceWith(arr, [values], [comparator])
类似.difference方法,创建一个新数组,将入参数组深复制到新数组,通过第三个参数,对前两个入参进行组合,返回一个新数组
arr:传入的数组
[values]:额外的参数
[comparator]:运算规则
* _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual); * // => [{ 'x': 2, 'y': 1 }]
注意:.differenceBy和.differenceWith的区别是:
The iteratee is invoked with one argument: (value).
The comparator is invoked with two arguments:(arrVal, othVal).
简单来说就是,第三个方法只会对.differenceBy方法中的第二个参数进行处理,但是会对.differenceWith方法中的前两个入参都进行处理。
7、_.drop(arr, [n])
创建一个数组,将入参数组深复制到新数组,将新数组从头开始删除n个元素,返回新数组。
arr:传入的数组
n:需要删除的元素个数
* // => [2, 3]
*
* _.drop([1, 2, 3], 2);
* // => [3]
*
* _.drop([1, 2, 3], 5);
* // => []
*
* _.drop([1, 2, 3], 0);
* // => [1, 2, 3]```
8、_.dropRight(arr, [n])
与_.drop类似,区别就是从尾部删除n个元素。
arr:传入的数组
n:需要删除元素的个数
``` * _.dropRight([1, 2, 3]);
* // => [1, 2]
*
* _.dropRight([1, 2, 3], 2);
* // => [1]
*
* _.dropRight([1, 2, 3], 5);
* // => []
*
* _.dropRight([1, 2, 3], 0);
* // => [1, 2, 3]```
9、_.fill(arr, value, [start], [end)
创建一个数组,将入参数组深复制到新数组,对新数组的元素进行替换,如果传入第三个第四个值则根据索引值进行替换,如果没有传入第三个第四个参数则默认将数组所有元素都替换成第二个元素。
arr:传入的数组。
value:替换的值。
start:开始的索引(包括),默认为0
end:结束的索引(不包括),默认为数组的长度
``` * var array = [1, 2, 3];
*
* _.fill(array, 'a');
* console.log(array);
* // => ['a', 'a', 'a']
*
* _.fill(Array(3), 2);
* // => [2, 2, 2]
*
* _.fill([4, 6, 8, 10], '*', 1, 3);
* // => [4, '*', '*', 10]```
10、_.flatten(arr)
创建一个数组,将入参数组深复制到新数组,将新数组的层级减一,返回新数组。
arr:传入的数组。
``` * _.flatten([1, [2, [3, [4]], 5]]);
* // => [1, 2, [3, [4]], 5]```
11、_.flattenDeep(arr)
创建一个数组,将入参数组深复制到新数组,将数组递归的执行层级减一,直到深 度为一。简单来说就是将数组中层叠的数组全部解开。
arr:传入的数组。
``` * _.flattenDeep([1, [2, [3, [4]], 5]]);
* // => [1, 2, 3, 4, 5]---+9```
12、_.flattenDepth(array, [depth=1])
创建一个数组,将入参数组深复制到新数组,递归的执行数组层级减n次。
arr:传入的数组。
depth:减少的层级数(默认为1)。
``` * var array = [1, [2, [3, [4]], 5]];
*
* _.flattenDepth(array, 1);
* // => [1, 2, [3, [4]], 5]
*
* _.flattenDepth(array, 2);
* // => [1, 2, 3, [4], 5]。```
这一篇就先到这,接下来会继续陪大家;读lodash,希望大家多多指教。
网友评论
鲁大师?
如果楼主知道,求分享一下,先谢谢了。