官网：https://www.lodashjs.com

一、为什么选择 Lodash ？

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

二、补充工具

futil-js 是一套用来补足 lodash 的实用工具集。

三、兼容性

在 Chrome 65-66、Firefox 58-59、IE 11、Edge 16、Safari 10-11、Node.js 6-10 & PhantomJS 2.1.1. 环境中测试通过。支持自动化浏览器测试 & CI 测试。

四、API：很强大的工具类

常用lodash函数（参考版本lodash v4.16.1）

1、N次循环

<script type="text/javascript">console.log('------- javascript -------');//js原生的循环方法for(var i = 0; i < 5; i++){console.log(i);}console.log('------- lodash -------');//ladash的times方法_.times(5,function(a){console.log(a);});
</script>

for语句是执行循环的不二选择，但在上面代码的使用场景下，_.times()的解决方式更加简洁和易于理解。

2、深层查找属性值

<script type="text/javascript">var ownerArr = [{"owner": "Colin","pets": [{"name": "dog1"}, {"name": "dog2"}]}, {"owner": "John","pets": [{"name": "dog3"}, {"name": "dog4"}]}];var jsMap = ownerArr.map(function (owner) {return owner.pets[0].name;});console.log('------- jsMap -------');console.log(jsMap);var lodashMap = _.map(ownerArr, 'pets[0].name');console.log('------- lodashMap -------');console.log(lodashMap);
</script>

Lodash中的_.map方法和JavaScript中原生的数组方法非常的像，但它还是有非常有用的升级。你可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性。

3、深克隆对象

<script type="text/javascript">var objA = {"name": "戈德斯文"};var objB = _.cloneDeep(objA);console.log(objA);console.log(objB);console.log(objA === objB);
</script>

深度克隆JavaScript对象是困难的，并且也没有什么简单的解决方案。你可以使用原生的解决方案:JSON.parse(JSON.stringify(objectToClone)) 进行深度克隆。但是，这种方案仅在对象内部没有方法的时候才可行。

4、在指定范围内获取一个随机值

<script type="text/javascript">function getRandomNumber(min, max){return Math.floor(Math.random() * (max - min)) + min;}console.log(getRandomNumber(15, 20));console.log(_.random(15, 20));</script>

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

5、扩展对象

