JavaScript プログラミングのための 10 の実践的なヒント_JavaScript スキル-jsチュートリアル-php.cn

JavaScript プログラミングのための 10 の実践的なヒント_JavaScript スキル

WBOY

リリース： 2016-05-16 16:51:53

オリジナル

1158 人が閲覧しました

この記事では、主に Javascript の初心者と中級開発者向けに、実践的な Javascript のヒントを 10 個挙げます。読者の皆様が、この記事から少なくとも 1 つの有益なヒントを学んでいただければ幸いです。

1. 変数変換

単純そうに見えますが、私が見た限りでは、Array() や Number() などのコンストラクターを使用して変数を変換するのが一般的です。変数の変換には常にプリミティブデータ型 (リテラルと呼ばれることもあります) を使用してください。追加の影響はありませんが、より効率的です。

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

var myVar = "3.14159",
str = "" myVar , // string
int = ~~myVar, // integer
float = 1*myVar, // float
bool = !!myVar, /* ブール値 - 任意の文字列長さが 
 で、0 以外の数値は true */
array = [myVar] // to array

;

日付 (new Date(myVar)) と正規表現 (new RegExp(myVar)) の変換にはコンストラクターを使用する必要があり、正規表現の作成時には /pattern/flags 形式を使用する必要があります。

2. 10 進数を 16 進数または 8 進数に、またはその逆に変換します

16 進数 (または 8 進数) を変換する別の関数を作成できますか?今すぐやめてください！より簡単な既製関数が利用可能です:

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

(int ).toString(16); // int を 12 進数に変換します。 "C"
(int).toString(8); // int を 8 進数に変換します。 ; "14" 
parseInt(string,16) // 16 進数を int に変換します。例: "FF" => 255
parseInt(string,8) // 8 進数を int に変換します。例えば、"20" => 16 

3. 数字で遊ぶ

前のセクションで紹介した内容に加えて、数値を処理するためのヒントをさらに紹介します。

コードをコピーしますコード

0xFF; // 16 進数の宣言、255
020 を返します。 // 16
1e3 を返します。 // 1 * Math.pow と同じです。 (10,3 ), returns 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 = [];
 (番号.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 つの側面が含まれています。しかし、私たちはいつもこれらの小さなことを見落とします:

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

// 悪い例: foo が未定義の場合、コードでエラーが発生します
if (foo) {
 doSomething();
}
// 良い例: これはそうではありませんただし、
// foo が NULL または false に設定されている場合でも、条件は true
if (typeof foo != "unknown") {
 doSomething();}
// より良い方法: これはエラーを引き起こさず、さらに
// 値 NULL または false は true として検証されません
if (window.foo) {
 doSomething () ;
}

ただし、より深い構造があり、より適切な検査が必要な場合は、次のようにすることができます:

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

// 醜い: プロパティが実際に存在することを確認する前に、すべての

// オブジェクトの存在を証明する必要があります。 
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.arg3 || [],
 arg4 = oArgs.arg4 || false;
}
doSomething({
 arg1 : "foo",
 arg2 : 5,
 arg4 : false
});

これは、オブジェクトをパラメータとして渡す非常に単純な例です。たとえば、次のような変数名でオブジェクトを宣言することもできます。キーとデフォルト値を値として指定します。 

8. document.createDocumentFragment()

を使用します。 ドキュメントに複数の要素を動的に追加する必要がある場合があります。ただし、ドキュメントに直接挿入すると、毎回ドキュメントを再レイアウトする必要があります。代わりに、ドキュメントのフラグメントを使用し、完成後に 1 回だけ追加する必要があります:

コードをコピーコードは次のとおりです:function createList() {

var aLI = ["最初の項目", "2 番目の項目", "3 番目の項目",

 "fourth item", "fith item"];
 // フラグメントを作成します
 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.replace() に渡すことです。以下は簡単な例です:

コードをコピーコードは次のとおりです:var sFlop = "フロップ: [Ah] [Ks] [7c]";

var aValues = {"A":"エース","K":"キング",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 には次が含まれます:
// "フロップ: [ハートのエース] [スペードのキング] [セブンオブクラブ]"

10. ループ内でのラベルの使用

場合によっては、ループ内にループがネストされていることがあります。ループ内で終了する必要がある場合は、次のタグを使用できます。

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

outerloop:
for (var iI=0;iI<5;iI ) {
 if (somethingIsTrue()) {
 // 外側のループの反復を中断します
 Break externalloop;
}
 innerloop:
 for (var iA=0;iA<5;iA ) {
 if (somethingElseIsTrue()) {
 // 内部ループの反復を中断します
 break innerloop;
 }
 }
}