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