Lodash入門以及最經常使用方法彙總

1、Lodash介紹：

Lodash是一套工具庫，它內部封裝了諸多對字符串、數組、對象等常見數據類型的處理函數，幫助開發者下降JS使用難度。

2、Lodash入門使用介紹：

以Vue-cli使用爲例：

一、yarn install lodash
二、在main.js裏引入並使用

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

3、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
        });

⑨：獲取數組中指定元素 last() nth()

//最後一個  last
        let arr = [1, 2, 3, 4, 5]
        let lastElement = this.$lodash.last(arr);
        console.log(lastElement); // 5
        
        //倒數第二個
        let lastSecondElement = this.$lodash.nth(arr,-2)
        console.log(lastSecondElement); // 4
        
        //第一個
        let lastSecondElement = this.$lodash.nth(arr,0)
        console.log(lastSecondElement); // 1

⑩：take（）獲取數組中前n個元素，不改變原數組

//最後一個  last
        let arr = [1, 2, 3, 4, 5]
        let lastElement = this.$lodash.last(arr);
        console.log(lastElement); // 5

        //倒數第二個
        let lastSecondElement = this.$lodash.nth(arr,-2)
        console.log(lastSecondElement); // 4

        //第一個
        let lastSecondElement = this.$lodash.nth(arr,0)
        console.log(lastSecondElement); // 1

十一： values() 把 object 自身可枚舉屬性的值爲數組

var obj = {
            a: {
                "leaf": 1
            },
            b:{
                "leaf": 2
            }
        }

        console.log(this.$lodash.values(obj)); // [{leaf: 1},{leaf: 2}]

十二： pick() 從 object 中提取指定的對象

var object = { 'a': 1, 'b': '2', 'c': 3 };
 this.$lodash.pick(object, ['a', 'c']);
 
 // => { 'a': 1, 'c': 3 }