45 JavaScriptプログラミングの注意点とスキル_JavaScriptスキル

JavaScript は世界で最も人気のあるプログラミング言語であり、Web 開発、モバイル アプリケーション開発 (PhoneGap、Appcelerator)、サーバーサイド開発 (Node.js および Wakanda) などに使用できます。 JavaScript は、多くの初心者がプログラミングの世界に入る最初の言語でもあります。これを使用して、ブラウザに単純なプロンプト ボックスを表示したり、nodebot または nodruino を通じてロボットを制御したりできます。明確な構造と高いパフォーマンスを備えた JavaScript コードを作成できる開発者は、現在、採用市場で最も求められている人材です。

この記事では、いくつかの例外を除いて、ブラウザの JavaScript エンジンとサーバー側の JavaScript インタプリタの両方に適用される JavaScript のヒント、秘密、ベスト プラクティスをいくつか紹介します。

この記事のサンプル コードは、Google Chrome 30 (V8 3.20.17.15) の最新バージョンでのテストに合格しました。

1. 初めて変数に値を割り当てるときは、必ず var キーワードを使用してください

変数が宣言されずに直接割り当てられた場合、その変数はデフォルトで新しいグローバル変数として使用されます。グローバル変数の使用は避けてください。

2. ==

の代わりに === を使用します。

== 演算子と != 演算子は、必要に応じてデータ型を自動的に変換します。しかし、=== と !== はそうではなく、値とデータ型を同時に比較するため、== や != よりも高速になります。

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

[10] === 10 // は false
[10] == 10 // は true
'10' == 10 // は true
'10' === 10 // は false
[] == 0 // は true
[] === 0 // は false
'' == false // は true ですが、true == "a" は false
'' === false // は false

3. アンダーファイン、null、0、false、NaN、および空の文字列の論理結果はすべて false です
4. 行末にセミコロン を使用します

実際には、セミコロンを使用するのが最善です。セミコロンを書き忘れても、ほとんどの場合、JavaScript インタプリタが自動的に追加します。セミコロンが使用される理由の詳細については、「JavaScript におけるセミコロンの真実」の記事を参照してください。

5. オブジェクトコンストラクターを使用します

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

関数 人(名, 姓){
This.firstName = firstName;
This.lastName = lastName;
}
var Saad = 新しい人("Saad", "Mousliki");

6. typeof、instanceof、コンストラクターは慎重に使用してください
typeof: 変数の元の型を文字列形式で返すために使用される JavaScript 単項演算子。typeof null もオブジェクトを返すことに注意してください (配列 Array、時刻 Date など)。オブジェクト
コンストラクター: 内部プロトタイプ プロパティ。コード
を通じてオーバーライドできます。 instanceof: JavaScript 演算子。プロトタイプ チェーンのコンストラクター内を検索し、見つかった場合は true を返し、それ以外の場合は false を返します

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

var arr = ["a", "b", "c"];
typeof arr; // 「オブジェクト」を返します
arr 配列のインスタンス // true
arr.constructor(); //[]

7. 自己呼び出し関数を使用する
関数は作成直後に自動的に実行され、通常は自己呼び出し匿名関数 (Self-Invoked Anonymous Function) または直接呼び出される関数式 (Immediately Invoked Function Expression) と呼ばれます。形式は次のとおりです:

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

(関数(){
//ここに配置されたコードは自動的に実行されます
})();
(関数(a,b){
var result = a b;
結果を返します;
})(10,20)

8. 配列からメンバーをランダムに取得します

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

var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = items[Math.floor(Math.random() * items.length)];

9. 指定した範囲内の乱数を取得します
この関数は、指定された範囲内の給与など、テスト用の偽のデータを生成する場合に特に役立ちます。

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

var x = Math.floor(Math.random() * (最大値 - 最小値 1)) 分;

10. 0 から指定された値までのデジタル配列を生成します

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

