Lodash,npm包仓库中依赖最多的库

前端之家收集整理的这篇文章主要介绍了Lodash,npm包仓库中依赖最多的库前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

简介

lodash,是具有一致接口、模块化、高性能等特性的 JavaScript 工具库。提供了大量的工具函数,也正是因为这个原因,使得lodash成为了npm包库中被其它库依赖最多的库。
就像jQuery在全部函数前加全局的$一样,lodash使用全局的_来提供对工具的快速访问。

  1. var _ = require('lodash');

提高开发者效率

  1. //copy一个JS对象
  2.  
  3. //原生方法
  4. var a = {a:1,b:2,c:3};
  5. var b = {};
  6. for(var key in a) {
  7. b[key] = a[key];
  8. }
  9.  
  10.  
  11. //lodash方法
  12. var b = _.clone(a);

只用一个方法、一行代码就可实现对JS对象的复制。
但在这里,lodash的高效率特性并没有体现出来

  1. var a = {};
  2. //创建一个元素数目较多的对象,否则复制时间太小,统计不精确
  3. for(var i=0;i<1000000;i++) {
  4. a[i.toString()] = Math.floor(Math.random()*100000);
  5. }
  6.  
  7. var b = {};
  8. //console.time(label);
  9. //console.timeEnd(label);
  10. //两者一一对应,用于统计两者之间的代码运行时间
  11. console.time('native copy');
  12. for(var key in a) {
  13. b[key] = a[key];
  14. }
  15. console.timeEnd('native copy');
  16.  
  17.  
  18. var c = {};
  19. console.time('lodash clone');
  20. c = _.clone(a);
  21. console.timeEnd('lodash clone');

运行结果:

  1. native copy: 473ms
  2. lodash clone: 581ms

提高程序运行效率

但在大多数情况下,lodash提供的工具函数是可以显著提高程序运行效率的。

  1. var array = [];
  2. //生成一个100w 长度的数组,并赋值随机
  3. for(var i=0;i<1000000;i++) {
  4. array.push(Math.floor(Math.random()*10000))
  5. }
  6.  
  7.  
  8. //原生forEach 遍历
  9. console.time('native for Each');
  10. array.forEach(function (key) {
  11.  
  12. });
  13. console.timeEnd('native for Each');
  14.  
  15. //lodash forEach 遍历
  16. console.time('lodash for Each');
  17. _.forEach(array,function (key) {
  18.  
  19. });
  20. console.timeEnd('lodash for Each');

运行结果:

  1. native for Each: 32ms
  2. lodash for Each: 11ms

可看到运行速度降低了近三倍。不知是否电脑环境、软件版本不同的原因,在别人的电脑上的运行结果出现过

  1. native for Each: 98ms
  2. lodash for Each: 4ms

速度相差近了25倍。

惰性计算

lodash可以显著提高计算效率的原因在于其对惰性计算的应用。

惰性求值,是一个计算机编程中的一个概念,它的目的是要最小化计算机要做的工作。

又称延迟计算,特别用于函数式编程语言。表达式不在它被绑定到变量之后就立即求值,而是在该值被取用的时候求值,也就是说,语句如x:=expression; (把一个表达式的结果赋值给一个变量)明显的调用这个表达式被计算并把结果放置到x中,但是先不管实际在x中的是什么,直到通过后面的表达式中到x的引用而有了对它的值的需求的时候,而后面表达式自身的求值也可以被延迟,最终为了生成让外界看到的某个符号而计算这个快速增长的依赖树。

下面看一个简单的延迟计算例子,一个简单取余的函数

  1. function mod (a,b){
  2. if(b==1) return 0;
  3. else return a % b ;
  4. }
  5.  
  6. mod((1+3)*2,1) // 0

可以看到由于 b 是 1,所以我们并不会用到 a 的值,但是依然计算了表达式(1+3)*2,这里的计算就是浪费的。惰性求值则能避免这一情况。