<script type="text/javascript">Object.prototype.extend = function(obj) {for (var i in obj) {if (obj.hasOwnProperty(i)) {    //判断被扩展的对象有没有某个属性，this[i] = obj[i];}}};var objA = {"name": "戈德斯文", "car": "宝马"};var objB = {"name": "柴硕", "loveEat": true};objA.extend(objB);console.log(objA); console.log(_.assign(objA, objB));
</script>

_.assign 方法也可以接收多个参数对象进行扩展，都是往后面的对象上合并

6、从列表中随机的选择列表项

<script type="text/javascript">var smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"];function randomSmarter(smartTeam){var index = Math.floor(Math.random() * smartTeam.length);return smartTeam[index];}console.log(randomSmarter(smartTeam));// Lodashconsole.log(_.sample(smartTeam));console.log(_.sampleSize(smartTeam,2));
</script>

此外，你也可以指定随机返回元素的个数_.sampleSize(smartTeam,n)，n为需要返回的元素个数

7、判断对象中是否含有某元素

<script type="text/javascript">var smartPerson = {'name': '戈德斯文','gender': 'male'},smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"];console.log(_.includes(smartPerson, '戈德斯文'));console.log(_.includes(smartTeam, '杨海月'));console.log(_.includes(smartTeam, '杨海月',2));
</script>

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

8、遍历循环

<script type="text/javascript">_([1, 2]).forEach(function(value) {console.log(value);});_.forEach([1, 3] , function(value, key) {console.log(key,value);});
</script>

这两种方法都会分别输出‘1’和‘2’，不仅是数组，对象也可以，数组的是后key是元素的下标，当传入的是对象的时候，key是属性，value是值

9、遍历循环执行某个方法

_.map()

<script type="text/javascript">function square(n) {return n * n;}console.log(_.map([4, 8], square));// => [16, 64]console.log(_.map({ 'a': 4, 'b': 8 }, square));// => [16, 64] (iteration order is not guaranteed)var users = [{ 'user': 'barney' },{ 'user': 'fred' }];// The `_.property` iteratee shorthand.console.log(_.map(users, 'user'));// => ['barney', 'fred']
</script>

10、检验值是否为空

_.isEmpty()

<script type="text/javascript">_.isEmpty(null);// => true_.isEmpty(true);// => true_.isEmpty(1);// => true_.isEmpty([1, 2, 3]);// => false_.isEmpty({ 'a': 1 });// => false
</script>

11、查找属性

_.find()、_.filter()、_.reject()

<script type="text/javascript">var users = [{'user': 'barney', 'age': 36, 'active': true},{'user': 'fred', 'age': 40, 'active': false},{'user': 'pebbles', 'age': 1, 'active': true}];console.log(_.find(users, function (o) {return o.age < 40;}));console.log(_.find(users, {'age': 1, 'active': true}));console.log(_.filter(users, {'age': 1, 'active': true}));console.log(_.find(users, ['active', false]));console.log(_.filter(users, ['active', false]));console.log(_.find(users, 'active'));console.log(_.filter(users, 'active'));</script>

_.find()第一个返回真值的第一个元素。 _.filter()返回真值的所有元素的数组。 _.reject()是_.filter的反向方法，不返回真值的（集合）元素

12、数组去重

_.uniq(array)创建一个去重后的array数组副本。

参数 array (Array): 要检查的数组。

返回新的去重后的数组

<script type="text/javascript">var arr1 = [2, 1, 2];var arr2 = _.uniq(arr1);function unique(arr) {var newArr = [];for (var i = 0; i < arr.length; i++) {if(newArr.indexOf(arr[i]) == -1){newArr.push(arr[i]);}}return newArr;}console.log(arr1);console.log(arr2);console.log(unique(arr1));
</script>

_.uniqBy(array,[iteratee=_.identity])这个方法类似 _.uniq，除了它接受一个 iteratee（迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数：(value)。

<script type="text/javascript">console.log(_.uniqBy([2.1, 1.2, 2.3], Math.floor));// => [2.1, 1.2]console.log(_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'));// => [{ 'x': 1 }, { 'x': 2 }]
</script>

Math.floor只是向下取整，去重，并没有改变原有的数组，所以还是2.1和1.2，不是2和1。

13、模板插入

_.template([string=''], [options={}])

<div id="container"></div><script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">$(function () {var data = [{name: '戈德斯文'}, {name: '柴硕'}, {name: '杨海月'}];var t = _.template($("#tpl").html());$("#container").html(t(data));});
</script>
<script type="text/template" id="tpl"><% _.each(obj,function(e,i){ %><ul><li><%= e.name %><%= i %></li></ul><%})%>
</script>

注意，这个<script>标签的type是text/template，类似于react的JSX的写法，就是js和html可以混写，用<% %>括起来的就是js代码，可以执行，直接写的就是html的标签，并且有类似MVC框架的的数据绑定，在<%= %>中可以调用到数据呈现。

就这么多了，剩下的自己可以查看中文文档和官方文档或者看看别人写的博客，虽然现在很多方法ES6已经自己就已经封装好了，我们还是写ES5的多，有个偷懒少写方法的路子，为啥不用！！

我的微信公众号：架构真经（id：gentoo666），分享Java干货，高并发编程，热门技术教程，微服务及分布式技术，架构设计，区块链技术，人工智能，大数据，Java面试题，以及前沿热门资讯等。每日更新哦！

参考文章：

1.https://juejin.im/post/5bc89446e51d450e6d01501c

Lodash-一个一致性、模块化、高性能的 JavaScript 实用工具库介绍相关推荐

开发知识竞赛答题活动小程序过程中使用到的实用工具库介绍
前言我在做知识竞赛答题活动小程序经常需要处理一些比较基础的事情,比如时间.数组.数字.对象.字符串等处理,自己造轮子的话成本会比较高.这时候我们可以去找一些别人已经写好的开源模块或者开源库,我们直接 ...
56个JavaScript 实用工具函数助你提升开发效率！
今天来看看JavaScript中的一些实用的工具函数,希望能帮助你提高开发效率!整理不易,如果觉得有用就点个赞吧! 实用工具函数.png 1. 数字操作 (1)生成指定范围随机数 export con ...
【总结】56个JavaScript 实用工具函数助你提升开发效率！
作者:CUGGZ https://juejin.cn/post/7019090370814279693 又快到周五啦,快来一起摸鱼呀!今天来看看JavaScript中的一些实用的工具函数,希望能帮助你 ...
用JS轻松实现一个录音、录像、录屏工具库
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
aqlserver实用程序_sqlserver命令提示实用工具的介绍
除上述的图形化管理工具外,SQL Server2008还提供了大量的命令行实用工具,包括bcp.dtexec.dtutil.osql.reconfig.sqlcmd.sqlwb和tablediff等, ...
7个使用JavaScript构建数据可视化的实用工具库，希望你能喜欢
JavaScript运行网络.您可以在浏览器中使用它,也可以在服务器上使用它,并且可以将其用于移动应用程序. 当今的生态系统充满了强大的库和框架,可帮助工程师为任何平台构建功能强大,以用户为中心的应用 ...
date-fns一个现代JavaScript日期工具库的使用
基础方法 isToday():判断所传入日期是否为今天 isYesterday(): 判断是否为昨天 isTomorrow()判断是否为明天. 用法与isToday(), isYesterday()用 ...
windows查看linux文件工具,「实用工具」介绍几款Windows系统与Linux服务器传递文件的工具...
本文主要介绍几款用于和linux服务器传递文件的工具 WinSCP WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持SCP协议.它的主要功能就是在本地与远程计算机间 ...
【JavaScript工具库】Lodash
JS使用工具库:Lodash 作用:高效处理array.number.objects.string等对象,降低JS操作难度特点:不会影响原实例对象,返回操作后的结果或新对象,语义化程度高例如: 数 ...

Lodash-一个一致性、模块化、高性能的 JavaScript 实用工具库介绍