Thư viện lodash

Thư viện lodash là một thư viện javascript hay, có nhiều chức năng giúp xử lý array, date, function, lang, math, number, string, util…

Nhúng thư viện lodash vào trang

  • Download : Vào  https://lodash.com => chọn Full build => rồi Save file về máy
  • Nhúng lodash.js vào trang html với lệnh <script src=”lodash.js”></script>

Chú ý: Có thể nhúng trực tiếp từ CDN như bên dưới (có thể đổi 4.17.21 thành version khác nếu cần)
<script src=”https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js”> </script>

Các hàm thông dụng trong thư viện lodash

_.concat() : Hàm tạo 1 mảng bằng cách ghép các tham số lại

<script>
    arr1 = ['Gạo','Mắm'];
    arr2 = _.concat("Dưa", arr1, "Cà");
    console.log(arr2); //["Dưa", "Gạo", "Mắm", "Cà"]
</script>

_.chunk() : Đây là hàm tạo 1 mảng dựa trên 1 mảng đã có , gồm các mảng con có số phần tử truyền vào

<script>
 arr = ['ba','sẽ','là','cánh','chim','đưa','con','đi','thật','xa','mẹ','sẽ','là'];
 arr2 = _.chunk(arr, 5);
 console.log(arr2);  // ["ba", "sẽ", "là", "cánh", "chim"]
                     // ["đưa", "con", "đi", "thật", "xa"]
                     // ["mẹ", "sẽ", "là"]
</script>

_.findindex() : Hàm trả về vị trí của phần tử với điều kiện chỉ ra

<script>
sachhay  = [
        {'id':'mht', 'ten':'Mùi Hương Trầm','gia': 72000},       
        {'id':'n20', 'ten':'Nói với tuổi 20','gia': 25000},   
        {'id':'quanglo', 'ten':'Quẳng gánh lo đi','gia': 81000},
        {'id':'sm', 'ten':'Sức mạnh của thói quen','gia': 125000},
];
vt  = _.findIndex(sachhay, function(s){ return s.ten.indexOf('a')>=0; })
console.log(vt);  // 3
</script>

_.filter() : Hàm trả về 1 mảng các gồm các phẩn tử thỏa điều kiện chỉ ra

<script>
sachhay  = [
   {'id':'mht', 'ten':'Mùi Hương Trầm','gia': 72000},       
   {'id':'n20', 'ten':'Nói với tuổi 20','gia': 25000},   
   {'id':'quanglo', 'ten':'Quẳng gánh lo đi','gia': 81000},         
   {'id':'sm', 'ten':'Sức mạnh của thói quen','gia': 125000}, 
];
arr  = _.filter(sachhay, function(s){ return s.ten.indexOf('t')>=0; })
console.log(arr);   
    // [ {id: "n20", ten: "Nói với tuổi 20", gia: 25000},
    //   {id: "sm", ten: "Sức mạnh của thói quen", gia: 125000}
</script>

_.find() : Hàm này trả về phần tử đầu tiên trong mảng thõa điều kiện trong hàm callback

<script>
sachhay  = [
    {'id':'mht', 'ten':'Mùi Hương Trầm','gia': 72000},       
    {'id':'n20', 'ten':'Nói với tuổi 20','gia': 25000},   
    {'id':'qlo', 'ten':'Quẳng gánh lo đi','gia': 81000},         
    {'id':'sm', 'ten':'Sức mạnh của thói quen','gia': 125000}, 
];
arr = _.find(sachhay, function(s){ return s.gia>=75000; })
console.log(arr); //{'id':'qlo', 'ten':'Quẳng gánh lo đi','gia': 81000}, 
</script>

_.includes() : Là hàm giúp kiểm tra 1 giá trị có trong mảng hay không, kết quả là true/false

<script>
  words  = ["Trời", "Buồn", "Làm", "Gì", "Trời", "Rầu","Rầu"];
  kq  = _.includes(words, "Rầu");
  console.log(kq);   // True
</script>

Hàm _.map() : Tạo ra 1 mảng mới bằng cách biến đổi từng phần tử trong mảng

<script>
words  = ["Trời", "Buồn", "Làm", "Gì", "Trời", "Rầu","Rầu"];
words1  = _.map(words, function(w){return w.toUpperCase() });
console.log(words1); //["TRỜI", "BUỒN", "LÀM", "GÌ", "TRỜI", "RẦU", "RẦU"]

diem  = [8, 4, 7, 6, 5, 4];
diem1  = _.map(diem, function(d){return d+1 });
console.log(diem1);   //   [9, 5, 8, 7, 6, 5]

sachhay  = [
   {'id':'mht', 'ten':'Mùi Hương Trầm','gia': 72000},       
   {'id':'n20', 'ten':'Nói với tuổi 20','gia': 25000},   
   {'id':'qlo', 'ten':'Quẳng gánh lo đi','gia': 81000},         
];
sachhay1  = _.map(sachhay, function(s){return s.gia });
console.log(sachhay1);   //  [72000, 25000, 81000]
</script>

Hàm _.remove() : Xóa phần tử trong mảng thỏa điều kiện

<script>
sachhay  = [
   {'id':'mht', 'ten':'Mùi Hương Trầm','gia': 72000},       
   {'id':'n20', 'ten':'Nói với tuổi 20','gia': 25000},   
   {'id':'qlo', 'ten':'Quẳng gánh lo đi','gia': 81000},         
   {'id':'sm', 'ten':'Sức mạnh của thói quen','gia': 125000}, 
];
sachhay1  = _.remove(sachhay, function(s){return s.gia>=80000 });
console.log(sachhay1);   
    // {id: "qlo", ten: "Quẳng gánh lo đi", gia: 81000}
    // {id: "sm", ten: "Sức mạnh của thói quen", gia: 125000}
</script>

Đó là một vài tính năng hay của thư viện lodash , bạn khám phá thêm nữa nhé. Một thư viện nữa giúp có nhiều tính năng hay giúp code javascript dễ dàng hơn đó là thư viện moment, bạn xem nhé.