实用工具库Lodash

更新日期: 2019-10-11阅读: 2.2k标签: 

Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用工具库;

Lodash特点就是一致性、模块化、高性能。业界赫赫有名,其不需要引入其他第三方依赖,我们在使用的过程中可以封装好的方法;(其模块化特别适用于:创建符合功能的函数、遍历 array(数组)、object (对象)和 string(字符串)等)

Lodash使用了一个简单的 _ 符号,十分简洁。


一、 引入Lodash

使用Lodash.js,有以下几种方式引入Lodash.js开发包:

js离线文件引入:直接在Lodash中文网下载相关的lodash.js包,放在自己的开发项目中,然后在需要使用的文件中引入:< script src="lodash.js">< /script>

cdn方式引入:一般使用bootcdn来直接在线引入,然后通过cdn加速文件下载访问: < script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js">< /script >

直接通过安装依赖注入,使用webpack或者glup的打包模式直接在自己的项目中挂载lodash的依赖包,具体如下:

安装依赖

    $ npm i \-g npm  
    $ npm i \--save lodash 

根据需要,挂载依赖包,例

    // Load the full build.  
    var \_ \= require('lodash');  
    // Load the core build.  
    var \_ \= require('lodash/core');  
    // Load the FP build for immutable auto-curried iteratee-first data-last methods.  
    var fp \= require('lodash/fp');  

    // Load method categories.  
    var array \= require('lodash/array');  
    var object \= require('lodash/fp/object');  

    // Cherry-pick methods for smaller browserify/rollup/webpack bundles.  
    var at \= require('lodash/at');  
    var curryN \= require('lodash/fp/curryN');  

注意:如需在 Node.js < 6 的 REPL 环境中使用 Lodash,请安装 n_。


二、 使用Lodash

之所以我们选择Lodash,主要是因为Lodash通过使用数组,数字,对象,字符串等方法,使JavaScript变得更加的简单,大大提高了开发效率。

以下方法,在引入相关的loash依赖包后,就可以按照官方文档直接调用相关的方法来运行

_.cloneDeep(深克隆) 众所周知:在JS中深度克隆对象是比较困难的,例:JSON.parse(JSON.stringify(obj)) 进行深度克隆。但是,这种方案仅在对象内部没有方法的时候才可行,不然行不通的。

var obj ={  
     a:{  
     b:100,  
     fun:function(){  
         console.log("fun");  
         }  
     }  
}  
 var obj2 = _.cloneDeep(obj);  
  
 obj.a.b=2000;  
  
 console.log(obj2.a.b,obj.a.b);  // 100  2000  
 obj2.a.fun(); 

_.compact(array) 创建一个除去原数组中所有的假值元素的数组。例如false, null,0," ", undefined, 以及 NaN 都是被认为是“假值”。

 var arr =[1,2,'',null,0,33,"aa"];  
 var temArr =  _.compact(arr);  // 把空值 null 0 false 统统去掉  
 console.log(temArr);    // [ 1, 2, 33, 'aa' ]

_.concat(array, [values]) 创建一个新数组,将array与任何数组 或 值连接在一起,返回连接后的新数组。

var array = [1,2,3];
var other = _.concat(array, 2, [3], [[4,5,6]]);

console.log(other); // [ 1, 2, 3, 2, 3, [ 4, 5, 6 ] ]

console.log(array); // [ 1, 2, 3 ]

_.chunk(array, [size=1]) 按照size的大小来拆分array数组,将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。返回一个包含拆分区块的新数组(注:相当于一个二维数组)。

var chunk1 = _.chunk(['a', 'b', 'c', 'd'], 2);
 console.log(chunk1);      // [['a', 'b'], ['c', 'd']]
var chunk2 = _.chunk(['a', 'b', 'c', 'd'], 3);
 console.log(chunk2);      // [['a', 'b', 'c'], ['d']]

_.includes(obj,ele,index) 第一个参数是需要查询的对象,第二个参数是需要查询的元素,第三个参数是开始查询的下标。

