あなたが知らない JavaScript の 10 のトリック

1. 変数変換
非常に単純に見えますが、これまで見てきた限りでは、Array() や Number() などのコンストラクターを使用して変数変換を実行するのが一般的です。変数の変換には常にプリミティブ データ型 (リテラルと呼ばれることもあります) を使用してください。追加の影響はありませんが、より効率的です。
var myVar = "3.14159",
str = ""+ myVar,// string
int = ~~myVar, // integer
float = 1*myVar, // float
bool = !!myVar, / * ブール値へ - 長さ
の文字列と 0 以外の数値は true */
array = [myVar] // 配列
に日付 (new Date(myVar)) と正規表現 (new RegExp(myVar)) を変換しますコンストラクターを使用する必要があり、正規表現を作成するときは /pattern/flags 形式を使用する必要があります。

2. 10 進数を 16 進数または 8 進数に、またはその逆に変換します
16 進数 (または 8 進数) を変換する別の関数を作成できますか?今すぐやめて！より簡単な既製の関数が利用可能です:
(int).toString(16); // int を 16 進数に変換します。例: 12 => "C"
(int).toString(8); // int を 8 進数に変換します。例: 12 => "14"
parseInt(string,16) // 16 進数を int に変換します。例: "FF" => 255
parseInt(string,8) // 8 進数を int に変換します。例: "20" = > 16
3. 数値を使って遊ぶ
前のセクションで紹介したものに加えて、数値を処理するためのヒントをさらに紹介します
0xFF; // 16 進数の宣言、255
020 を返します。 // 指数関数は 1 * Math.pow(10,3) と同じで、1000
(1000).toExponential() を返します。 // 前のものとは逆で、1e3
(3.1415).toFixed(3) を返します。数値、「3.142」を返します
4.JavaScript バージョンの検出
あなたのブラウザがサポートしている Javascript のバージョンを知っていますか?分からない場合は、Wikipedia にアクセスして Javascript のバージョン表を確認してください。何らかの理由で、JavaScript 1.7 の一部の機能は広くサポートされていません。ただし、ほとんどのブラウザはバージョン 1.8 および 1.8.1 の機能をサポートしています。 (注: すべての IE ブラウザ (IE8 以前) は Javascript バージョン 1.5 のみをサポートします) 以下は、機能を検出することで JavaScript バージョンを検出するだけでなく、特定の JavaScript バージョンでサポートされている機能を確認できるスクリプトです。
var JS_ver = [];
(Number.prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false ;
((function(){try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"): false;
([].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;
JS_ver.supports = function()
{
if (arguments[0])
return (!!~this.join().indexOf(arguments[0] +",") +",");
else
return (this[this.length-1]);
}
alert("サポートされている最新の Javascript バージョン: "+ JS_ver.supports());
alert("バージョン 1.7 のサポート: "+ JS_ver.supports("1.7") );
5. 単純なセッション処理には window.name を使用します
これは私がとても気に入っている点です。タブまたはウィンドウを閉じるまで、window.name プロパティの値として文字列を指定できます。スクリプトは提供していませんが、この方法を活用することを強くお勧めします。たとえば、Web サイトやアプリケーションを構築する場合、デバッグ モードとテスト モードを切り替えると非常に便利です。
6. 属性が存在するかどうかを判断する
この問題には、属性の存在を確認するだけでなく、属性の型を取得するという 2 つの側面が含まれています。しかし、私たちはいつもこれらの小さなことを見落とします:
// BAD: foo が未定義の場合、コードでエラーが発生します
if (foo) {
doSomething();
}
// GOOD: これはエラーを引き起こしません。ただし、
// foo が NULL または false に設定されている場合でも、条件は true として検証されます
if (typeof foo != "unknown") {
doSomething();
}
// より良い: これにより、何も問題が発生しません。エラーとそれに加えて
// 値 NULL または false は true として検証されません
if (window.foo) {
doSomething();
}
ただし、より深い構造があり、より多くの適切な処理が必要な場合があります。 check は次のようになります:
// 醜い: プロパティが実際に存在することを確認する前に、すべての
// オブジェクトの存在を証明する必要があります
if (window.oFoo && oFoo.oBar && oFoo.oBar.baz) {
doSomething ();
}
7. 関数にパラメーターを渡します
関数に必須パラメーターとオプションのパラメーターの両方がある場合は、次のようにします:
function doSomething(arg0, arg1, arg2, arg3, arg4 ) {
...
}
doSomething('', 'foo', 5, [], false);
そして、オブジェクトを渡すことは、大量のパラメーターを渡すよりも常に便利です:
function doSomething() {
// 何も渡されなければ関数を終了します
if (!arguments[0]) {
return false;
}
var oArgs = argument[0]
arg0 = oArgs.arg0 || "",
arg1 = oArgs.arg1 || "",
arg2 = oArgs.arg2 || 0,
arg3 = oArgs.arg4 ||
}
doSomething({
arg1 : "foo",
) arg2 : 5,
arg4 : false
});
これは、オブジェクトをパラメータとして渡す非常に単純な例です。たとえば、変数名を Key 、デフォルト値を Value としてオブジェクトを宣言することもできます。 。
8. document.createDocumentFragment() を使用する
複数の要素をドキュメントに動的に追加する必要がある場合があります。ただし、それらをドキュメントに直接挿入すると、毎回ドキュメントを再レイアウトする必要があります。代わりに、ドキュメントのフラグメントを使用し、完了後に 1 回だけ追加する必要があります。
function createList() {
var aLI = ["first item。 ", "2番目の項目", "3番目の項目",
"4番目の項目", "5番目の項目"];
// フラグメントを作成します
var oFrag = document.createDocumentFragment();
while (aLI.length) {
var oLI = document.createElement("li");
// 配列から最初の項目を削除し、追加します
// テキストノードとして LI 要素に追加します
oLI.appendChild(document.createTextNode(aLI.shift()));
oFrag.appendChild(oLI);
}
document.getElementById('myUL').appendChild(oFrag);
}
9. replace() メソッドに関数を渡します
ある部分を置き換えたい場合があります。 string 他の値の場合、別の関数を String.replace() に渡すのが最善の方法です。簡単な例を次に示します。
var sFlop = "Flop: [Ah] [Ks] [7c]";
var aValues = {"A":"Ace","K":"King",7:";セブン" };
var aSuits = {"h":"ハート","s":"スペード",
"d":"ダイヤモンド","c":"クラブ"};
sFlop = sFlop.replace( /[ w+]/gi, function(match) {
match = match.replace(match[2], aSuits[match[2]]);
match = match.replace(match[1], aValues[match[1] ]] +" of ");
return match;
});
// 文字列 sFlop には次が含まれます:
// "Flop: [Ace of Hearts] [King of Spades] [Seven of Clubs]"
10. in ループ www.2cto.com を使用します
ループ内にループがネストされている場合があります。ループ内で終了したい場合は、タグ
outerloop:
for (var iI=0;iI<5;iI++) を使用できます。 ) {
if (somethingIsTrue()) {
// 外側ループの反復を中断します
break externalloop;
}
innerloop:
for (var iA=0;iA<5;iA++) {
if (somethingElseIsTrue()) {
// 内部ループの反復を中断します
break innerloop;
}
}
}