Lodashでよく使われる10のツール関数
23698 ワード
JavaScriptを使用してプログラミングを行う場合は、文字列やオブジェクトの処理など、ツール関数を繰り返し書く必要があります.ES 6が標準化されても、JavaScript開発者はObjective-CやRubyのように多くの文法糖を得ることができません.したがって、JavaScriptアプリケーションでは、多くのツール関数が繰り返し記述されています.本文があなたに持ってくる救いの星はLoadshです.
ここでは、Loadashの一般的なツール関数10個について説明します.もちろん、異なる作業では、他のツール関数も必要になる可能性があります.ここでは、Lodashの入門の引数として、完全な関数リストはLodashのAPIドキュメントを参照してください.本明細書で使用するLodashバージョンは
Statement
原文住所:http://colintoh.com/blog/lodash-10-javascript-utility-functions-stop-rewriting
サイクル数N回
配列を反復し、各項目の深さネストさのプロパティを返します.
Lodashの
Nサイズの配列を作成し、同じ接頭辞を追加します.
前の例から
深度クローンJavaScriptオブジェクト
JavaScriptオブジェクトの深度クローンは困難であり、簡単な解決策もありません.オリジナルのソリューション:
Lodashは、オブジェクトの深度クローン操作を簡単に完了するための
指定した範囲内でランダム値を取得
Lodashの
拡張オブジェクト
オブジェクトの一部のプロパティを削除
元のルートでは、パラメータとして配列しか伝達できません.文字列パラメータを単一keyで削除したり、コンパレータに転送したりしたい場合があります.
オブジェクトから属性の一部を選択して新しいオブジェクトを構成
リストからランダムに選択リストアイテム
また、要素をランダムに返す個数を指定することもできます.
JSON.parseのエラー処理
小結
Lodashはあなたのために非常に小さな細部の問題を解決することができて、JavaScriptプロジェクトでそれを使用することをお勧めします.それはあなたのコードをもっと簡素に見せることができて、もっと丈夫で、多くの繰り返しの応用ロジックを避けることができます.また,Lodashはプログラミングを関数的に考えるように迫っている.アプリケーションをいくつかの小さなモジュールに分割することができます.このモジュール化により、テスト時のアプリケーションのコードオーバーライド率が向上します.
ここでは、Loadashの一般的なツール関数10個について説明します.もちろん、異なる作業では、他のツール関数も必要になる可能性があります.ここでは、Lodashの入門の引数として、完全な関数リストはLodashのAPIドキュメントを参照してください.本明細書で使用するLodashバージョンは
3.10.1
です.Statement
原文住所:http://colintoh.com/blog/lodash-10-javascript-utility-functions-stop-rewriting
サイクル数N回
// 1. Basic for loop.
for(var i = 0; i < 5; i++) {
// ....
}
// 2. Using Array's join and split methods
Array.apply(null, Array(5)).forEach(function(){
// ...
});
// Lodash
_.times(5, function(){
// ...
});
for
サイクルは一般的な使用シーンであるが、追加の変数汚染作用ドメイン(scope)が導入される.配列とapply
法を組み合わせてforサイクルを直接使用することを避けることができ、作用域汚染の問題も回避できます.しかし、この書き方は直感的ではない.Lodashの全体的な_.times
の方法は非常に直感的で使いやすい.配列を反復し、各項目の深さネストさのプロパティを返します.
// Fetch the name of the first pet from each owner
var 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の
map
メソッドとJavaScriptのオリジナルの配列メソッドは非常に似ていますが、非常に有用なアップグレードがあります.コールバック関数ではなく文字列を使用して、深度ネストされたオブジェクトプロパティにナビゲートできます.Nサイズの配列を作成し、同じ接頭辞を追加します.
// 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_'));
前の例から
_.times
の役割が知られている._.uniqueId
メソッドと組み合わせると、より簡潔なソリューションが得られます.宣言コンテキストを繰り返したくない場合は、Lodashもオプションのスキームを提供します..bind(null,...)
の使用を避ける// Lodash
_.times(6, _.partial(_.uniqueId, 'ball_'));
_.partial
法が完了した作業は、現在のコンテキストがbind()
であると仮定する以外は、オリジナルのthis
法と類似している.したがって、コンテキストパラメータを追加的に指定する必要はありません.深度クローンJavaScriptオブジェクト
var objA = {
"name": "colin"
}
// Normal method? Too long. See Stackoverflow for solution: http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript
// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false
JavaScriptオブジェクトの深度クローンは困難であり、簡単な解決策もありません.オリジナルのソリューション:
JSON.parse(JSON.stringify(objectToClone))
を使用して深さクローンを作成できます.しかし,このスキームはオブジェクト内部に方法がない場合にのみ可能である.Lodashは、オブジェクトの深度クローン操作を簡単に完了するための
_.cloneDeep
メソッドを提供します.もちろん、_.clone
を使用してクローンの深さを柔軟に指定することもできます.指定した範囲内でランダム値を取得
// Get a random number between 15 and 20.
// Naive utility method
function getRandomNumber(min, max){
return Math.floor(Math.random() * (max - min)) + min;
}
getRandomNumber(15, 20);
// Lodash
_.random(15, 20);
Lodashの
random
法は,上記の原生法よりも強く柔軟である.最大値として1つのパラメータのみを入力することもできます.また、返される結果を浮動小数点数として指定することもできます._.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.prototype
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);
_.assign
メソッドは、複数のパラメータオブジェクトを受信して拡張することもできる.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 object
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"}
元のルートでは、パラメータとして配列しか伝達できません.文字列パラメータを単一keyで削除したり、コンパレータに転送したりしたい場合があります.
var objA = {"name": "colin", "car": "suzuki", "age": 17};
// Lodash
objA = _.omit(objA, 'car'); // {"name": "colin", "age": 17};
objA = _.omit(objA, _.isNumber); // {"name": "colin"};
_.omit
メソッドは、元のオブジェクトを変更することなく、新しいオブジェクトを返します.オブジェクトから属性の一部を選択して新しいオブジェクトを構成
// 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}
// Lodash
var objB = _.pick(objA, ['car', 'age']);
// {"car": "suzuki", "age": 17}
_.pick
メソッドは、_.omit
メソッドとは正反対で、オブジェクトから指定した属性を選択して新しいオブジェクトにアセンブリされます._.omit
と同様に、_.pick
も新しいオブジェクトを返し、文字列、配列、比較器関数を入力することができる.リストからランダムに選択リストアイテム
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 - Getting 2 random item
_.sample(luckyDraw, 2); // ['John','Lily']
JSON.parseのエラー処理
// Using try-catch to handle the JSON.parse error
function parse(str){
try {
return JSON.parse(str);
}
catch {
return false;
}
}
// With Lodash
function parseLodash(str){
return _.attempt(JSON.parse.bind(null, str));
}
parse('a'); // false
parseLodash('a'); // Return an error object
parse('{"name": "colin"}'); // Return {"name": "colin"}
parseLodash('{"name": "colin"}'); // Return {"name": "colin"}
JSON.parse
を使用する場合は、必ずエラー処理を行うことを覚えておいてください.処理しなくても、大きな安全上の危険になる可能性が高い.あなたが受信したものが正しく有効なJSONオブジェクトであるとは決して仮定しないでください.オリジナルのtry...catch
を使用してエラー処理を行う代わりに、_.attempt
の方法を使用することができます.エラーが発生すると、Error
オブジェクトが返されます.小結
Lodashはあなたのために非常に小さな細部の問題を解決することができて、JavaScriptプロジェクトでそれを使用することをお勧めします.それはあなたのコードをもっと簡素に見せることができて、もっと丈夫で、多くの繰り返しの応用ロジックを避けることができます.また,Lodashはプログラミングを関数的に考えるように迫っている.アプリケーションをいくつかの小さなモジュールに分割することができます.このモジュール化により、テスト時のアプリケーションのコードオーバーライド率が向上します.