最高のjavascript構文糖
-
05-07-2019 - |
質問
いくつかの宝石があります:
リテラル:
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で利用できる他の優れた構文糖衣は何ですか?
解決
現在の日時をミリ秒として取得する:
Date.now()
たとえば、コードのセクションの実行時間を計るには:
var start = Date.now();
// some code
alert((Date.now() - start) + " ms elapsed");
他のヒント
オブジェクトメンバーシップテスト:
var props = { a: 1, b: 2 }; ("a" in props) // true ("b" in props) // true ("c" in props) // false
Mozilla(およびIE7)では、次を使用してXML定数を作成できます。
var xml = <elem></elem>;
変数を置き換えることもできます:
var elem = "html"; var text = "Some text"; var xml = <{elem}>{text}</{elem}>;
匿名関数とクロージャーを使用してプライベート変数(情報の非表示)と関連するget / setメソッドを作成します:
var getter, setter;
(function()
{
var _privateVar=123;
getter = function() { return _privateVar; };
setter = function(v) { _privateVar = v; };
})()
プロトタイプ継承を介してネイティブJavaScript型を拡張できる。
String.prototype.isNullOrEmpty = function(input) {
return input === null || input.length === 0;
}
===
を使用して値を比較およびタイプ:
var i = 0; var s = "0"; if (i == s) // true if (i === s) // false
複数行の文字列:
var str = "This is \ all one \ string.";
文字列に空白も追加しないと後続の行をインデントできないため、一般にプラス演算子で連結することを好みます。しかし、これは素晴らしい hereドキュメント機能を提供します。
アレイの長さを変更する
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.
&quot;-&quot;などの文字列の繰り返し空の配列でjoinメソッドを利用して特定の回数:
var s = new Array(repeat+1).join("-");
&quot; ---&quot;の結果繰り返し== 3の場合。
デフォルトの演算子と同様に、 ||
はガード演算子&amp;&amp;
です。
answer = obj && obj.property
ではなく
if (obj) {
answer = obj.property;
}
else {
answer = null;
}
var tags = {
name: "Jack",
location: "USA"
};
"Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){
return tags[match];
});
文字列置換のコールバックは便利です。
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"
これはJavaScript専用ではありませんが、3行のコードのように保存されます。
check ? value1 : value2
levikの例のもう少し:
var foo = (condition) ? value1 : value2;
Javascript 1.6の Array#forEach
myArray.forEach(function(element) { alert(element); });
次のオブジェクト|| {default:true}構文:
これで関数を呼び出す:hello(neededOne&amp;&amp; neededTwo&amp;&amp; needThree)1つのパラメーターが未定義またはfalseの場合、hello(false)を呼び出します。時々便利です
コンポーネントパーツの固定セットを使用した解析状況:
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 の機能です。現時点では、Mozilla 2.0以上およびChrome 6以上のブラウザです。
すぐに呼び出される矢印関数:
var test = "hello, world!";
(() => test)(); //returns "hello, world!";
忘れた:
(function() { ... }).someMethod(); // Functions as objects
単に({})で匿名オブジェクトリテラルを作成します
例:オブジェクトにvalueOfメソッドがあるかどうかを知る必要がある:
var hasValueOf = !!({})。valueOf
ボーナス構文糖:ダブルではない「!!」ほとんどすべてを非常に簡潔にブール値に変換します。
json文字列をeval()して、完全に読み込まれたデータ構造を取得できることが大好きです。 少なくとも2回すべてを書かなければならないことが嫌いです(IEでは1回、Mozillaでは1回)。
頻繁に使用されるキーワード(またはメソッド)を次のような単純な変数に割り当てる
var $ = document.getElementById;
$('samText');
セミの「Fluent Interface」を提供するJavaScriptのDateクラス。これは、Dateクラスから日付部分を直接抽出できないことを補います:
var today = new Date((new Date()).setHours(0, 0, 0, 0));
以下は実際にDateオブジェクトではない数値のみを提供するため、完全なFluentインターフェイスではありません。
var today = new Date().setHours(0, 0, 0, 0);
デフォルトのフォールバック:
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)
これは私が発見したものです:関数を呼び出す前のnullチェック:
a = b && b.length;
これは次のものと同等です:
a = b ? b.length : null;
最良の部分は、プロパティチェーンをチェックできることです:
a = b && b.c && b.c.length;
リストを操作するのがどれほど簡単かが大好きです:
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";
intから文字列へのキャスト
var i = 12;
var s = i+"";
element.innerHTML = ""; // Replaces body of HTML element with an empty string.
要素のすべての子ノードを削除するショートカット。
文字列を不可能な場合はデフォルトで0に整数に変換します。
0 | "3" //result = 3
0 | "some string" -> //result = 0
0 | "0" -> 0 //result = 0
いくつかの場合、ほとんどの場合0が悪い結果と見なされる場合に役立ちます
var a = 10;
var b = 20;
var text = `${a} + ${b} = ${a+b}`;
[ text ]変数は次のようになります!
10 + 20 = 30