看下面这份代码

  1. var arr = _.range(100);
  2.  
  3. var a = _.chain(arr)
  4. .map(function (x) { console.log(1); return x+1; }) .take(10) .value();

结果会输出100个1。

为什么会这样?不是说在lodash中采用了惰性求值吗?不应该输出10个1吗?

原来,在lodash中只有数组超过200个才会启动惰性求值。

  1. var arr = _.range(200);
  2.  
  3. var a = _.chain(arr)
  4. .map(function (x) { console.log(1); return x+1; }) .take(10) .value();

这样,输出就会是10个1了。

lodash常用工具函数

  • 循环
  1. // 1. Basic for loop.
  2. for(var i = 0; i < 5; i++) {
  3. // ....
  4. }
  5.  
  6. // 2. Using Array's join and split methods
  7. Array.apply(null,Array(5)).forEach(function(){
  8. // ...
  9. });
  10.  
  11. // Lodash
  12. _.times(5,function(){
  13. // ...
  14. });
  • 迭代数组并返回每一项中深度嵌套的属性
  1. // Fetch the name of the first pet from each owner
  2. var ownerArr = [{
  3. "owner": "Colin","pets": [{"name":"dog1"},{"name": "dog2"}]
  4. },{
  5. "owner": "John","pets": [{"name":"dog3"},{"name": "dog4"}]
  6. }];
  7.  
  8. // Array's map method.
  9. ownerArr.map(function(owner){
  10. return owner.pets[0].name;
  11. });
  12.  
  13. // Lodash
  14. _.map(ownerArr,'pets[0].name');
  1. // Get a random number between 15 and 20.
  2.  
  3. // Naive utility method
  4. function getRandomNumber(min,max){
  5. return Math.floor(Math.random() * (max - min)) + min;
  6. }
  7.  
  8. getRandomNumber(15,20);
  9.  
  10. // Lodash
  11. _.random(15,20);

Lodash中的random方法要比上面的原生方法更强大与灵活。你可以只传入一个参数作为最大值, 你也可以指定返回的结果为浮点数。

  1. _.random(20); // Return random number between 0 to 20
  2. _.random(15,20,true); // Return random floating numbers between 15 and 20
  • 从列表中随机的选择列表项
  1. var luckyDraw = ["Colin","John","James","Lily","Mary"];
  2.  
  3. function pickRandomPerson(luckyDraw){
  4. var index = Math.floor(Math.random() * (luckyDraw.length -1));
  5. return luckyDraw[index];
  6. }
  7.  
  8. pickRandomPerson(luckyDraw); // John
  9.  
  10. // Lodash
  11. _.sample(luckyDraw); // Colin

也可指定返回元素的个数

  1. var luckyDraw = ["Colin","Mary"];
  2.  
  3. @H_502_504@// Lodash - Getting 2 random item
  4. _.sample(luckyDraw,2); @H_502_504@// ['John','Lily']
  • 从某个对象中选择部分属性组成新的对象
  1. // Naive method: Returning a new object with selected properties
  2. Object.prototype.pick = function(arr) {
  3. var _this = this;
  4. var obj = {};
  5. arr.forEach(function(key){
  6. obj[key] = _this[key];
  7. });
  8.  
  9. return obj;
  10. };
  11.  
  12. var objA = {"name": "colin","car": "suzuki","age": 17};
  13.  
  14. var objB = objA.pick(['car','age']);
  15. // {"car": "suzuki","age": 17}
  16.  
  17. // Lodash
  18. var objB = _.pick(objA,['car',"age": 17}
  1. // Naive method: Remove an array of keys from object
  2. Object.prototype.remove = function(arr) {
  3. var that = this;
  4. arr.forEach(function(key){
  5. delete(that[key]);
  6. });
  7. };
  8.  
  9. var objA = {"name": "colin","age": 17};
  10.  
  11. objA.remove(['car','age']);
  12. objA; // {"name": "colin"}
  13.  
  14. // Lodash
  15. objA = _.omit(objA,'age']); // {"name": "colin"}

猜你在找的设计模式相关文章