ご存知のとおり、JavaScript は世界でナンバーワンのプログラミング言語であり、Web の言語であり、モバイル ハイブリッド アプリ (PhoneGap や Appcelerator など) の言語であり、サーバー側の言語 (NodeJS や Wakanda など) でもあります。他にも多くの実装があります。同時に、ブラウザ上に単純な警告メッセージを表示できるだけでなく、(nodebot または nodruino を使用して) ロボットの制御にも使用できるため、多くの初心者にとって啓発的な言語でもあります。 JavaScript をマスターし、体系化され、標準化され、パフォーマンスの高い効率的なコードを作成できる開発者は、人材市場で求められています。
この記事のコード スニペットは、V8 JavaScript エンジン (V8 3.20.17.15) を使用する最新の Google Chrome (バージョン 30) でテストされていることに注意してください。
1 初めて変数に値を代入するときは、必ず var キーワードを使用してください。
未定義の変数に値を割り当てると、グローバル変数が作成されます。グローバル変数は避けてください。
2 == の代わりに === を使用します
== (または !=) 演算子は、必要に応じて型変換を自動的に実行します。 === (または !==) 演算は変換を実行しません。値と型を比較し、== よりも高速であると考えられます。
次のようにコードをコピーします。
[10] === 10 // 偽です
[10] == 10 // は true
'10' == 10 // は true
'10' === 10 // 偽です
[] == 0 // は true
[] === 0 // は false
'' == false // は true ですが、true == "a" は false
'' === false // は false
3 クロージャを使用してプライベート変数を実装する
次のようにコードをコピーします。
関数 人物(名前, 年齢) {
this.getName = function() { 名前を返します };
this.setName = function(newName) { name = newName };
this.getAge = function() { 年齢を返す };
this.setAge = function(newAge) { 年齢 = newAge };
// コンストラクターでプロパティが初期化されていない
var の職業。
this.getjob = function() { 職業を返す };
this.setSoup = function(newOcc) { 職業 =
新しいOcc;
}
4 ステートメントの最後にはセミコロンを使用します
ステートメントの最後にセミコロンを使用することをお勧めします。ほとんどの場合、JavaScript インタプリタがセミコロンを追加してくれるため、書き忘れても警告は表示されません。
5 オブジェクトのコンストラクターを作成する
コードをコピーします。コードは次のとおりです。 function Person(firstName, lastName){
this.firstName = 名;
this.lastName = 姓;
}
var Saad = 新しい人("Saad", "Mousliki");
6 typeof、instanceof、コンストラクターは慎重に使用してください
次のようにコードをコピーします。 var arr = ["a", "b", "c"];
typeof arr; // 「オブジェクト」を返します。
arr 配列のインスタンス // true
arr.constructor(); //[]
7 自己呼び出し関数を作成する（自己呼び出し関数）
これは、自己呼び出し匿名関数または IIFE 即時呼び出し関数式と呼ばれることがよくあります。これは作成直後に自動的に実行される関数で、通常は次のようになります。
次のようにコードをコピーします。
（関数（）{
// 自動的に実行されるプライベート コード
})();
(関数(a,b){
var 結果 = 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 から設定された最大値までの数値の配列を生成します
次のようにコードをコピーします。 varnumberArray = [], max = 100;
for( var i=1;numberArray.push(i++) < max;); // 数値 = [0,1,2,3 ... 100]
11 ランダムな英数字文字列を生成する
コードをコピーします。コードは次のとおりです。 functiongenerateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
戻り rdmString.substr(0, len);
}
12 数値の配列をスクランブルする
コピーコードは次のとおりです。 varnumbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
数値 = 数値.sort(function(){ return Math.random() - 0.5});
/* 配列番号は、たとえば [120, 5, 228, -215, 400, 458, -85411, 122205] となります */
13 ストリングトリム機能
Java、C#、PHP、その他多くの言語には、文字列内のスペースを削除するために使用される古典的なトリム関数がありますが、JavaScript には存在しないため、この関数を String オブジェクトに追加する必要があります。
次のようにコードをコピーします。
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//文字列の内部スペースを除き、文字列の先頭と末尾のスペースを削除します。弦
14 配列を別の配列に追加する
次のようにコードをコピーします: var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 は [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] と等しくなります */
//実際、concat は 2 つの配列を直接接続できますが、戻り値は新しい配列になります。 array1 への直接の変更は次のとおりです。
15 引数オブジェクトを配列に変換します
次のようにコードをコピーします。 var argArray = Array.prototype.slice.call(arguments);
引数オブジェクトは配列のようなオブジェクトですが、実際の配列ではありません
16 パラメータが数値(数値)かどうかを確認します
コードをコピーします。コードは次のとおりです。 function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 パラメータが配列であるかどうかを確認する
次のようにコードをコピーします。 function isArray(obj){
return Object.prototype.toString.call(obj) === '[オブジェクト配列]' ;
}
注: toString() メソッドがオーバーライドされている場合、この手法を使用しても望ましい結果は得られません。または、以下を使用することもできます。
次のようにコードをコピーします。
Array.isArray(obj); // これは新しい配列メソッドです
複数のフレームを使用しない場合は、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];
//instanceof は正しく動作しません。myArray はコンストラクターを失います。
// コンストラクターはフレーム間で共有されません
arr 配列のインスタンス; // false
18 数値配列の最大値または最小値を取得する
コピーコードは次のとおりです。 varnumbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(数学, 数値);
var minInNumbers = Math.min.apply(数学, 数値);
//翻訳者注: ここでは、パラメータを渡すために function.prototype.apply メソッドが使用されています。
19 配列をクリアする
次のようにコードをコピーします。 var myArray = [12, 222, 1000];
myArray.length = 0; // myArray は [] と等しくなります。
20 配列から項目を削除するために delete を使用しないでください。
配列から項目を削除するには、delete ではなく splice を使用します。 delete を使用すると、元の項目が未定義の項目に置き換えられるだけで、実際に配列から削除されるわけではありません。
これは使用しないでください:
次のようにコードをコピーします。 var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
items.length; // 11 を返します。
項目を削除[3] // true を返します。
items.length; // 11 を返します。
/* 項目は [12, 548, "a", unknown × 1, 5478, "foo", 8852, unknown × 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] になります。
また、配列の長さを現在の値よりも大きい値に設定すると、配列の長さが変更され、それを補うために新しい未定義の項目が追加されます。 配列の長さは読み取り専用のプロパティではありません。
次のようにコードをコピーします。 myArray.length = 10 // 新しい配列の長さは 10 です。
myArray[myArray.length - 1]; // 未定義
22 論理 AND/OR を使用して条件判断を行う
次のようにコードをコピーします。
var foo = 10;
foo == 10 && doSomething(); // if (foo == 10) doSomething(); と同等
foo == 5 || doSomething(); // if (foo != 5) doSomething(); と同等
論理 AND を使用して関数パラメータのデフォルト値を設定することもできます
次のようにコードをコピーします。
関数 doSomething(arg1){
Arg1 = arg1 || 10; // arg1 が設定されていない場合、Arg1 はデフォルトで 10 に設定されます。
}
23 map() メソッドを使用して、配列内の項目を反復処理します。
コードをコピーします。コードは次のとおりです。 var squares = [1,2,3,4].map(function (val) {
戻り値 val * val;
});
// 平方は [1, 4, 9, 16] に等しくなります
24 数値を小数点以下 N 桁に四捨五入します
次のようにコードをコピーします。 var num =2.443242342;
num = num.toFixed(4); // num は 2.4432 になります。
25 浮動小数点問題
次のようにコードをコピーします: 0.1 + 0.2 === 0.3 // は false
9007199254740992 + 1 // は 9007199254740992 に等しい
9007199254740992 + 2 // は 9007199254740994 に等しい
なぜこのようなことが起こっているのでしょうか? 0.1+0.2 は 0.30000000000000004 に相当します。すべての JavaScript 数値は内部的に IEEE 754 標準に準拠した 64 ビット バイナリの浮動小数点数として表現されることを知っておく必要があります。詳しい紹介については、このブログ投稿をご覧ください。この問題は、toFixed() メソッドと toPrecision() メソッドを使用して解決できます。
26 for-in を使用してオブジェクトの内部プロパティをトラバースする場合は、プロパティのチェックに注意してください。
次のコード スニペットは、オブジェクトのプロパティを反復処理するときにプロトタイプ プロパティへのアクセスを回避します。
次のようにコードをコピーします。
for (オブジェクト内の変数名) {
if (object.hasOwnProperty(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 配列内の負のインデックスを避ける
次のようにコードをコピーします。 varnumberArray = [1,2,3,4,5];
var from =numberArray.indexOf("foo") // from は -1 に等しい
numbersArray.splice(from,2) // [5] を返します。
IndexOf を呼び出すときのパラメータが負でないことを確認してください。
31 JSON ベースのシリアル化と逆シリアル化 (シリアル化と逆シリアル化)
次のようにコードをコピーします。 var person = {名前 :'Saad'、年齢 : 26、部門 : {ID : 15、名前 : "R&D"} };
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() および Function コンストラクターの使用を避ける
eval コンストラクターと Function コンストラクターを使用すると、毎回スクリプト エンジンを呼び出してソース コードを実行可能コードに変換するため、非常にコストのかかる操作になります。
次のようにコードをコピーします。 var func1 = new Function(functionCode);
var func2 = eval(関数コード);
33 with() の使用を避ける
with() を使用すると、グローバル変数が挿入されます。したがって、同じ名前の変数の値が上書きされ、無用なトラブルが発生します。
34 配列の反復処理に for-in を使用しないようにする
次のような方法の使用は避けてください。
次のようにコードをコピーします。 var sum = 0;
for (arrayNumbers の変数 i) {
合計 += 配列番号[i];
}
より良い方法は次のとおりです。
次のようにコードをコピーします。 var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
合計 += 配列番号[i];
}
さらに、2 つの変数 i と len の値が 1 回だけ実行されるため、次の方法より効率的であるという利点もあります。
次のようにコードをコピーします: for (var i = 0; i < arrayNumbers.length; i++)
なぜ？ arrayNumbers.length はループするたびに計算されるためです。
35 setTimeout() および setInterval() を呼び出すときに、文字列の代わりに関数を渡します。
文字列を setTimeout() または setInterval() に渡すと、その文字列は eval を使用しているかのように解析されますが、これには非常に時間がかかります。
使用しないでください:
次のようにコードをコピーします。
setInterval('doSomethingPeriodively()', 1000);
setTimeOut('doSomethingAfter5Seconds()', 5000)
代わりに以下を使用します。
次のようにコードをコピーします。
setInterval(定期的に何かを行う, 1000);
setTimeOut(doSomethingAfter5Seconds, 5000);
36 長い if/else ステートメントの代わりに switch/case ステートメントを使用する
3 つ以上の状況を判断する場合、switch/case を使用すると、より効率的かつ洗練されます (コードを整理しやすくなります)。ただし、判定する状況が 10 個を超える場合は、switch/case を使用しないでください。
37 数値範囲を判断する場合はスイッチ/ケースを使用する
次の状況では、switch/case を使用して値の範囲を決定するのが合理的です。
次のようにコードをコピーします。
関数 getCategory(年齢) {
var カテゴリ = "";
スイッチ (真) {
ケースはNaN(年齢):
カテゴリ = "年齢ではありません";
壊す;
ケース (年齢 >= 50):
カテゴリ = "古い";
壊す;
ケース (年齢 <= 20):
カテゴリ = "赤ちゃん";
壊す;
デフォルト：
カテゴリ = "若い";
壊す;
};
返品カテゴリー;
}
getCategory(5); // 「Baby」を返します。
//一般に数値範囲を判断するにはif/elseを使用する方が適切です。 switch/case は特定の値を判断するのに適しています。
38 作成したオブジェクトのプロトタイプオブジェクトを指定する
指定されたパラメーターをプロトタイプとして使用してオブジェクトを作成する関数を作成することができます。
次のようにコードをコピーします。 function clone(object) {
関数 OneShotConstructor(){};
OneShotConstructor.prototype= オブジェクト;
新しい OneShotConstructor() を返します。
}
クローン(配列).プロトタイプ; // []
39 HTMLエスケープ関数
次のようにコードをコピーします。 functionscapeHTML(text) {
var replaces= {"<": "<", ">": ">","&": "&", "/"": """};
return text.replace(/[<>&"]/g, function(character) {
置換を返します[文字];
});
}
40 ループ内で try-catch-finally を使用しないようにする
実行時、catch 句が実行されるたびに、キャッチされた例外オブジェクトが変数に割り当てられ、try-catch-finally 構造内でこの変数が毎回作成されます。
次のような記述は避けてください。
次のようにコードをコピーします。 var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
試す {
// 例外をスローする何かを行う
}
キャッチ (e) {
//例外を処理する
}
}
代わりに以下を使用します。
次のようにコードをコピーします。 var object = ['foo', 'bar'], i;
試す {
for (i = 0, len = object.length; i <len; i++) {
// 例外をスローする何かを行う
}
}
キャッチ (e) {
//例外を処理する
}
41 XMLHttpRequests のタイムアウトを設定します。
XHR リクエストに長時間かかると (ネットワークの問題などにより)、リクエストを中止する必要がある場合は、XHR 呼び出しで setTimeout() を使用できます。
次のようにコードをコピーします。 var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
クリアタイムアウト(タイムアウト);
// レスポンスデータを使って何かを行う
}
}
var timeout = setTimeout( function () {
xhr.abort(); // エラーのコールバックを呼び出す
}, 60*1000 /* 1 分後にタイムアウト */ );
xhr.open('GET', URL, true);
xhr.send();
さらに、一般に、同期 Ajax リクエストは完全に避ける必要があります。
42 WebSocket タイムアウトの処理
通常、WebSocket 接続が作成された後、ユーザーが非アクティブな場合、サーバーは 30 秒後に接続をタイムアウトします。ファイアウォールは、一定期間非アクティブな状態が続くと切断されます。
タイムアウトの問題を防ぐために、空のメッセージを断続的にサーバーに送信する必要がある場合があります。これを行うには、次の 2 つの関数をコードに追加できます。1 つは接続を維持する関数、もう 1 つは接続の保留をキャンセルする関数です。この手法を使用すると、タイムアウトの問題を制御できます。
タイマー ID を使用します。
次のようにコードをコピーします。 var timerID = 0;
関数 keepAlive() {
var タイムアウト = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, タイムアウト);
}
関数 cancelKeepAlive() {
if (タイマーID) {
cancelTimeout(タイマーId);
}
}
keepAlive() メソッドは webSOcket 接続の onOpen() メソッドの最後に追加する必要があり、cancelKeepAlive() は onClose() メソッドの最後に追加します。
43 プリミティブ演算子は関数呼び出しよりも常に効率的であることに留意してください。 vanillaJSを使用します。
たとえば、次のようなものは使用しないでください。
コードをコピーします。コードは次のとおりです。 var min = Math.min(a,b);
A.push(v);
代わりに以下を使用します。
次のようにコードをコピーします。 var min = a < b ?
A[A.length] = v;
44 コーディングするときは、コード整理ツールを使用することを忘れないでください。オンラインにする前に、JSLint とコード圧縮ツール (縮小化) (JSMin など) を使用します。 「時間節約ツール: コードの美化および書式設定ツール」
45 JavaScript はすごいです。
要約する
他にもたくさんのヒント、テクニック、ベスト プラクティスがあることは承知しています。他に追加したいことがある場合、または私が共有したものにフィードバックや修正が必要な場合は、コメントでお知らせください。