Reduce LOC and improve clarity of your application logic with Lodash
創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷人員及形象策劃。承接：網(wǎng)站制作、做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫(kù)開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。
August 4, 2015
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. 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.
// 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
_.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.
// 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.
// 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.
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 // falseDeep-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.
// 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.
_.random(20); // Return random number between 0 to 20_.random(15, 20, true); // Return random floating numbers between 15 and 20
// 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.
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"}// 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.
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.
// 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.
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); // ColinThe _.sample method also comes with an additional bonus feature - Selecting multiple random item from list.
var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];// Lodash - Getting 2 random item_.sample(luckyDraw, 2); // ['John','Lily']
// 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.
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. 使用for循環(huán)
for(var i = 0; i < 5; i++) {
// ....
}
// 2. 使用Array的join和split方法
Array.apply(null, Array(5)).forEach(function(){
// ...
});
// Lodash
_.times(5, function(){
// ...
});
// 獲取每個(gè)元素pets數(shù)組的首個(gè)對(duì)象的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');
// 創(chuàng)建長(zhǎng)度為6的數(shù)組序列，數(shù)組元素以"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_'));
var objA = {
"name": "colin"
}
// 通常的方法都很復(fù)雜，參見Stackoverflow: http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript
// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false
// 生成15到20的隨機(jī)數(shù)
// 使用原生Math.random()方法
function getRandomNumber(min, max){
return Math.floor(Math.random() * (max - min)) + min;
}
getRandomNumber(15, 20);
// Lodash
_.random(15, 20);
_.random(20); // 返回0到20之間的隨機(jī)數(shù)
_.random(15, 20, true); // 返回15到20之間的浮點(diǎn)數(shù)
// 為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"}
// 原生方法:
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"};
// 為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}
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']
// 使用try-catch捕捉JSON.parse錯(cuò)誤
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對(duì)象
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
