10個常用的Lodash工具函數

http://colintoh.com/blog/lodash-10-javascript-utility-functions-stop-rewriting#rd?sukey=66d4519b2d3854cdb35b7931ec0bb82a59db21aac7f81bb2dacb35caa5386ecdd0897bb87558a775df91fde9b100471d

Lodash: 10 Javascript Utility Functions That You Should Probably Stop Rewriting

Reduce LOC and improve clarity of your application logic with Lodash

August 4, 2015

Carbon Ads - a circle you want to be part of. Grab a spot.ads via Carbon

While I'm working on Javascript applications, I often found myself writing utility module which contains, unsurprisingly, utility methods. So what are utility module?

An utility class is a class that defines a set of methods that perform common, often re-used functions. - Wikipedia

From dealing with strings and objects to collections iterating problems, there will always be cases where there is a gap for an utility function to fulfil.

Even with the mainstream adoption of ES6, I dare say that Javascript developers still don't get as much syntax sugars as other languages such as Objective-C and Ruby. Hence, the need to write custom helpers for utilitarian tasks is still prevalent in Javascript applications.

However, as of late, I came to be very fond of a library which provides clean and performant utility methods - Lodash.

   Lodash -The Batman’s utility belt of Javascript.

Whereas jQuery is the Swiss Army knife of DOM, Lodash is the equivalent of the Batman’s utility belt for Javascript. And just like Batman who always has some gadgets in his trusty belt to get out of sticky situation, Lodash comes with a lot of goodies at only 18.7KB minified (Not even gzipped yet). It is also written in a functional style hence, it should be really straightforward to get going.

Below are 10 utility methods that I had stopped rewriting in my Javascript application. Each example is accompanied by a Lodash solution.

PS. Please do note that I'm using Lodash v3.10.0.

1) Loop for N times

// 1. Basic for loop.for(var i = 0; i < 5; i++) {
    // ....}// 2. Using Array's join and split methodsArray.apply(null, Array(5)).forEach(function(){
    // ...});// Lodash_.times(5, function(){
    // ...});

The for loop is the classic workhorse for such an use-case but it pollutes the scope with an additional variable. With array and the apply method, we can achieve the N loop without creating an additional variable. However, it is still a tad lengthy for my taste. Lodash's _.times method is self-explanatory. Easy on the eyes and my fingers.

Take note: If your N is going to be non-trivial, please use a basic for loop or a reverse while loop for a much more performant iteration.

2) Loop through a collection and return a deeply-nested property from each item

// Fetch the name of the first pet from each ownervar ownerArr = [{
    "owner": "Colin",
    "pets": [{"name":"dog1"}, {"name": "dog2"}]}, {
    "owner": "John",
    "pets": [{"name":"dog3"}, {"name": "dog4"}]}];// Array's map method.ownerArr.map(function(owner){
   return owner.pets[0].name;});// Lodash_.map(ownerArr, 'pets[0].name');

Lodash's map method works exactly like Javascript native array method except that it has a sweet upgrade. It's able to navigate deeply-nested property by just providing a string instead of a callback function.

Take note: There is a much more specific method for this use-case: _.pluck.

Apparently _.pluck will be removed in v4 of Lodash. Use _.map for forward-compatibility. Source

Two of the same kind

_.pluck(ownerArr, 'pets[0].name');_.map(ownerArr, 'pets[0].name');

There seems to be some confusion with this. In terms of usage, there are no difference. As for behind-the-scene implementation, John-David Dalton had kindly drop me a note that they are apparently the same too. That's why he's removing it.

3) Create an array of N size and populate them with unique values of the same prefix

// Create an array of length 6 and populate them with unique values. The value must be prefix with "ball_".// eg. [ball_0, ball_1, ball_2, ball_3, ball_4, ball_5]// Array's map method.Array.apply(null, Array(6)).map(function(item, index){
    return "ball_" + index;});// Lodash_.times(6, _.uniqueId.bind(null, 'ball_'));

We already know how useful _.times is from the previous example. By using it in combination with the _.uniqueId method, we are able to come up with a more concise solution. If you don't want to repeatedly state the context, Lodash have a method for that too.

Get rid of the .bind(null,...)

// Lodash_.times(6, _.partial(_.uniqueId, 'ball_'));

The _.partial method basically does the same thing as the native bind method except it assumes the context to this. Hence, no need to specify the additional context parameter.

4) Deep-cloning Javascript object

var objA = {
    "name": "colin"}// Normal method? Too long. See Stackoverflow for solution: http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript// Lodashvar objB = _.cloneDeep(objA);objB === objA // false

Deep-cloning javascript object is difficult and there is no easy way around it. Altenative naive solution: JSON.parse(JSON.stringify(objectToClone)) for deep-cloning. However, this will only work if there are no function within the object.

Just use _.cloneDeep and you can sleep soundly at night. You can also use _.clone for flexibility in choosing the depth of clone.

