JavaScriptは、Web開発、モバイルアプリケーション開発（PhoneGap、Appcelerator）、サーバー側の開発（Node.jsおよびWakanda）などに使用できる世界クラスのプログラミング言語です。ブラウザにシンプルなプロンプトボックスを表示したり、NodebotまたはNoderuinoを介してロボットを制御するために使用できます。十分に構造化された効率的なJavaScriptコードを書くことができる開発者は、現在、採用市場で最も人気のある人々です。
この記事では、JavaScriptのヒント、ヒント、ベストプラクティスをいくつか共有します。いくつかを除いて、どちらもブラウザのJavaScriptエンジンとサーバー側のJavaScriptインタープリターです。
この記事のサンプルコードは、Google Chrome 30の最新バージョン（V8 3.20.17.15）でテストに合格しました。
1.変数に初めて値を割り当てるときは、必ずVARキーワードを使用してください。
変数が宣言されず、値に直接割り当てられている場合、デフォルトでは新しいグローバル変数として使用されます。グローバル変数の使用を避けるようにしてください。
2。use === fate ==
==および！=演算子は、必要に応じてデータ型を自動的に変換します。ただし、===および！==は同時に値とデータ型を比較します。これにより、==および！=よりも高速になります。
コードコピーは次のとおりです。
[10] === 10 //はfalseです
[10] == 10 //は真です
'10' == 10 //は本当です
'10' === 10 //はfalseです
[] == 0 //は本当です
[] === 0 //はfalseです
'== false //はtrueですが、true == "a"はfalseです
'=== false //はfalseです
3.過小輝く、null、0、false、nan、および空の文字列の論理的結果はすべて偽です
4.行の最後にセミコロンを使用します
実際には、セミコロンを使用するのが最善です。それらを書くのを忘れても大丈夫です。ほとんどの場合、JavaScriptインタープリターが自動的に追加されます。セミコロンを使用したい理由については、記事JavaScriptのセミコロンに関する真実を参照できます。
5.オブジェクトコンストラクターを使用します
コードコピーは次のとおりです。
function person（firstName、lastName）{
this.firstname = firstName;
this.lastname = lastname;
}
var saad = new person（ "saad"、 "mousliki"）;
6. TYPEOF、InstanceOF、およびConstructorに注意してください
Typeof：JavaScript Unary Operator。元のタイプの変数を文字列の形で返すために使用します。 Typeof Nullもオブジェクトを返し、ほとんどのオブジェクトタイプ（配列、時刻日など）もオブジェクトを返します。
コンストラクター：コードを介して書き直すことができる内部プロトタイププロパティ
InstanceOF：JavaScriptオペレーターは、プロトタイプチェーンのコンストラクターで検索し、見つかった場合はtrueを返し、別の場合はfalseの場合はfalseを返します。
コードコピーは次のとおりです。
var arr = ["a"、 "b"、 "c"];
typeof arr; //「オブジェクト」を返します
arr instanceof array // true
arr.constructor（）; // []
7.セルフコール関数を使用します
関数は、作成後に直接自動的に実行されます。これは通常、自己攻撃された匿名関数または直接コール関数式（すぐに呼び出された関数式）と呼ばれます。フォーマットは次のとおりです。
コードコピーは次のとおりです。
（関数（）{
//ここに配置されたコードは自動的に実行されます
}）（）;
（function（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（） *（max -min + 1）） + min;
10。0から指定された値に数値の配列を生成します
コードコピーは次のとおりです。
var NumbersArray = []、max = 100;
for（var i = 1; numbersarray.push（i ++）<max;）; //番号= [1,2,3 ... 100]
11.ランダムな英数字の文字列を生成します
コードコピーは次のとおりです。
関数generaterandomalphanum（len）{
var rdmstring = "";
for（; rdmstring.length <len; rdmstring += math.random（）。toString（36）.substr（2））;
RDMSTRING.SUBSTR（0、LEN）を返します。
12。数字の配列の順序を破壊します
コードコピーは次のとおりです。
var番号= [5、458、120、-215、228、400、122205、-85411];
numbers = numbers.sort（function（）{return math.random（） - 0.5}）;
/ *番号配列は[120、5、228、-215、400、458、-85411、122205]に似ています */
ここでは、JavaScriptの組み込み配列ソート機能を使用します。より良い方法は、特別なコード（Fisher-Yatesアルゴリズムなど）でそれを実装することです。 StackoverFlowに関するこの議論を参照できます。
13.弦からスペースを取り外します
Java、C＃、PHPなどの言語はすべて、特別な文字列Despace関数を実装していますが、JavaScriptのようなものはありません。次のコードを使用して、文字列オブジェクト関数のトリム関数を作成できます。
コードコピーは次のとおりです。
string.prototype.trim = function（）{return this.replace（/^/s+|/s+$/g、 ""）;};
新しいJavaScriptエンジンには、すでにTRIM（）のネイティブ実装があります。
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] */
15.オブジェクトを配列に変換します
コードコピーは次のとおりです。
var argarray = array.prototype.slice.call（arguments）;
16.数字かどうかを確認します
コードコピーは次のとおりです。
関数isNumber（n）{
return！isnan（parsefloat（n））&& isfinite（n）;
}
17.それが配列かどうかを確認します
コードコピーは次のとおりです。
関数isArray（obj）{
return object.prototype.tostring.call（obj）=== '[object array]';
}
ただし、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]
// MyArrayのコンストラクターが失われ、InstanceOFの結果は異常になります
//コンストラクターはフレーム間で共有できません
arrのinstance of array; // 間違い
18.配列内の最大値と最小値を取得します
コードコピーは次のとおりです。
var番号= [5、458、120、-215、228、400、122205、-85411];
var maxinnumbers = math.max.apply（math、numbers）;
var mininnumbers = Math.min.Apply（Math、Numbers）;
19。配列をクリアします
コードコピーは次のとおりです。
var myArray = [12、222、1000];
myarray.length = 0; // myArrayは[]に等しくなります。
20。配列から要素を直接削除または削除しないでください
配列要素で削除を直接使用する場合、実際には削除されていませんが、要素を未定義として設定するだけです。スプライスは、配列要素の削除に使用する必要があります。
しないでください：
コードコピーは次のとおりです。
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、未定義×1、 "doe"、2154、119]です。
オブジェクトのプロパティを削除するときに削除を使用できます。
21.長さ属性を使用して、配列を切り捨てます
前の例では、長さの属性を使用して配列をクリアすると、それを使用して配列を切り捨てることもできます。
コードコピーは次のとおりです。
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。ロジックまたは条件で使用します
コードコピーは次のとおりです。
var foo = 10;
foo == 10 && dosomething（）; //（foo == 10）dosomething（）と同じものです。
foo == 5 || dosomething（）; //（foo！= 5）dosomething（）と同じものです。
論理または機能パラメーターのデフォルト値などのデフォルト値を設定するためにも使用できます。
コードコピーは次のとおりです。
関数dosomhines（arg1）{
arg1 = arg1 || 10; // arg1は、まだ設定されていない場合、デフォルト値として10になります
}
23.マップ（）関数メソッドをデータをループします
コードコピーは次のとおりです。
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.30000000000000000004に等しいためです。 JavaScript番号は、IEEE 754標準に従って構築され、64ビットの浮動小数点小数点によって内部的に表されます。詳細については、JavaScriptの数字のエンコードを参照してください。
この問題は、tofixed（）およびtrocrecision（）を使用して解決できます。
26. for-inループを介してオブジェクトのプロパティを確認します
次の使用により、反復中にオブジェクトのプロトタイププロパティを入力できないようにすることができます。
コードコピーは次のとおりです。
for（オブジェクトのvar名）{
if（object.hasownproperty（name））{
//名前で何かをします
}
}
27。コンマオペレーター
コードコピーは次のとおりです。
var 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 naveft = document.queryselector（ '＃left'）;
var navup = document.queryselector（ '＃up'）;
var navdown = document.queryselector（ '＃down'）;
29。ISFINITE（）で渡されたパラメーターを事前に確認してください
コードコピーは次のとおりです。
Isfinite（0/0）; // 間違い
isfinite（ "foo"）; // 間違い
isfinite（ "10"）; // 真実
Isfinite（10）; // 真実
Isfinite（未定義）; // 間違い
isfinite（）; // 間違い
isfinite（null）; //本当、これに特別な注意を払ってください
30.アレイでのインデックスとして負の数を使用しないでください
コードコピーは次のとおりです。
var NumbersArray = [1,2,3,4,5];
var from = numbersarray.indexof（ "foo"）; // fromは-1に等しい
numbersArray.splice（from、2）; //戻ります[5]
スプライスに渡されたインデックスパラメーターは負の数ではないことに注意してください。負の数の場合、要素は配列の端から削除されます。
31。JSONを使用して、シリアル化して脱気になります
コードコピーは次のとおりです。
var person = {name： 'saad'、age：26、department：{id：15、name： "r＆d"}};
var stringfromperson = json.stringify（person）;
/ * StringFrompersonの結果は「{"name"： "saad"、 "age"：26、 "department"：{"id"：15、 "name"： "r＆d"}} " */
var personfromstring = json.parse（stringfromperson）;
/* fromStringの価値は、人物の価値と同じです*/
32。eval（）またはfunction constructorを使用しないでください
eval（）および関数コンストラクターのオーバーヘッドは高くなっています。それらが呼び出されるたびに、JavaScriptエンジンはソースコードを実行可能コードに変換する必要があります。
コードコピーは次のとおりです。
var func1 = new function（functioncode）;
var func2 = eval（functioncode）;
33。（）で使用しないでください
（）を使用して、グローバルスコープに変数を追加します。したがって、同じ名前の他の変数がある場合、混乱するのは簡単で、値も上書きされます。
34。配列にfor-inを使用しないでください
避ける：
コードコピーは次のとおりです。
var sum = 0;
for（var i in arraynumbers）{
sum += arraynumbers [i];
}
その代わり：
コードコピーは次のとおりです。
var sum = 0;
for（var i = 0、len = arraynumbers.length; i <len; i ++）{
sum += arraynumbers [i];
}
もう1つの利点は、2つの変数IとLENがFORループの最初の宣言であり、両方が1回のみ初期化されることです。これは、次の記述方法よりも高速です。
コードコピーは次のとおりです。
for（var i = 0; i <arraynumbers.length; i ++）
35。setinterval（）およびsetimeout（）に渡すときに文字列の代わりに関数を使用します
文字列をsettimeout（）とsetInterval（）に渡すと、同様の方法で変換されます。これは間違いなく遅くなるため、使用しないでください。
コードコピーは次のとおりです。
setinterval（ 'dosomethingperiodially（）'、1000）;
setimeout（ 'dosomethersfterfiveseconds（）'、5000）;
代わりに、使用してください。
コードコピーは次のとおりです。
setinterval（dosomethingperiodically、1000）;
setimeout（dosomethersfterfiveseconds、5000）;
36. if/elseの大きなスタックの代わりにスイッチ/ケースを使用する
2つ以上のブランチがあると判断するときは、スイッチ/ケースをより高速で、よりエレガントで、コードの組織をより助長するように使用します。もちろん、10を超えるブランチがある場合は、スイッチ/ケースを使用しないでください。
37。スイッチ/ケースでデジタル間隔を使用します
実際、スイッチ/ケースのケース条件も次のように書くことができます。
コードコピーは次のとおりです。
関数getCategory（age）{
var category = "";
switch（true）{
ケースイスナン（年齢）：
category = "年齢ではありません";
壊す;
ケース（年齢> = 50）：
category = "old";
壊す;
ケース（年齢<= 20）：
category = "baby";
壊す;
デフォルト：
category = "Young";
壊す;
};
戻りカテゴリ。
}
getCategory（5）; //「赤ちゃん」を返します
38。オブジェクトをプロトタイプとして使用します
このようにして、これに基づいてパラメーターとして新しいオブジェクトを作成できます。
コードコピーは次のとおりです。
関数クローン（オブジェクト）{
function oneshotconstructor（）{};
oneshotconstructor.prototype = object;
new oneshotconstructor（）を返します。
}
クローン（配列）.prototype; // []
39。HTMLフィールド変換関数
コードコピーは次のとおりです。
function Escesehtml（テキスト）{
var falltements = {"<"： "<"、 ">"： ">"、 "＆"： "＆"、 "/"： "" "};
return text.replace（/[<>＆ "]/g、function（character）{
returnの交換[文字];
}）;
}
40.ループ内でfinallyでトライキャッチを使用しないでください
Try-Catch-FinallyのCATCHパーツは、実行時に例外を変数に割り当てます。この変数は、ランタイムスコープ内で新しい変数に構築されます。
しないでください：
コードコピーは次のとおりです。
var object = ['foo'、 'bar']、i;
for（i = 0、len = object.length; i <len; i ++）{
試す {
//例外をスローする何かをします
}
catch（e）{
//例外を処理します
}
}
その代わり：
コードコピーは次のとおりです。
var object = ['foo'、 'bar']、i;
試す {
for（i = 0、len = object.length; i <len; i ++）{
//例外をスローする何かをします
}
}
catch（e）{
//例外を処理します
}
41。xmlhttprequestsを使用する場合、タイムアウトの設定に注意してください
xmlhttprequestsが実行されると、長い間応答がない場合（ネットワークの問題など）、接続を中止する必要があります。この作業は、settimeout（）で実行できます。
コードコピーは次のとおりです。
var xhr = new xmlhttprequest（）;
xhr.onedeadystatechange = function（）{
if（this.readystate == 4）{
ClearTimeout（Timeout）;
//応答データを使用して何かをします
}
}
var timeout = setimeout（function（）{
xhr.abort（）; //エラーコールバックを呼び出します
}、60*1000 /*1分後のタイムアウト* /）;
xhr.open（ 'get'、url、true）;
xhr.send（）;
同時に、複数のXMLHTTPREQUESTSリクエストを同時に開始しないでください。
42。WebSocketのタイムアウトを処理します
一般的に、WebSocket接続が作成された後、30秒以内にアクティビティがない場合、サーバーは接続をタイムアウトし、ファイアウォールは単位サイクルでアクティブではない接続をタイムアウトすることもできます。
これを防ぐために、空のメッセージを特定の時間ごとにサーバーに送信できます。この要件は、次の2つの機能を通じて実現できます。1つは接続をアクティブに保ち、特にこの状態を終了するためです。
コードコピーは次のとおりです。
var timerid = 0;
関数KeepAlive（）{
var timeout = 15000;
if（websocket.readystate == websocket.open）{
websocket.send（ ''）;
}
TimerID = setimeout（Keepalive、Timeout）;
}
関数cancelkeepalive（）{
if（timerid）{
CancelTimeout（TimerID）;
}
}
keepAlive（）関数は、websocket接続のonopen（）メソッドの最後に配置でき、cancelkeepalive（）はonclose（）メソッドの最後に配置できます。
43。時間に注意してください、そして、元の演算子は関数呼び出しよりも高速です。 Vanillajsを使用してください
たとえば、一般的には次のようではありません。
コードコピーは次のとおりです。
var min = math.min（a、b）;
a.push（v）;
代わりにこれを使用できます。
コードコピーは次のとおりです。
var min = a <b？ A：B;
a [a.length] = v;
44。オンラインに行く前に、開発中にコード構造に注意して、JavaScriptコードを確認し、圧縮してください
JSLINTやJSMINなどのツールを使用して、コードをチェックして圧縮できます。