Lodash入门以及最常用方法汇总

一、Lodash 介绍：

Lodash 是一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，帮助开发者降低 JS 使用难度。

二、Lodash 入门使用介绍：

以 Vue-cli 使用为例：

1、yarn install lodash
2、在 main.js 里引入并使用

import _ from 'lodash';// 导入 loadsh
Vue.prototype.$lodash = _;// 注入工具

三、Lodash 常用方法介绍：
①：times()循环

        //js 原生的循环方法
        for (var i = 0; i < 5; i++) {console.log(i);
        };
        
        //ladash 的 times 方法
        this.$lodash.times(5,function (item) {console.log(item);
        })

②：map() 获取对象数组中某一同名属性的属性值集合；

        let arr = [{owner: "brown",
            lovers: [{name: "cony"}, {name: "choco"}]
        }, {
            owner: "James",
            lovers: [{name: "sally"}, {name: "Jessica"}]
        }];

        //js 原生的循环方法
        var jsMap = arr.map(function (item) {return item.lovers[0].name;
        });
        console.log(jsMap); //["cony", "sally"]


        // Lodash 的写法
        var lodashMap = this.$lodash.map(arr, 'lovers[0].name');
        console.log(lodashMap); //["cony", "sally"]

③：get () 获取对象中的某个属性的值

let obj = {a: [{b: {c: 3}}]}
let c = this.$lodash.get(obj, 'a[0].b.c')  //c==3

④：cloneDeep() 深克隆对象

        let objA = {name: "brown"};

        //JS 深克隆  
        JSON.parse(JSON.stringify(objA))

        // Lodash 的方法
        let objB = this.$lodash.cloneDeep(objA);
        console.log(objA); //{name: "brown"}
        console.log(objB);//{name: "brown"}
        console.log(objA === objB); //false
        
        

⑤：find()、filter()、reject() 查找属性

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

        console.log(this.$lodash.find(lovers, function (item) {return item.age < 19;})); //{lover: "sally", age: 18, active: true}


        console.log(this.$lodash.find(lovers, {age: 18, active: true}));
        // {lover: "sally", age: 18, active: true}


        console.log(this.$lodash.filter(lovers, {age: 18, active: true}));
        //[{lover: "sally", age: 18, active: true}]


        console.log(this.$lodash.find(lovers, ['active', false]));
        // {lover: "cony", age: 19, active: false}

        console.log(this.$lodash.filter(lovers, ['active', false]));
        // [{lover: "cony", age: 19, active: false}]
        
        console.log(this.$lodash.find(lovers, 'active'));
        // {lover: "sally", age: 18, active: true}

        console.log(this.$lodash.filter(lovers, 'active'));
        // [{lover: 'sally', age: 18, active: true},
        //  {lover: 'brown', age: 20, active: true},]
        
        

⑥：findIndex() 查找正确的第一个索引项

        var users = [{ user: 'brown',  active: false},
            {user: 'cony',    active: false},
            {user: 'sally', active: true}
        ];
        this.$lodash.findIndex(users, function(chr) {return chr.user == 'sally';}); // 2

        this.$lodash.findIndex(users, { 'user': 'cony', 'active': false}); // 1
        this.$lodash.findIndex(users, 'active', false);// 0
        this.$lodash.findIndex(users, 'active'); // 2

⑦：assign()、merge() 合并
相同之处：都可以用来合并对象 都会修改原来的对象 (如果原来的对象是作为函数的第一个参数的话);

不同之处
assign 函数不会处理原型链上的属性，也不会合并相同的属性，而是用后面的属性值覆盖前面的属性值;
merge 遇到相同属性名的时候，如果属性值是纯对象或集合的时候，会合并属性值;

       // JS 原生对象合并的方式
        Object.prototype.extend = function(obj) {for (var i in obj) {if (obj.hasOwnProperty(i)) {    // 判断被扩展的对象有没有某个属性，this[i] = obj[i];
                }
            }
        };
        var objA = {name: "brown", "food": "salmon"};
        var objB = {name: "cony", "loveEat": true};
        objA.extend(objB);
        console.log(objA); //{name: "cony", food: "salmon", loveEat: true}

        // Lodash 的方式
        console.log(this.$lodash.assign(objA, objB));
        //{name: "cony", food: "salmon", loveEat: true}

        //-----------

        const aa = this.$lodash.assign({a:1},{a:2},{b:3}) //{a:2,b:3}
        const bb = this.$lodash.merge({a:1},{a:2},{b:3}) //{a:2,b:3}

        const a1 = this.$lodash.assign({},{a:1},{b:{a:1,b:2}},{b:{a:3}}) //{a:1,b:{a:3}}
        const a2 = this.$lodash.merge({},{a:1},{b:{a:1,b:2}},{b:{a:3}}) //{a:1,b:{a:3,b:2}}
        

⑧：forEach() 遍历循环

        
        this.$lodash(['a', 'b']).forEach(function(item) {console.log(item);// ab
        });

        this.$lodash.forEach(['a', 'b'] , function(item, key) {console.log(item,key); // a 0   b 1
        });