不懂JS的实用工具库Lodash，怎么敢说自己会JS ?

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

Lodash特点就是一致性、模块化、高性能。业界赫赫有名，其不需要引入其他第三方依赖，我们在使用的过程中可以直接调用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 ()
该方法也是比较强大与灵活的，我们可以只传入一个参数作为最大值，也可以指定返回的结果为浮点数。例：_.random(12,18,true)。

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以上环境中测试通过。

整理不易，希望看完的留下小心心哦~您的支持就是博主最大的动力！

huangfuyk.

发布了94 篇原创文章 · 获赞 938 · 访问量 12万+

私信关注

不懂JS的实用工具库Lodash，怎么敢说自己会JS ?

一、 引入Lodash

二、 使用Lodash

猜你喜欢

一、引入Lodash

二、使用Lodash