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 属性を使用して配列
を切り詰めます。
前の例では、長さ属性を使用して配列をクリアしました。 は、配列を切り詰めるためにも使用できます。
コードをコピー
コードをコピー
コードは次のとおりです:
22. 条件で論理積 or を使用する
コードをコピーします
コードは次のとおりです:
コードをコピー
コードは次のとおりです:
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(未定義); // false
isFinite(); // false
isFinite(null); // true、これには特別な注意を払う必要があります
30. 配列内のインデックスとして負の数値を使用しないでください
コードをコピーします
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 回だけであり、次の書き方よりも高速であることです。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
