javascript - 最高の JavaScript シンタックスシュガー

Question

ここにいくつかの宝石があります：

リテラル:

var obj = {}; // Object literal, equivalent to var obj = new Object();
var arr = []; // Array literal, equivalent to var arr = new Array();
var regex = /something/; // Regular expression literal, equivalent to var regex = new RegExp('something');

デフォルト:

arg = arg || 'default'; // if arg evaluates to false, use 'default', which is the same as:
arg = !!arg ? arg : 'default';

もちろん、匿名関数は知っていますが、それらをリテラルとして扱い、その場で (クロージャーとして) 実行できることは素晴らしいことです。

(function() { ... })(); // Creates an anonymous function and executes it

質問: javascript で使用できる他の優れた構文糖衣は何ですか?

score 58 · Accepted Answer

現在の日時をミリ秒単位で取得する:

Date.now()

たとえば、コードのセクションの実行時間を計るには、次のようにします。

var start = Date.now();
// some code
alert((Date.now() - start) + " ms elapsed");

score 33 · Accepted Answer

オブジェクトメンバーシップテスト:

var props = { a: 1, b: 2 };

(小道具の「a」) // true
(props の "b") // true
(props の "c") // false

score 26 · Accepted Answer

Mozilla (および報告によると IE7) では、次を使用して XML 定数を作成できます。

var xml = <elem></elem>;

変数を代入することもできます:

var elem = "html";
var text = "テキスト";
var xml = <{elem}>{text}</{elem}>;

score 26 · Accepted Answer

匿名関数とクロージャーを使用して、プライベート変数 (情報隠蔽) と関連する get/set メソッドを作成します。

var getter, setter;

(function()
{
   var _privateVar=123;
   getter = function() { return _privateVar; };
   setter = function(v) { _privateVar = v; };
})()

score 22 · Accepted Answer

プロトタイプの継承を介してネイティブ JavaScript 型を拡張できること。

String.prototype.isNullOrEmpty = function(input) {
    return input === null || input.length === 0;
}

score 21 · Accepted Answer

値と型===を比較するために使用します。

変数 i = 0;
var s = "0";

if (i == s) // 真

if (i === s) // false

score 21 · Accepted Answer

複数行の文字列:

var str = "これは \
すべての\
ストリング。";

文字列に空白を追加しないと後続の行をインデントできないため、一般的にはプラス演算子で連結することを好みます。しかし、これは優れたヒアドキュメント機能を提供します。

score 21 · Accepted Answer

配列の長さのサイズ変更

length プロパティは読み取り専用ではありません。これを使用して、配列のサイズを増減できます。

var myArray = [1,2,3];
myArray.length // 3 elements.
myArray.length = 2; //Deletes the last element.
myArray.length = 20 // Adds 18 elements to the array; the elements have the empty value. A sparse array.

score 16 · Accepted Answer

空の配列で結合メソッドを利用して、「-」などの文字列を特定の回数繰り返す:

var s = new Array(repeat+1).join("-");

繰り返し == 3 の場合は "---" になります。

score 15 · Accepted Answer

デフォルトの演算子と同様に、||はガード演算子です&&。

answer = obj && obj.property

とは対照的に

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}

score 13 · Accepted Answer

var tags = {
    name: "Jack",
    location: "USA"
};

"Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){
    return tags[match];
});

文字列置換のコールバックは便利です。

score 12 · Accepted Answer

ゲッターとセッター:

function Foo(bar)
{
    this._bar = bar;
}

Foo.prototype =
{
    get bar()
    {
        return this._bar;
    },

    set bar(bar)
    {
        this._bar = bar.toUpperCase();
    }
};

私たちに与えます：

>>> var myFoo = new Foo("bar");
>>> myFoo.bar
"BAR"
>>> myFoo.bar = "Baz";
>>> myFoo.bar
"BAZ"

score 5 · Accepted Answer

これは JavaScript 専用ではありませんが、コードを 3 行ほど節約できます。

check ? value1 : value2

score 4 · Accepted Answer

コンポーネントパーツの固定セットを使用する解析状況では、次のようになります。

var str = "John Doe";

「破壊代入」構文を使用して、結果を変数に直接代入できます。

var [fname, lname] = str.split(" ");
alert(lname + ", " + fname);

これは、次のものよりも少し読みやすいです。

var a = str.split(" ");
alert(a[1] + ", " + a[0]);

別の方法:

var [str, fname, lname] = str.match(/(.*) (.*)/);

これはJavascript 1.7の機能であることに注意してください。現時点では、Mozilla 2.0 以降および Chrome 6 以降のブラウザです。

score 4 · Accepted Answer

次の obj || {default:true} 構文:

これで関数を呼び出します: hello(neededOne && neededTwo && needThree) 1 つのパラメーターが未定義または false の場合、hello(false) が呼び出されます。

score 4 · Accepted Answer

4

Javascript 1.6のArray#forEach

myArray.forEach(function(element) { alert(element); });

于 2008-10-08T11:24:41.860 に答える

score 4 · Accepted Answer

4

levikの例についてもう少し：

var foo = (condition) ? value1 : value2;

于 2008-10-08T00:07:27.640 に答える

score 2 · Accepted Answer

単純に無名オブジェクトリテラルを作成します: ({})

例: オブジェクトが valueOf メソッドを持っているかどうかを知る必要があります:

var hasValueOf = !!({}).valueOf

おまけの構文シュガー: double-not '!!' ほとんどすべてのものを非常に簡潔にブール値に変換します。

score 2 · Accepted Answer

2

忘れてた：

(function() { ... }).someMethod(); // Functions as objects

于 2008-10-09T06:33:51.697 に答える

score 1 · Accepted Answer

json文字列をeval（）して、完全に入力されたデータ構造を取り戻すことができるのが大好きです。私はすべてを少なくとも2回書く必要があるのが嫌いです（1回はIE用、もう1回はMozilla用）。

score 1 · Accepted Answer

頻繁に使用されるキーワード（または任意のメソッド）をthsのような単純な変数に関連付ける

  var $$ = document.getElementById;

  $$('samText');

score 1 · Accepted Answer

デフォルトのフォールバック:

var foo = {}; // empty object literal

alert(foo.bar) // will alert "undefined"

alert(foo.bar || "bar"); // will alert the fallback ("bar")

実際の例:

// will result in a type error
if (foo.bar.length === 0)

// with a default fallback you are always sure that the length
// property will be available.
if ((foo.bar || "").length === 0)

score 1 · Accepted Answer

準「流暢なインターフェイス」を提供する JavaScript の Date クラス。これは、Date クラスから直接日付部分を抽出できないことを補います。

var today = new Date((new Date()).setHours(0, 0, 0, 0));

以下は、実際には Date オブジェクトではない数値のみを提供するため、完全な Fluent Interface ではありません。

var today = new Date().setHours(0, 0, 0, 0);

score 1 · Accepted Answer

これが私が発見したものです：関数を呼び出す前のnullチェック：

a = b && b.length;

これは、以下と同等の短いものです。

a = b ? b.length : null;

最良の部分は、プロパティチェーンを確認できることです。

a = b && b.c && b.c.length;

score 1 · Accepted Answer

リストを操作するのがいかに簡単かが気に入っています。

var numberName = ["zero", "one", "two", "three", "four"][number];

そしてハッシュ：

var numberValue = {"zero":0, "one":1, "two":2, "three":3, "four":4}[numberName];

他のほとんどの言語では、これは非常に重いコードになります。値のデフォルトも素敵です。エラーコードレポートの例:

var errorDesc = {301: "Moved Permanently",
                 404: "Resource not found",
                 503: "Server down"
                }[errorNo] || "An unknown error has occurred";

score 0 · Accepted Answer

0

int から文字列へのキャスト

var i = 12;
var s = i+"";

于 2009-03-31T13:49:59.317 に答える

score 0 · Accepted Answer

element.innerHTML = "";  // Replaces body of HTML element with an empty string.

要素のすべての子ノードを削除するためのショートカット。

javascript - 最高の JavaScript シンタックス シュガー

30 に答える 30

Related

Reference

javascript - 最高の JavaScript シンタックスシュガー