var 数値配列 = [] 、最大 = 100;
for( var i=1;numberArray.push(i )

11. ランダムな英数字文字列を生成します

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

functiongenerateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length 戻り値 rdmString.substr(0, len);

12. 数値配列の順序を乱す

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

変数番号 = [5, 458, 120, -215, 228, 400, 122205, -85411];
数値 = 数値.sort(関数(){ return Math.random() - 0.5});
/* 数値配列は [120, 5, 228, -215, 400, 458, -85411, 122205] のようになります */

ここでは、JavaScript の組み込み配列ソート関数が使用されています。より良い方法は、特殊なコードを使用して実装することです (Fisher-Yates アルゴリズムなど)。このディスカッションは StackOverFlow で参照できます。

13. 文字列からスペースを削除します

Java、C#、PHP およびその他の言語はすべて特別な文字列スペース削除関数を実装していますが、JavaScript にはそのような関数はありません。次のコードを使用して String オブジェクトのトリム関数を機能させることができます。

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

String.prototype.trim = function(){return this.replace(/^s |s $/g, "");};

新しい JavaScript エンジンには、trim() のネイティブ実装がすでに組み込まれています。

14. 配列間に追加

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

var array1 = [12 , "foo" , {name "ジョー"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 の値は [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */

15. オブジェクトを配列に変換します

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

var argArray = Array.prototype.slice.call(arguments);

16. 数字かどうかを確認します

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

関数 isNumber(n){
戻り値 !isNaN(parseFloat(n)) && isFinite(n);
}

17. 配列であるかどうかを確認します

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

関数 isArray(obj){
戻り値 Object.prototype.toString.call(obj) === '[オブジェクト配列]' ;
}

ただし、toString() メソッドがオーバーライドされると、機能しなくなります。次の方法も使用できます:

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

Array.isArray(obj) // 新しい Array メソッド


ブラウザでフレームを使用しない場合は、instanceof を使用することもできますが、コンテキストが複雑すぎる場合はエラーが発生する可能性があります。

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

var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10) // [a,b,10]
; // myArray のコンストラクターが失われ、instanceof の結果が異常になります
// コンストラクターはフレーム間で共有できません
arr 配列のインスタンス; // false

18. 配列内の最大値と最小値を取得します

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

変数番号 = [5, 458, 120, -215, 228, 400, 122205, -85411]; var maxInNumbers = Math.max.apply(数学, 数値); var minInNumbers = Math.min.apply(数学, 数値);

19. 配列をクリアします

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

var myArray = [12, 222, 1000]; myArray.length = 0; // myArray は [].

と等しくなります。


20. 配列から要素を直接削除または削除しないでください。

配列要素に対して delete を直接使用すると、要素は削除されませんが、要素は未定義に設定されます。配列要素の削除にはスプライスを使用する必要があります。
してはいけないこと:

コードをコピー コードは次のとおりです: var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // 11 を返します

項目を削除[3] // true を返します

items.length; // 11 を返します
/* 項目の結果は [12, 548, "a", 未定義 × 1, 5478, "foo", 8852, 未定義 × 1, "Doe", 2154, 119] */



代わりに:

コードをコピー

コードは次のとおりです: var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // 11 を返します items.splice(3,1) ; items.length; // 10 を返します

/* 項目の結果は [12, 548, "a", 5478, "foo", 8852, unknown × 1, "Doe", 2154, 119]

delete は、オブジェクトのプロパティを削除するときに使用できます。


21. length 属性を使用して配列

を切り詰めます。
前の例では、長さ属性を使用して配列をクリアしました。 は、配列を切り詰めるためにも使用できます。

コードをコピー

コードは次のとおりです: var myArray = [12, 222, 1000, 124, 98, 10]; myArray.length = 4; // myArray は [12, 222, 1000, 124] になります。 同時に、length 属性を大きくすると、配列の長さの値が増加し、未定義が新しい要素として使用されて埋められます。 length は書き込み可能なプロパティです。

コードをコピー

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

myArray.length = 10; // 新しい配列の長さは 10 です myArray[myArray.length - 1] // 未定義;

22. 条件で論理積 or を使用する

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

var foo = 10; foo == 10 && doSomething(); // は if (foo == 10) doSomething(); と同じです。 foo == 5 || doSomething(); // if (foo != 5) doSomething(); と同じです。 論理和は、関数パラメータのデフォルト値などのデフォルト値を設定するために使用することもできます。

コードをコピー

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

function doSomething(arg1){
arg1 = arg1 || 10; // arg1 がまだ設定されていない場合、デフォルト値は 10 になります
}

23.map() 関数メソッドをデータに対してループさせます

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

var squares = [1,2,3,4].map(function (val) {
戻り値 val * val; });
// 正方形は [1, 4, 9, 16]
に等しくなります

24. 指定された小数点以下の桁数を維持します

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

var num =2.443242342;
num = num.toFixed(4) // num は 2.4432
に等しくなります。

toFixec() は数値ではなく文字列を返すことに注意してください。

25. 浮動小数点計算の問題

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

0.1 0.2 === 0.3 // は false
9007199254740992 1 // は 9007199254740992
に等しい 9007199254740992 2 // は 9007199254740994
に等しい

なぜ？ 0.1 0.2 は 0.30000000000000004 に等しいためです。 JavaScript の数値は IEEE 754 標準に従って構築され、内部的には 64 ビット浮動小数点 10 進数として表されます。詳細については、JavaScript の数値がどのようにエンコードされるかを参照してください。
この問題は、toFixed() と toPrecision() を使用することで解決できます。

26. for-in ループでオブジェクトのプロパティを確認します
次の使用法では、反復中にオブジェクトのプロトタイプ プロパティを入力できなくなる可能性があります。

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

for (オブジェクト内の変数名) {
If (object.hasOwnProperty(name)) {
// name で何かを実行します
}
}

27. カンマ演算子

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

変数 a = 0; var b = ( a , 99 ); console.log(a); // a は 1 に等しくなります
console.log(b); // b は 99
に等しい


28. 計算やクエリに使用する変数を一時的に保存します

jQuery セレクターでは、DOM 要素全体を一時的に保存できます。

コードをコピー コードは次のとおりです: var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');

29. isFinite()に渡すパラメータを事前に確認してください

コードをコピーします

コードは次のとおりです: isFinite(0/0); // false isFinite("foo") // false; isFinite("10") // true isFinite(10); // true

isFinite(未定義); // false

isFinite(); // false
isFinite(null); // true、これには特別な注意を払う必要があります



30. 配列内のインデックスとして負の数値を使用しないでください

コードをコピーします

コードは次のとおりです: var 数値配列 = [1,2,3,4,5]; var from =numberArray.indexOf("foo") // from は -1 に等しい numbersArray.splice(from,2) // [5] を返します。

splice に渡されるインデックス パラメータは負の数であってはいけないことに注意してください。負の数の場合、要素は配列の末尾から削除されます。


31. JSON を使用してシリアル化および逆シリアル化します

コードをコピー

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

var person = {名前：'サード'、年齢：26、所属：{ID：15、名前：「研究開発」} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson の結果は "{"name":"Saad","age":26,"Department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromperson);
/* personFromString の値は person オブジェクトと同じです */

32. eval() や関数コンストラクターを使用しないでください
eval() と関数コンストラクター (Function constructor) は、呼び出されるたびに、ソース コードを実行可能コードに変換する必要があり、比較的高価です。

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

var func1 = 新しい関数(関数コード);
var func2 = eval(functionCode);

33. with() の使用を避ける
with()を使用するとグローバルスコープに変数を追加できるため、同じ名前の変数が存在すると混同しやすく、値が上書きされてしまいます。

34. 配列では for-in を使用しないでください
避けてください:

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

変数合計 = 0; for (arrayNumbers の var i) {
合計 = 配列番号[i]
}

代わりに:

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

変数合計 = 0; for (var i = 0, len = arrayNumbers.length; i < len; i ) {
合計 = 配列番号[i]
}


もう 1 つの利点は、2 つの変数 i と len が for ループの最初のステートメントにあり、初期化されるのは 1 回だけであり、次の書き方よりも高速であることです。

コードをコピー コードは次のとおりです: for (var i = 0; i

35. setInterval() および setTimeout() に渡すときは、文字列の代わりに関数を使用します

文字列を setTimeout() と setInterval() に渡す場合、それらは eval と同様の方法で変換されますが、確実に速度が低下するため、使用しないでください:

コードをコピー コードは次のとおりです: setInterval('doSomethingPeriodively()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000);

代わりに次を使用してください:

コードをコピー

コードは次のとおりです: setInterval(定期的に何かを行う, 1000); setTimeout(doSomethingAfter5Seconds, 5000);

36. if/else の大きなスタックの代わりに switch/case を使用する

分岐が 3 つ以上あると判断した場合は、switch/case を使用する方が高速で、よりエレガントで、コードの編成に役立ちます。もちろん、分岐が 10 個を超える場合は、switch/case を使用しないでください。

37. スイッチ/ケースで数値間隔を使用する

実際、switch/case のケース条件は次のように書くこともできます:

コードをコピー

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

function getCategory(age) {
var カテゴリ = ""; スイッチ (真) {
case isNaN(年齢):
カテゴリ = "年齢ではありません"
休憩
ケース (年齢 >= 50):
カテゴリ = "古い"
休憩
ケース (年齢 <= 20):
カテゴリ = "赤ちゃん"
休憩
デフォルト： カテゴリ = "若者"
休憩
};
カテゴリを返す
}
getCategory(5); // 「Baby」を返します

38. オブジェクトをオブジェクトのプロトタイプとして使用する
このようにして、オブジェクトをパラメータとして指定して、このプロトタイプに基づいて新しいオブジェクトを作成できます。

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

関数 clone(オブジェクト) {

関数 OneShotConstructor(){}; OneShotConstructor.prototype = オブジェクト; 新しい OneShotConstructor() を返します
}
clone(Array).prototype; // []



39.HTMLフィールド変換関数

コードをコピーします

コードは次のとおりです: 関数エスケープHTML(テキスト) { var replaces= {"<": "<", ">": ">","&": "&", """: """}; Return text.replace(/[<>&"]/g, function(character) {

置換を返します[文字]

; });
}



40. ループ内で try-catch-finally を使用しないでください

try-catch-finally の catch 部分は、実行中に例外を変数に割り当て、この変数は実行時スコープ内の新しい変数に構築されます。
してはいけないこと:

コードをコピー

コードは次のとおりです: var オブジェクト = ['foo', 'bar'], for (i = 0, len = object.length; i {

を試してください // 例外をスローする処理を実行します

}
catch (e) {
// 例外を処理します
}
}


代わりに:

コードをコピー

コードは次のとおりです: var オブジェクト = ['foo', 'bar'], { を試してください for (i = 0, len = object.length; i // 例外をスローする処理を実行します

}
}
キャッチ (e) {
// 例外を処理します
}




41. XMLHttpRequests を使用する場合はタイムアウトの設定に注意してください

XMLHttpRequests を実行したときに、長時間応答がない場合 (ネットワークの問題など)、この作業は setTimeout() によって完了する必要があります:

コードをコピー

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

var xhr = 新しい XMLHttpRequest (); xhr.onreadystatechange = function () {
If (this.readyState == 4) {
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, // レスポンスデータを使って何かを行う
}
}
var timeout = setTimeout( function () {
xhr.abort(); // エラーコールバックを呼び出します
}, 60*1000 /* 1 分後にタイムアウト */ ); xhr.open('GET', URL, true); xhr.send();


同時に、複数の XMLHttpRequests リクエストを同時に開始しないことに注意してください。

42. WebSocket タイムアウトの処理

通常、WebSocket 接続の作成後、30 秒以内にアクティビティがない場合、サーバーは接続をタイムアウトします。単位期間内にアクティビティがない場合、ファイアウォールは接続をタイムアウトにすることもできます。 これを防ぐために、一定の間隔で空のメッセージをサーバーに送信できます。この要件は、次の 2 つの機能によって実現できます。1 つは接続をアクティブに維持するために使用され、もう 1 つは特にこの状態を終了するために使用されます。

コードをコピー

コードは次のとおりです: var timerID = 0; 関数 keepAlive() { var タイムアウト = 15000

If (webSocket.readyState == webSocket.OPEN) {

webSocket.send(''); }
timerId = setTimeout(keepAlive, タイムアウト); }
function cancelKeepAlive() {
If (timerId) {
cancelTimeout(timerId); }
}


keepAlive() 関数は WebSocket 接続の onOpen() メソッドの最後に配置でき、cancelKeepAlive() は onClose() メソッドの最後に配置できます。


43. プリミティブ演算子は関数呼び出しよりも高速であることに注意してください。VanillaJS
を使用してください。
たとえば、通常はこれを行わないでください:

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

var min = Math.min(a,b); A.push(v); これは次のように置き換えることができます:

コードをコピー

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

var min = a A[A.length] = v; 44. 開発時にはコードの構造に注意し、オンラインにする前に JavaScript コードを確認して圧縮してください

JSLint や JSMin などのツールを使用して、コードを検査および縮小できます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript_javascriptスキルの関数パターンの詳細説明次の記事：JavaScript_javascriptスキルの関数パターンの詳細説明

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル