ユーティリティライブラリLodash

5360 ワード

javascript 先端 vue.js node.js react.js

Lodashは開発者の効率を向上させ、元のJS方法の性能を向上させることができるJavaScript第三者用のツールライブラリです.

Lodashの特徴は 、、 です.業界は非常に有名で、他の第三者の依存を導入する必要はありません.私達は利用する過程でができます.(特に、モジュール化は、機能に適合する関数の作成、アレー、オブジェ、およびstring(文字列)の作成などに適しています.

Lodashは簡単な_シンボルを使用しています.とても簡潔です.

一、Lodashを導入する
Lodash.jsを使って、Lodash.js開発パッケージを導入する方法はいくつかあります.

jsオフラインファイルの導入:直接中国語ネットに関連するローダsh.jsパッケージをダウンロードして、自分の開発プロジェクトに置いて、必要なファイルに導入する:< script src="lodash.js">< /script>

cdn方式は、一般的にbootcdnを使用して直接オンラインに導入され、その後cdn加速ファイルダウンロードによってアクセスする:< script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js">< /script >

直接インストール依存注入により、webpackまたはglupのパッケージモードを使って、自分のプロジェクトにlodashの依存パケットを直接マウントします.具体的には以下の通りです.

インストール依存

    $ npm i \-g npm  
    $ npm i \--save lodash

は、必要に応じて、依存パケットをマウントし、例

    // Load the full build.  
    var \_ \= require('lodash');  
    // Load the core build.  
    var \_ \= require('lodash/core');  
    // Load the FP build for immutable auto-curried iteratee-first data-last methods.  
    var fp \= require('lodash/fp');  

    // Load method categories.  
    var array \= require('lodash/array');  
    var object \= require('lodash/fp/object');  

    // Cherry-pick methods for smaller browserify/rollup/webpack bundles.  
    var at \= require('lodash/at');  
    var curryN \= require('lodash/fp/curryN');

注意:Node.js<6の
REPL環境ではLodashを使用していますので、インストールしてください.n_二、ローダッシュを使う

のLodashを選んだ理由は、Lodashが配列、数字、オブジェクト、文字列などの方法を使うことによって、JavaScriptがより簡単になり、開発効率が大幅に向上したからです.

以下の方法では、関連するlosh依存パケットを導入すると、関連する公式文書から直接に関連する方法を呼び出して

を実行することができる.

_.cloneDeep(クローニング)周知のように、JSにおける深さクローニングオブジェクトは比較的困難であり、例:JSON.parse(JSON.strigify(Obj)は深さクローニングを行う.しかし、このような案は対象の内部で方法がない時だけ可能です.そうでないとだめです.

var obj ={  
     a:{  
     b:100,  
     fun:function(){  
         console.log("fun");  
         }  
     }  
}  
 var obj2 = _.cloneDeep(obj);  
  
 obj.a.b=2000;  
  
 console.log(obj2.a.b,obj.a.b);  // 100  2000  
 obj2.a.fun();

_.compact(array)は、元の配列内のすべての偽値要素を除去する配列を作成する.例えばfalse、null、0、「」、undefined、およびNaNは「false」と考えられています.

 var arr =[1,2,'',null,0,33,"aa"];  
 var temArr =  _.compact(arr);  //     null 0 false       
 console.log(temArr);    // [ 1, 2, 33, 'aa' ]

_.concat(array, [values])は、任意の配列または値と接続された新しい配列を作成し、接続後の新しい配列を返します.

var array = [1,2,3];
var other = _.concat(array, 2, [3], [[4,5,6]]);

console.log(other); // [ 1, 2, 3, 2, 3, [ 4, 5, 6 ] ]

console.log(array); // [ 1, 2, 3 ]

_.chunk(array, [size=1])は、sizeサイズに従ってarray配列を分割し、配列を複数のsize長さのブロックに分割し、これらのブロックを新たな配列に構成する.もしarrayがすべての等長のブロックに分割できないなら、最後の残りの要素はブロックを構成します.分割ブロックを含む新しい配列を返します.

var chunk1 = _.chunk(['a', 'b', 'c', 'd'], 2);
 console.log(chunk1);      // [['a', 'b'], ['c', 'd']]
var chunk2 = _.chunk(['a', 'b', 'c', 'd'], 3);
 console.log(chunk2);      // [['a', 'b', 'c'], ['d']]

_.includes(obj,ele,index)の最初のパラメータはクエリーが必要なオブジェクトであり、第二のパラメータはクエリが必要な要素であり、第三のパラメータはクエリが開始される下付きパラメータである.

var obj = {
    'name': '  ',
    'age': 18
},
arr = ["  ", "  ", "  ", "  "];
console.log(_.includes(obj, '  '));    // true
console.log(_.includes(arr, '  '));    // true
console.log(_.includes(arr, '  ',2));  // false

_.times()は、forよりも簡潔で分かりやすい.

_.times(5,function(a){
console.log(a);  // 0 1 2 3 4
});

_.map()は、元のJSにおける配列方法のアップグレードバージョンであり、レプリカ関数ではなく文字列を通して、深さネストのオブジェクト属性

var arr = [{
    "name": "  ",
    "phone": [{"name": "MI"}, {"name": "iphone"}]
}, {
    "name": "  ",
    "phone": [{"name": "HUAWEI"}, {"name": "honor"}]
}];
var jsMap = arr.map(function (owner) {
    return owner.phone[0].name;
});
var lodashMap = _.map(arr, 'phone[0].name');
console.log(lodashMap);    // MI  HUAWEI

を閲覧することができる.

_.random ()本方法も比較的に強力で柔軟であり、一つのパラメータだけを最大値として入力することができ、また戻った結果を浮動小数点として指定することもできる.例:

function randomNum(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
}
console.log(randomNum(12, 18));

console.log(_.random(12, 18));

先にこんなに多く書いて、自分で中国語の文書を調べられる方法がたくさんあります.詳しいですよ.これらの方法をテストしたり勉強したりする時に問題があったら、下の方にメッセージや私信を書いてください.
サポート:chrome 43以上、Firefox 38以上、IE 6以上、MS Edge、Safari 5以上、Node.js 8以上の環境でテストに合格しました.

ngxinは二重ルールを判断する.