5) Get Random Number between a range

// Get a random number between 15 and 20.// Naive utility methodfunction getRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min)) + min;}getRandomNumber(15, 20);// Lodash_.random(15, 20);

The _.random method is pretty dynamic and is able to achieve results that the above naive method can't. Returning random floating number and taking in single parameter as maximum value will add substantial amount of code to our custom utility method.

Additional option for _.random

_.random(20); // Return random number between 0 to 20_.random(15, 20, true); // Return random floating numbers between 15 and 20

6) Extending object

// Adding extend function to Object.prototypeObject.prototype.extend = function(obj) {
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            this[i] = obj[i];
        }
    }};var objA = {"name": "colin", "car": "suzuki"};var objB = {"name": "james", "age": 17};objA.extend(objB);objA; // {"name": "james", "age": 17, "car": "suzuki"};// Lodash_.assign(objA, objB);

The _.assign method can also accept multiple objects for extension.

Extending multiple objects

var objA = {"name": "colin", "car": "suzuki"};var objB = {"name": "james", "age": 17};var objC = {"pet": "dog"};// Lodash_.assign(objA, objB, objC)// {"name": "james", "car": "suzuki", "age": 17, "pet": "dog"}

7) Removing properties from object

// Naive method: Remove an array of keys from objectObject.prototype.remove = function(arr) {
    var that = this;
    arr.forEach(function(key){
        delete(that[key]);
    });};var objA = {"name": "colin", "car": "suzuki", "age": 17};objA.remove(['car', 'age']);objA; // {"name": "colin"}// LodashobjA = _.omit(objA, ['car', 'age']); // {"name": "colin"}

The naive method only considers an array parameter. We might also want to cater for a single string parameter for single key deletion or even accepting a comparator.

More use-cases

var objA = {"name": "colin", "car": "suzuki", "age": 17};// LodashobjA = _.omit(objA, 'car'); // {"name": "colin", "age": 17};objA = _.omit(objA, _.isNumber); // {"name": "colin"};

Once again, catering for such cases would have added substantial amount of code into the naive utility function. _.omit method help us handle all those situation.

You should also note that _.omit returns a new object that has no reference to the object passed in. This is really useful if you do not want your omitted object to be affected by changes to the former object.

8) Select properties from another object to form new object

// Naive method: Returning a new object with selected properties Object.prototype.pick = function(arr) {
    var _this = this;
    var obj = {};
    arr.forEach(function(key){
        obj[key] = _this[key];
    });

    return obj;};var objA = {"name": "colin", "car": "suzuki", "age": 17};var objB = objA.pick(['car', 'age']);// {"car": "suzuki", "age": 17}// Lodashvar objB = _.pick(objA, ['car', 'age']);// {"car": "suzuki", "age": 17}

The _.pick method is the opposite of _.omit where you get to pick the selected properties of another object. _.pick comes with all the benefits that _.omit provides too - New object creation and ability to take in single string, array and comparator functions.

9) Selecting a random item from a list

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];function pickRandomPerson(luckyDraw){
    var index = Math.floor(Math.random() * (luckyDraw.length -1));
    return luckyDraw[index];}pickRandomPerson(luckyDraw); // John// Lodash_.sample(luckyDraw); // Colin

The _.sample method also comes with an additional bonus feature - Selecting multiple random item from list.

Multiple random item

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];// Lodash - Getting 2 random item_.sample(luckyDraw, 2); // ['John','Lily']

10) Error handling for JSON.parse

// Using try-catch to handle the JSON.parse errorfunction parse(str){
    try {
        return JSON.parse(str);
    }

    catch {
        return false;
    }}// With Lodashfunction parseLodash(str){
    return _.attempt(JSON.parse.bind(null, str));}parse('a'); // falseparseLodash('a'); // Return an error objectparse('{"name": "colin"}'); // Return {"name": "colin"}parseLodash('{"name": "colin"}'); // Return {"name": "colin"}

If you are using JSON.parse in your application and you are not handling the errors, I urge you to do so immediately. An unhandled JSON.parse error is like a ticking bomb. Never assume the JSON object you are receiving is completely valid. But I digress.

Although we didn't completely replace the try-catch utility method, we managed to remove the unsightly try-catch blocks. The _.attempt prevents JSON.parse from throwing an application error. Instead, it return an Error object.

Conclusion

Lodash has been doing great for me and I will continue to drop it in all my Javascript project. It reduces the amount of boilerplate code and also improves the clarity of my application logic.

But my biggest takeaway is this - Lodash forces me to think in a more functional manner. I break my application into many smaller modules with singular focus and no side effects. This increased modularity allow me to increase the application code coverage during unit testing.

   Whenever I discover an utility method I wrote that was already solved by Lodash.

RSS