var obj = {
    'name': '张三',
    'age': 18
},
arr = ["张三", "李四", "王五", "赵六"];
console.log(_.includes(obj, '张三'));    // true
console.log(_.includes(arr, '李四'));    // true
console.log(_.includes(arr, '李四',2));  // false

_.times() 比for更加简洁和易于理解。

_.times(5,function(a){
console.log(a);  // 0 1 2 3 4
});

_.map() 是原生JS中的数组方法的升级版,我们可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性

var arr = [{
    "name": "张三",
    "phone": [{"name": "MI"}, {"name": "iphone"}]
}, {
    "name": "李四",
    "phone": [{"name": "HUAWEI"}, {"name": "honor"}]
}];
var jsMap = arr.map(function (owner) {
    return owner.phone[0].name;
});
var lodashMap = _.map(arr, 'phone[0].name');
console.log(lodashMap);    // MI  HUAWEI

_.random () 该方法也是比较强大与灵活的,我们可以只传入一个参数作为最大值, 也可以指定返回的结果为浮点数。例:

function randomNum(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
}
console.log(randomNum(12, 18));

console.log(_.random(12, 18));

先写这么多,还有很多方法可自行查看中文文档,很详细哦,如在测试或学习这些方法时遇到问题,可在下方留言或私信我呦~

支持: chrome 43以上、Firefox 38以上、IE 6以上、MS Edge、Safari 5以上、Node.js 8以上环境中测试通过。


链接: https://fly63.com/article/detial/8548

JavaScript 社区由一个库引发的“smoosh门”事件到底怎么回事?

一项名为 JavaScript 功能的提案 Array.prototype.flatten 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网站中断。鉴于有问题的代码是广泛使用的 MooTools 库的一部分,很可能会有更多网站受到影响。

15个有趣的Javascript 和CSS库

让你了解到新兴和酷炫的web 开发趋势. 精心挑选发布一些认为大家值得关注的库:Direction Reveal、Carbon、Аxios、Jarvis、Toast UI Editor、Micron.js、lit

math.js_灵活强大的JavaScript数学库

math.js是一个广泛应用于JavaScript 和 Node.js的数学库,它的特点是灵活表达式解析器,支持符号计算,内置大量函数与常量,并提供集成解决方案来处理不同的数据类型,如数字,大数字,复数,分数,单位和矩阵。

12 个评估 JS 库你需要关心的事

当你调研一个 JS 库,功能当然是最重要的。作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:特性,稳定性,性能,包生态,社区,学习曲线,文档,工具,发展历史,团队,兼容性,趋势

在使用新的JavaScript库时需要考虑的12件事

对于今年的JavaScript状态调查,我想深入挖掘一下,不仅知道人们正在使用哪些工具和库,还要为什么他们选择使用它们。这意味着我必须找到一种方法将个人偏好转化为冷酷的数据。

React Native 常用的 15 个库

本篇 React native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。

10个有趣的javascript和css库

我们的使命是让您了解最新和最酷的Web开发趋势。下面为大家分享10个有趣的javascript和css库:Tessaract.js强大的javascript(节点和浏览器)库,用于从图像中提取文本。

5个功能丰富的交互式Js库

在javascript的帮助下,可以为几乎每个领域(如移动、桌面应用程序和游戏Web开发)创建Web应用程序,因为该编程语言用作服务器端编程语言以实现最大功能,所以它是一种很好的编程语言。在本文中,我们选择了一些最佳的javascript库汇总

Js常用的动态效果库有那些?

当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。经过一番研究,我收集了 11 个最好的库,你可以用在自己的项目中。另外我还添加了一些有用但是缺少持续维护的库

10 个实用的 Vue.js 工具和库

如今 Vue 的热度不断攀升,使用者越来越多,Vue.js 工具也随处可见。这种现象不是凭空产生的:Vue 的学习曲线友好,功能驱动的结构清晰易懂,文档出色易学,所以新人入门很容易,经验丰富的开发人员也可以快速从其他框架

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!