Lodash - 讓你事半功倍的好工具

當你使用JavaScript進行寫程式的時候，你很可能需要經常重複寫一些工具函數，尤其是處理字符串和對象。即使ES6已經被標準化了，JavaScript開發者依然無法獲得像Objective-C或Ruby那樣多的語法糖。因此，在JavaScript應用中仍然被重複的編寫大量的工具函數。而這邊將會為你帶來的救星就是Loadsh。

lodash究竟是什麼東西呢？你可以把它看成是對JavaScript底層的功能擴充，簡單的說，像是Function、Array、Object這些原生的物件，lodash都增加了許多方法，來處理這些物件中，我們常會遇到的一些行為。

打個比方來說，如果有一個array, 例如arr = [”a”,”b”,”c”,”b”,”d”,”a”,”c”,”c”]，現在要你從這裡面找出不重複的值，你會怎麼做呢？

實作雖然不難，但是總是麻煩了一點，而lodash就提供了.uniq的語法，只要.uniq(arr)，它就會把不重複值找出來，真的是讓生活更輕鬆了。

在前端引用的方式

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

在後端引用的方式

var _ = require('lodash');

npm - lodash

自己實作function

如果只想把陣列中重複的值給去除，自己寫一個function來實踐大概會像下面這樣

Array.prototype.unique = function()
{
    var n = []; 
    for(var i = 0; i < this.length; i++) 
    {
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}

var arr = ["a","b","c","b","d","a","c","c"];

console.log(arr.unique());
//輸出["a", "b", "c", "d"]

使用loadash現成的function

<!-- 引用lodash的js檔 -->
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

var arr = ["a","b","c","b","d","a","c","c"];

console.log(_.uniq(arr));
//輸出["a", "b", "c", "d"]

真的是太神了，lodash還提供許多工具，熟悉使用的話，也會讓你的開發速度提升，以下有許多操砍資料

語法舉例

  • _.times - 像是for迴圈，用_.uniqueId來取代index
  • _.random - 亂數
  • _.omit - 從object中移除指定的key值
  • _.pick - 取出object中指定的key值，與_.omit相反
  • _.sample - 從array中隨機取出一個值
  • _.keyBy - 指定一個key值，並從array中的object取出該key的value成為新的key

練習 - 使用下面的資料還完成以下任務

建立一個lodash.html，並且引用lodash套件，將以下題目的結果用console.log()印出來

var people = [
    { name : 'Finn',   age: 16,  gender:"M" },
    { name : 'Jake',   age: 23,  gender:"M" },
    { name : 'Mary',   age: 18,  gender:"F" },
    { name : 'Steven', age: 5,   gender:"M" } ,
    { name : 'Sasha',  age: 20,  gender:"F" },
    { name : 'Allen',  age: 28,  gender:"M" },
    { name : 'Ellen',  age: 80,  gender:"F" },
    { name : 'Joe',    age: 65,  gender:"M" }
];

  1. 依照名字的長度分類 - groupBy

  2. 取得名字開頭是S的人 - filter

  3. 取得年齡大於60歲的人 - filter

  4. 取得裡面年齡最大的人 - maxBy

  5. 取得所有人的平均年齡 - meanBy

  6. 替每筆資料加入一個adult的key值，如果該筆資料的age的值20以上，那麼adult:"Y"，否則adult:"N" - each

額外補充 - 語法糖

語法糖（Syntactic sugar），也譯為糖衣語法，是由英國計算機科學家彼得·蘭丁發明的一個術語，指計算機語言中添加的某種語法，這種語法對語言的功能並沒有影響，但是更方便程式設計師使用。語法糖讓程序更加簡潔，有更高的可讀性。

以下舉個例子

這是正統寫法

a = a + b

下面這樣就算是語法糖

a += b

results matching ""

    No results matching ""