http://mp.weixin.qq.com/s?__biz=MzIwMTQzMjkyMA==&mid=209335507&idx=1&sn=38ee5915230ac244d0441bf07aaf4eff&scene=23&srcid=1002VndshHJRyNzWMTMHJPop#rd

                        2015-10-02                                                JavaScript周刊                                                                    

1) N次循環

// 1. 使用for循環
for(var i = 0; i < 5; i++) {    // ....
}

// 2. 使用Array的join和split方法
Array.apply(null, Array(5)).forEach(function(){    // ...
});

// Lodash
_.times(5, function(){    // ...
});

2) 遍歷對象集合并返回所有元素的某個屬性值

// 獲取每個元素pets數組的首個對象的name屬性值
var ownerArr = [{    "owner": "Colin",    "pets": [{"name":"dog1"}, {"name": "dog2"}]
}, {    "owner": "John",    "pets": [{"name":"dog3"}, {"name": "dog4"}]
}];

// 使用Array的map方法
ownerArr.map(function(owner){   return owner.pets[0].name;
});

// Lodash
_.map(ownerArr, 'pets[0].name');

3) 創建大小為N的帶前綴數組序列

// 創建長度為6的數組序列，數組元素以"ball_"為前綴，例如：[ball_0, ball_1, ball_2, ball_3, ball_4, ball_5]

// 使用Array的map方法
Array.apply(null, Array(6)).map(function(item, index){    return "ball_" + index;
});

// Lodash
_.times(6, _.uniqueId.bind(null, 'ball_'));
_.times(6, _.partial(_.uniqueId, 'ball_'));

4) 深度復制Javascript對象

var objA = {    "name": "colin"
}

// 通常的方法都很復雜，參見Stackoverflow: http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript

// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false

5) 產生區間隨機數

// 生成15到20的隨機數

// 使用原生Math.random()方法
function getRandomNumber(min, max){    return Math.floor(Math.random() * (max - min)) + min;
}

getRandomNumber(15, 20);

// Lodash
_.random(15, 20);

_.random選項

_.random(20); // 返回0到20之間的隨機數
_.random(15, 20, true); // 返回15到20之間的浮點數

6) 對象擴展

// 為Object添加extend原型方法
Object.prototype.extend = function(obj) {    for (var i in obj) {        if (obj.hasOwnProperty(i)) {            this[i] = obj[i];        }    }
};

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};

objA.extend(objB);
objA; // {"name": "james", "age": 17, "car": "suzuki"};

// Lodash
_.assign(objA, objB);

擴展多個對象

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};
var objC = {"pet": "dog"};

// Lodash
_.assign(objA, objB, objC); // {"name": "james", "car": "suzuki", "age": 17, "pet": "dog"}

7) 刪除對象屬性

// 原生方法:
Object.prototype.remove = function(arr) {    var that = this;    arr.forEach(function(key){        delete(that[key]);    });
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};
objA.remove(['car', 'age']);
objA; // {"name": "colin"}

// Lodash
objA = _.omit(objA, ['car', 'age']); // {"name": "colin"}

其他用法：

var objA = {"name": "colin", "car": "suzuki", "age": 17};

// Lodash
objA = _.omit(objA, 'car'); // {"name": "colin", "age": 17};
objA = _.omit(objA, _.isNumber); // {"name": "colin"};

8) 選擇對象的一些屬性組成新的對象

// 為Object添加pick原型方法
Object.prototype.pick = function(arr) {    var _this = this;    var obj = {};    arr.forEach(function(key){        obj[key] = _this[key];    });    return obj;
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};
var objB = objA.pick(['car', 'age']);// {"car": "suzuki", "age": 17}

// Lodash
var objB = _.pick(objA, ['car', 'age']);// {"car": "suzuki", "age": 17}

9) 隨機選擇數組元素

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];

function pickRandomPerson(luckyDraw){    var index = Math.floor(Math.random() * (luckyDraw.length -1));    return luckyDraw[index];
}

pickRandomPerson(luckyDraw); // John

// Lodash
_.sample(luckyDraw); // Colin

隨機選擇多個元素

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];

// Lodash
item_.sample(luckyDraw, 2); // ['John','Lily']

10) JSON.parse的錯誤處理

// 使用try-catch捕捉JSON.parse錯誤
function parse(str){    try {        return JSON.parse(str);    }    catch {        return false;    }
}

// Lodash
function parseLodash(str){    return _.attempt(JSON.parse.bind(null, str));
}

parse('a'); // false
parseLodash('a'); // 返回error對象

parse('{"name": "colin"}'); // 返回{"name": "colin"}
parseLodash('{"name": "colin"}'); // 返回{"name": "colin"}

http://mp.weixin.qq.com/s?__biz=MzIwMTQzMjkyMA==&mid=209335507&idx=1&sn=38ee5915230ac244d0441bf07aaf4eff&scene=23&srcid=1002VndshHJRyNzWMTMHJPop#rd