+2

Tìm hiểu về Lodash

1. Giới thiệu về Lodash

Tiền thân của Lodash là thư viện underscorejs có thể xem Lodash là phiên bản mở rộng hơn của underscore, với nhiều chức năng hơn và có hiệu năng cao hơn. Lodash có nhiều chức năng và có thể chia ra thành: chức năng hỗ trợ xử lý Array, chức năng xử lý Object, chức năng xử lý Array, nhóm xử lý Date, Function, Lang, Math, Number,.. Danh sách các chức năng cùng doc của Lodash có thể tìm thấy tại đây. Cài đặt: Với brower <script src="lodash.js"></script> Sử dụng npm:

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

2. Một số function của Lodash xử lý String

_.isUndefined, _.isNull, _.isFunction, _.isNumber, _isObject: Đây là một số function để kiểm tra kiểu của biến, cũng như xem biến có undefined, null hay ko?

     _.isUndefined(void 0);
    // => true

    _.isUndefined(null);
    // => false

    _.isNull(null);
    // => true

    _.isNull(void 0);
    // => false

    _.isFunction(_);
    // => true

    _.isFunction(/abc/);
    // => false

    _.isNumber(1);
    // => true

    _.isNumber(Infinity);
    // => true

    _.isNumber('1');
    // => false

    _.isObject({});
    // => true

    _.isObject([1, 2, 3]);
    // => true

    _.isObject(null);
    // => false

_.isEqual: So sánh 2 array, hoặc 2 object

     var object = { 'a': 1 };
     var other = { 'a': 1 };

      _.isEqual(object, other);
      // => true
      object === other;
      // => false

_.capitalize: Viết hoa kí tự đầu của string _.pad, _.padStart, _.padEnd: Căn giữa, trái, phải string bằng cách thêm khoảng trắng vào string

    _.camelCase('Foo Bar');
    // → 'fooBar'
    _.camelCase('--foo-bar');
    // → 'fooBar'

    _.capitalize('fred');
    // → 'Fred'

   _.pad('abc', 8);
    // => '  abc   '
    _.padStart('abc', 6);
    // => '   abc'

_.trim, _.trimLeft, _.trimRight: Bỏ khoảng trắng _.trunc: Cắt string và thêm … vào cuối string nếu string quá dài (Chức năng khá hay) _.words: Cắt các từ trong string, bỏ vào 1 mảng

    _.trim(' abc ');
    // → 'abc'

    _.trunc('hi-diddly-ho there, neighborino', 24);
    // → 'hi-diddly-ho there, n…'

    _.words('fred, barney, & pebbles');
    // → ['fred', 'barney', 'pebbles']

_.startCase: Viết hoa các chữ cái đầu mỗi từ trong string, khá hay _.startsWith, _.endsWith: Kiểm tra chuỗi đưa vào có phải nằm ở đầu/cuối string cần so sánh hay ko

    _.startCase('--foo-bar');
    // → 'Foo Bar'
    _.startCase('fooBar');
    // → 'Foo Bar'

    _.startsWith('abc', 'a');
    // → true
    _.startsWith('abc', 'b');
    // → false

    _.endsWith('abc', 'c');
    // → true
    _.endsWith('abc', 'b');
    // → false

3. Một số function của object

_.functions: Trả về tên toàn bộ những function của 1 object

        //Trả những function của lodash
    _.functions(_);
    // → ['after', 'ary', 'assign', …]

_.has: Kiểm tra xem 1 object có property, hoặc function với tên là tham số được truyền vào hay ko _.keys: Trả về tên toàn bộ những thuộc tính của 1 object

    var object = { 'a': 1, 'b': 2, 'c': 3 };

    _.has(object, 'b');
    // → true

    function Foo() {
     this.a = 1;
     this.b = 2;
    }

    Foo.prototype.c = 3;

    _.keys(new Foo);
    // → ['a', 'b'] (iteration order is not guaranteed)

_.pick: Chỉ lấy 1 thuộc tính của object _.omit: Bỏ 1 thuộc tính của object, lấy toàn bộ những thuộc tính còn lại

    var object = { 'user': 'fred', 'age': 40 };

    _.pick(object, 'user');
    // → { 'user': 'fred' }

    _.omit(object, 'age');
    // → { 'user': 'fred' }

4. Một số function của array

Như đã nói, lodash hỗ trợ rất nhiều hàm xử lý array, giúp việc xử lý array đơn giản hơn rất nhiều. Một lưu ý trong lodash, có 2 kiểu để gọi hàm với array như sau:

    var users = [
     { 'user': 'barney', 'age': 36, 'active': true },
     { 'user': 'fred',   'age': 40, 'active': false }
    ];

    //Kiểu 1, gọi như 1 function bình thường
    _.filter(users, 'active', false)
    // → [{ 'user': 'barney', 'age': 36, 'active': true }];

    //Kiểu 2, wrap array vào rồi gọi hàm
    _(users).filter('active', false).value()
    // → [{ 'user': 'barney', 'age': 36, 'active': true }];

Dưới đây là một số hàm xử lý array khá hữu dụng:

_.difference: Lấy những phần tử khác nhau giữa 2 array _.intersection: Lấy những phần tử giống nhau giữa 2 hoặc nhiều array _.union: Hợp 2 hoặc nhiều array lại với nhau

    _.difference([1, 2, 3], [4, 2]);
    // → [1, 3]

    _.intersection([1, 2], [4, 2], [2, 1]);
    // → [2]

    _.union([1, 2], [4, 2], [2, 1]);
    // → [1, 2, 4]

_.findIndex: Tìm index của phần tử đầu tiên thỏa điều kiện _.find: Tìm 1 phần tử trong array _.first, _.last: lấy phần tử đầu tiên và cuối cùng của array

    var users = [
     { 'user': 'barney', 'active': false },
     { 'user': 'fred', 'active': false },
     { 'user': 'pebbles', 'active': true }
    ];

    _.findIndex(users, function(chr) {
     return chr.user == 'barney';
    });
    // → 0

    var users = [
     { 'user': 'barney', 'age': 36, 'active': true },
     { 'user': 'fred', 'age': 40, 'active': false },
     { 'user': 'pebbles', 'age': 1, 'active': true }
    ];

    _.result(_.find(users, function(chr) {
     return chr.age < 40;
    }), 'user');
    // → 'barney'

    _.first([1, 2, 3]);
    // → 1

    _.last([1, 2, 3]);
    // → 3

_.flatten: Làm dẹp array (Nếu array có chứa array thì cho ra 1 array duy nhất) _.shuffle: Tương tự như xóc bài, tạo ra 1 array mới, chứa các phần tử của array cũ theo thứ tự ngẫu nhiên

    _.flatten([1, [2, 3, [4]]]);
    // → [1, 2, 3, [4]];

    // using `isDeep`
    _.flatten([1, [2, 3, [4]]], true);
    // → [1, 2, 3, 4];

    _.shuffle([1, 2, 3, 4]);
    // → [4, 1, 3, 2]

Tham khảo: https://lodash.com/


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí