web-dev-qa-db-ja.com

最高のJavaScript構文糖衣

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

リテラル：

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で利用できる他の素晴らしい構文糖は何ですか？

javascriptlanguage-featuressyntactic-sugar
81
eyelidlessness

現在の日時をミリ秒で取得します。

Date.now()

たとえば、コードのセクションの実行時間を計るには：

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

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

 var props = {a：1、b：2}; 
 
（ "a" in props）// true 
（ "b" in props） // true 
（ "c" in props）// false
33
Chris Noe

Mozilla（および伝えられるところによるとIE7）では、以下を使用してXML定数を作成できます。

 var xml = <elem> </ elem>;

変数を置き換えることもできます。

 var elem = "html"; 
 var text = "Some text"; 
 var xml = <{elem}> {text} </ {elem}>;
26
Chris Noe

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

var getter, setter;

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

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

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

使用する ===値を比較するandタイプ：

 var i = 0; 
 var s = "0"; 
 
 if（i == s）// true 
 
 if（i === s）// false
21
Chris Noe

複数行の文字列：

 var str = "これは\ 
すべて1つの\ 
文字列です。";

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

21
Chris Noe

配列の長さのサイズを変更します

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.
21
pramodc84

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

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

繰り返し== 3の場合、結果は「---」になります。

16
J c

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

answer = obj && obj.property

とは対照的に

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}
15
Skilldrick
var tags = {
    name: "Jack",
    location: "USA"
};

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

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

13
Serkan Yersen

ゲッターとセッター ：

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"
11
Jonny Buchanan

これはJavaScript専用ではありませんが、次の3行のコードのように保存されます。

check ? value1 : value2
5
levik

構成部品の固定セットを使用して状況を解析する場合：

var str = "John Doe";

「分解代入」synatxを使用して、結果を変数に直接代入できます。

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 機能であることに注意してください。つまり、現時点では、Mozilla2.0以降とChrome 6以上のブラウザです。

4
Chris Noe

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

var foo = (condition) ? value1 : value2;
4
VirtuosiMedia

Array＃forEach JavaScript 1.6

myArray.forEach(function(element) { alert(element); });
4
Pablo Cabrera

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

これを使用して関数を呼び出す：hello（neededOne && needTwo && needThree）1つのパラメーターが未定義またはfalseの場合、hello（false）を呼び出します時々便利

4
vvo

すぐに呼び出されるArrow関数：

var test = "hello, world!";
(() => test)(); //returns "hello, world!";
3
Gerard Simpson

忘れてた：

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

単純に：（{}）で匿名オブジェクトリテラルを作成します。

例：オブジェクトにvalueOfメソッドがあるかどうかを知る必要があります：

var hasValueOf = !!（{}）。valueOf

ボーナス構文糖：二重ではない「!!」ほとんどすべてを非常に簡潔にブール値に変換します。

2
mkoistinen

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

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";
1
manixrock

ここに私が発見したものがあります：関数を呼び出す前のnullチェック：

a = b && b.length;

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

a = b ? b.length : null;

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

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

このような単純な変数に頻繁に使用されるキーワード（または任意のメソッド）を割り当てる

  var $$ = document.getElementById;

  $$('samText');
1
RameshVel

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

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)
1
cllpse

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

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

以下は実際にはDateオブジェクトではない数値のみを提供するため、完全に流暢なインターフェイスではありません。

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

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

1
dicroce

テンプレートリテラル

var a = 10;
var b = 20;
var text = `${a} + ${b} = ${a+b}`;

text変数は次のようになります！

10 + 20 = 30

0
Mohan Kumar

不可能な場合は、文字列をデフォルトの0の整数に変換します。

0 | "3" //result = 3
0 | "some string" -> //result = 0
0 | "0" -> 0 //result = 0

場合によっては、主に0が悪い結果と見なされる場合に役立つことがあります

0
Raimonds

文字列キャストへの整数

var i = 12;
var s = i+"";
0
Martijn Laarman
element.innerHTML = "";  // Replaces body of HTML element with an empty string.

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

0
pramodc84