Underscore.js_Othersの一般的なメソッドのまとめ-jsチュートリアル-php.cn

概要

Underscore.js は非常に無駄のないライブラリで、圧縮されたのはわずか 4KB です。これは、JavaScript プログラミングを大幅に容易にする、数十の関数型プログラミング手法を提供します。 MVC フレームワーク backbone.js はこのライブラリに基づいています。

アンダースコア (_) オブジェクトを定義しており、関数ライブラリのすべてのメソッドがこのオブジェクトに属します。これらのメソッドは、コレクション、配列、関数、オブジェクト、ユーティリティの 5 つのカテゴリに大別できます。

node.js の下にインストールします

Underscore.js はブラウザ環境だけでなく、node.js でも使用できます。インストールコマンドは次のとおりです:

コードをコピーコードは次のとおりです:

npm install アンダースコア

ただし、node.jsでは_を変数名として直接使用することができないため、以下のメソッドでunderscore.jsを使用します。

コードをコピーコードは次のとおりです:

var u = require("アンダースコア");

コレクションに関連するメソッド

JavaScript 言語のデータコレクションには、配列とオブジェクトという 2 つの構造が含まれます。次の方法は両方の構造に適用されます。

地図

このメソッドは、コレクションの各メンバーに対して何らかの操作を順番に実行し、返された値を新しい配列に格納します。

コードをコピーコードは次のとおりです:

_.map([1, 2, 3], function(num){ return num * 3; }); // [3, 6, 9] _.map({1 : 1, 2 : 2, 3 : 3) }, function(num, key){ return num * 3 });

それぞれ

このメソッドはマップに似ており、コレクションの各メンバーに対して順番に何らかの操作を実行しますが、値を返しません。

コードをコピーコードは次のとおりです:

_.each([1, 2, 3], アラート); _.each({1 : 1, 2 : 2, 3 : 3}, アラート);

減らす

このメソッドは、セットの各メンバーに対して何らかの演算を順番に実行し、演算結果を特定の初期値に累積し、すべての演算が完了した後に累積された値を返します。

このメソッドは 3 つのパラメータを受け取ります。最初のパラメーターは処理されるコレクション、2 番目のパラメーターは各メンバーで動作する関数、3 番目のパラメーターは蓄積に使用される変数です。

_.reduce([1, 2, 3], function(memo, num){ return memo num; }, 0); // 6

reduce メソッドの 2 番目のパラメーターは操作関数であり、この関数自体は 2 つのパラメーターを受け取ります。1 番目は累算に使用される変数で、2 番目はセットの各メンバーの値です。

フィルターと拒否

フィルターメソッドは、コレクションの各メンバーに対して何らかの操作を順番に実行し、操作結果が true であるメンバーのみを返します。

コードをコピーコードは次のとおりです:

_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // [2, 4, 6]

拒否メソッドは、操作結果が false のメンバーのみを返します。

コードをコピーコードは次のとおりです:

_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // [1, 3, 5]

あらゆるもの

every メソッドは、コレクションの各メンバーに対して順番に何らかの操作を実行します。すべてのメンバーの操作結果が true の場合は true を返し、それ以外の場合は false を返します。

コードをコピーコードは次のとおりです:

_.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // false

一部のメソッドは、1 つのメンバーの演算結果が true である限り true を返し、それ以外の場合は false を返します。

コードをコピーコードは次のとおりです:

_.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // true

見つける

このメソッドは、コレクションの各メンバーに対して何らかの操作を順番に実行し、操作結果が true である最初のメンバーを返します。すべてのメンバーの演算結果が false の場合は、unknown が返されます。

コードをコピーコードは次のとおりです:

_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // 2

には

が含まれます

値がコレクション内にある場合、このメソッドは true を返し、それ以外の場合は false を返します。

コードをコピーコードは次のとおりです:

_.contains([1, 2, 3], 3); // true

countBy

このメソッドは、集合の各メンバーに対して何らかの演算を順番に実行し、同じ演算結果を持つメンバーを 1 つのカテゴリとしてカウントし、最後に各演算結果に対応するメンバーの数を示すオブジェクトを返します。

コードをコピーコードは次のとおりです:

_.countBy([1, 2, 3, 4, 5], function(num) { return num % 2 == 0 ? 'even' : 'odd'; }); // {奇数: 3, 偶数: 2 }

シャッフル

このメソッドはシャッフルされたコレクションを返します。

コードをコピーコードは次のとおりです:

_.shuffle([1, 2, 3, 4, 5, 6]) // [4, 1, 6, 3, 5, 2]

サイズ

このメソッドは、コレクションのメンバーの数を返します。

コードをコピーコードは次のとおりです:

_.size({1 : 1, 2 : 2, 3 : 3}); // 3

オブジェクトに関連するメソッド

toArray

このメソッドはオブジェクトを配列に変換します。

コードをコピーコードは次のとおりです:

_.toArray({a:0,b:1,c:2}) // [0, 1, 2]

摘む

このメソッドは、複数のオブジェクトの特定の属性の値を配列に抽出します。

コードをコピーコードは次のとおりです:

var stooges = [{name : 'moe', 年齢 : 40}, {name : 'larry', 年齢 : 50}, {name : 'curly', 年齢 : 60}]; ); // [「萌え」、「ラリー」、「カーリー」]

関数に関連するメソッド

バインド

このメソッドは関数の実行時コンテキストをバインドし、それを新しい関数として返します。

コードをコピーコードは次のとおりです:

_.bind(関数, オブジェクト, [*引数])

以下の例を参照してください。

コードをコピーコードは次のとおりです:

var o = { p: 2, m: function (){console.log(p);} }; o.m() // 2 _.bind(o.m,{p:1})() // 1

すべてバインド

このメソッドは、(特に指定されていない限り) オブジェクトのすべてのメソッドをオブジェクトにバインドします。

コードをコピーコードは次のとおりです:

var buttonView = { label : 'アンダースコア', onClick : function(){alert('clicked: ' this.label) }, onHover : function(){ console.log('hovering: ' this.label); ; _.bindAll(buttonView);

部分的

このメソッドバインディングは関数をパラメーターにバインドし、それを新しい関数として返します。

コードをコピーコードは次のとおりです:

var add = function(a, b) { return a b; }; // 15

メモする

このメソッドは、特定のパラメーターに対する関数の実行結果をキャッシュします。

コードをコピーコードは次のとおりです:

var fibonacci = _.memoize(function(n) { return n

関数に複数のパラメーターがある場合、キャッシュを識別するハッシュ値を生成するために hashFunction を提供する必要があります。

遅延

このメソッドは、関数の実行を指定した時間延期できます。

コードをコピーコードは次のとおりです:

var log = _.bind(console.log, console) _.lay(log, 1000, '後でログに記録'); // '後でログに記録'

延期

このメソッドは、setTimeout による実行の遅延の効果と同様に、実行されるタスクの数が 0 に達するまで関数の実行を延期できます。

コードをコピーコードは次のとおりです:

_.defer(function(){alert('deferred'); });

スロットル

このメソッドは、関数の新しいバージョンを返します。この新しいバージョンの関数を連続して呼び出す場合は、次の実行をトリガーするまでに一定時間待機する必要があります。

コードをコピーコードは次のとおりです:

// updatePosition 関数の新しいバージョンを返します var throttled = _.throttle(updatePosition, 100) // 関数の新しいバージョンは 100 ミリ秒ごとにのみトリガーされます $(window).scroll(throttled);

デバウンス

このメソッドは、関数の新しいバージョンも返します。この新しいバージョンの関数が呼び出されるたびに、前の呼び出しの間に一定の時間が必要です。そうでないと、呼び出しは無効になります。その典型的な用途は、ユーザーがボタンをダブルクリックしてフォームが 2 回送信されるのを防ぐことです。

コードをコピーコードは次のとおりです:

$("ボタン").on("クリック", _.debounce(submitForm, 1000));

1 回

このメソッドは関数の新しいバージョンを返すため、この関数は 1 回だけ実行できます。主にオブジェクトの初期化に使用されます。

コードをコピーコードは次のとおりです:

varInitialize = _.once(createApplication); // アプリケーションは 1 回だけ作成されます

後

このメソッドは、関数の新しいバージョンを返します。この関数は、主に、反応する前に一連の操作が完了したことを確認するために使用されます。

コードをコピーコードは次のとおりです:

var renderNotes = _.after(notes.length, render); _.each(notes, function(note) { note.asyncSave({success: renderNotes}); }); // すべてのノートが保存された後、renderNote が実行されます。 1 回のみ実行

ラップ

このメソッドは関数をパラメータとして受け取り、それを別の関数に渡し、最終的に前の関数の新しいバージョンを返します。

コードをコピーコードは次のとおりです:

var hello = function(name) { return "hello: " name }; hello = _.wrap(hello, function(func) { return "before, " func("moe") "; }); (); // '前、こんにちは: もえ、後'

作成

このメソッドは、一連の関数をパラメーターとして受け取り、前の関数の実行結果が次の関数の実行パラメーターとして使用されます。つまり、f(g(),h()) の形式を f(g(h())) に変換します。

コードをコピーコードは次のとおりです:

var welcome = function(name){ return "こんにちは: " name; var exclaim = function(statement){ return ステートメント "!" }; var welcome = _.compose('moe') ); // 'こんにちは!'

ツールメソッド

テンプレート

このメソッドは、HTML テンプレートをコンパイルするために使用されます。 3 つのパラメータを受け入れます。

コードをコピーコードは次のとおりです:

_.template(templateString, [データ], [設定])

3 つのパラメータの意味は次のとおりです:

templateString: テンプレート文字列
データ: 入力テンプレートデータ
設定: 設定

テンプレート文字列

テンプレート文字列 templateString は通常の HTML 言語であり、変数は <%= ... %> の形式で挿入されます。データオブジェクトは変数の値を提供します。

コードをコピーコードは次のとおりです:

var txt = "

コードをコピーコードは次のとおりです:

"; _.template(txt, {word : "Hello World"}) // "

Hello World

コードをコピーしますコードは次のとおりです:

「

変数の値に 5 つの特殊文字 (& < > ” ‘ /) が含まれる場合は、<%- … %> でエスケープする必要があります。

コードをコピーコードは次のとおりです:

var txt = "

コードをコピーしますコードは次のとおりです:

"; _.template(txt, {word : "H&W"}) //

H&W

JavaScript コマンドは <% … %> の形式で挿入できます。以下は判決文の一例です。

コードをコピーコードは次のとおりです:

var txt = "" ""; word : "Hello World"}) // Hello World

一般的な使用法には、ループステートメントが含まれます。

コードをコピーコードは次のとおりです:

var list = "<% _.each(people, function(name) { %>

<%= 名前 %> <% }); _.template(list, {people : ['moe', 'larry']}); 萌え
巻き毛
ラリー」
テンプレートメソッドに最初のパラメーター templateString のみがあり、2 番目のパラメーターを省略した場合、関数が返され、今後この関数にデータを入力できます。

コードをコピーコードは次のとおりです:

var t1 = _.template("こんにちは <%=user%>!"); t1({ user: "" }) // 'こんにちは !'

データ

templateString 内のすべての変数は内部的には obj オブジェクトの属性であり、obj オブジェクトは 2 番目のパラメーターデータオブジェクトを参照します。次の 2 つのステートメントは同等です。

コードをコピーコードは次のとおりです:

_.template("こんにちは !", { ユーザー: "" }) _.template("こんにちは !", { ユーザー: "" }) 

obj オブジェクトの名前を変更したい場合は、3 番目のパラメータで設定する必要があります。

コードをコピーコードは次のとおりです:

_.template("<%if (data.title) { %>タイトル: <%= title %><% } %>", null, { 変数: "データ" });

テンプレートは変数を置換するときに内部で with ステートメントを使用するため、上記のアプローチはより高速に実行されます。