45ヒントヒントとJavaScriptプラクティショナー

ある晩、何もすることはありません。インターネットのホワイトページをめくって、将来のために読むものを探して、興味深い記事が1つありました。 読書は、活動の種類、形式、および内容が近いことを考えると、非常に興味深いことがわかりました。

確かに、私は提示された資料で著者に直接同意しませんでした。さらに、多くの基本的なことに触れますが、彼女は人口の注目に値すると思いました-読むのが面倒ですが、不必要にアレンジとケースを簡潔に、簡潔に好む人文学。

当然のことながら、聖書のように、私はそれを宣誓することは勧めないので、前述のすべては決して究極の真実ではありません。 しかし、誰かが物事が新しい観点から何であるかを明らかにし、誰かが自分の緊急事態を表現して批判するでしょう：「Ft fi fi、fa fa fa！」
しかし、最初に私に勝手に最初にしたことは...

最初のフレーム、入門

ご存知のように、JavaScriptは世界の他のプログラミング言語の中でもナンバーワンです。NodeJSとWakandaを使用したサーバーサイド開発向けに、 PhoneGapとAppceleratorを使用して、Web用の言語、モバイルアプリケーション（約、および他の多くの用途。 これは、プログラミングの世界の多くの初心者にとっての出発点でもあります。ブラウザで簡単なアラートを表示し、ロボットを制御するために使用できます（ nodebot 、 nodruinoを使用）。

JavaScriptの優れた知識を持ち、理解可能で生産性の高いコードを作成する開発者は、求人市場で最も人気があります。

この記事では、すべてのJavaScript開発者がブラウザーの内部（ブラウザー/エンジン）、およびサーバー側のJavaScriptインタープリター（サーバー側のJavaScriptインタープリター）に関係なく知っておくべきさまざまなトリックとプラクティスを紹介したいと思います。

すべてのコード例は、Google Chromeバージョン30でテスト済みです。
V8 JavaScriptエンジン（V8 3.20.17.15）を使用します。

2番目のフレーム、有益で助言的

1- 変数に値を割り当てるときは、 `var`キーワードを覚えておいてください
初めて：
以前に宣言されていない変数を割り当てると、この変数がグローバルスペースに作成されます。 これを避けてください。
（注-変数を作成すると、次のことができると著者が示唆する
キーワードを忘れて、それぞれに追加の変数を作成します
グローバルスペースウィンドウ）

2- 「==」の代わりに「===」を使用します。
`==（！=）`を使用すると、必要に応じて型変換が実行されます。 一方、 `===`はそのような変換を行いません。 与えられた
演算子は値だけでなく型も比較します。これは、 `==`よりも速く解決します。 例：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false [] == 0 // is true [] === 0 // is false '' == false // is true but true == "a" is false '' === false // is false ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

3- ``未定義、null、0、false、NaN、 '' ``：
上記のすべては常に論理式の嘘です。

4- `;`を忘れないでください：
式を完成させるために `;`を使用するのは良い習慣です。 JavaScriptパーサーが挿入するため、スキップしても警告は表示されません。

5- コンストラクターを介したオブジェクト：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var Saad = new Person("Saad", "Mousliki"); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

6- 「typeof、instanceOf、constructor」を使用するときは注意してください：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var arr = ["a", "b", "c"]; typeof arr; // return "object" arr instanceof Array // true arr.constructor(); //[] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

7- 自己呼び出し機能を使用します。
多くの場合、自己呼び出し匿名関数（IMF）または即時呼び出し関数式（IIFE）と呼ばれます。 これは、作成時にすぐに起動される関数で、次の形式があります。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (function(){ // some private code that will be executed automatically })(); (function(a,b){ var result = a+b; return result; })(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; // numbers = [0,1,2,3 ... 100] for( var i=1; numbersArray.push(i++) < max;); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

11- 任意の文字セットの生成：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function generateRandomAlphaNum(len) { var rdmstring = ""; for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

12- 配列のシャッフル：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; numbers = numbers.sort(function(){ return Math.random() - 0.5}); /* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

13- 文字列の `trim（）`関数：
Java、C＃、PHP、および空白を削除する他の多くのプログラミング言語で利用できる古典的な `trim（）`関数は、JavaScriptには含まれていません。 ただし、それを `String`オブジェクトに追加できます：

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

（注-抵抗することはできませんでしたが、著者がこの手法を使用しているのは奇妙です、
`trim（）`がすでにJavaScriptにあるかのように）

14-ある配列を別の配列に追加します。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

15- `arguments`オブジェクトを配列に変換します：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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) === '[object Array]' ; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

`toString（）`メソッドがオーバーライドされた場合、このトリックを使用すると結果が期待どおりにならないことに注意してください。
または活用してください...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Array.isArray(obj); // its a new Array method ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

多くのフレームで作業していない場合は、 `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 will not work correctly, myArray loses his constructor // constructor is not shared between frames arr instanceof Array; // false ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

18- 数値配列の最大値、最小値を取得します。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var numbers = [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 will be equal to []. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

20- 配列から削除するために `delete`を使用しないでください：
配列からエントリを削除するには、 `delete`の代わりに` split`を使用します。 「delete」を使用しても削除されませんが、要素は「undefined」に置き換えられます。
代わりに...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

これを使用して...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

ただし、オブジェクトのプロパティを削除するには `delete`を使用する必要があります。

21- `length`を使用して配列をトリムする：
空の配列を使用した前の例のように、配列をトリミングするには、 `length`プロパティを使用します。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124]. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

ボーナス、配列の長さの値を現在の値よりも大きく設定すると、配列の長さが変更され、新しい値が設定されます
「未定義」として。 配列の長さプロパティは、読み取り専用ではありません。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

22-条件式に論理的な「AND / OR」を使用する：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var foo = 10; foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething(); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

論理的な「OR」は、関数の引数のデフォルト値を設定するためにも使用できます。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Function doSomething(arg1){ Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it's not already set } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

23- `map（）`メソッドを使用して配列をループします：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares will be equal to [1, 4, 9, 16] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

24- 数値を小数点以下N桁に丸めます：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

25- 浮動小数点の問題：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 9007199254740992 9007199254740992 + 2 // is equal to 9007199254740994 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

なぜこれが起こっているのですか？ 0.1 + 0.2は0.30000000000000004に相当します。 知っておくべきことは、内部に浮動小数点を持つJavaScriptのすべての数値は、IEEE 754標準に従って、バイナリ形式の64ビットとして表されるということです。
さらにサンプルが必要な場合は、このブログをご覧ください。
このような問題を回避するには、 `toFixed（）`および `toPrecision（）`メソッドを使用できます。

26- for-inループを使用するときにオブジェクトのプロパティを確認します。
このコード例を使用して、プロトタイプオブジェクトのプロパティの繰り返しを回避できます。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

27-コンマ演算子：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 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(undifined); // false isFinite(); // false isFinite(null); // true !!! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

30- 配列内の負のインデックスを避けます：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var numbersArray = [1,2,3,4,5]; var from = numbersArray.indexOf("foo") ; // from is equal to -1 numbersArray.splice(from,2); // will return [5] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

`indexOf`に渡される引数が負でないことを確認してください。

31-シリアル化と逆シリアル化（JSONの場合）：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; var stringFromPerson = JSON.stringify(person); /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ var personFromString = JSON.parse(stringFromPerson); /* personFromString is equal to person object */ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

32- `eval（）`または `Function`コンストラクターを避けます：
`eval`または` Function`コンストラクターを使用すると、ソースコードがjavascriptエンジンによって実行可能ファイルに変換されるたびに、高価な操作になります。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var func1 = new Function(functionCode); var func2 = eval(functionCode); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

33- 「with」（良いもの）を避ける：
「with」を使用すると、グローバル空間で変数が定義されます。 変数の名前が同じ場合、値が消去される可能性があるため、これにより特定の問題が発生します。

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]; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

これがループ構造の最初の表現であるため、「i」と「len」のボーナス割り当ては1回だけ行われます。 これは...より高速です

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ for (var i = 0; i < arrayNumbers.length; i++) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

なんで？ `arrayNumbers`配列の長さは、ループの各反復で計算されます。

35- `setTimeout（）`と `setInterval（）`の文字列ではなく関数を渡します：
文字列を `setTimeout（）`または `setInterval（）`に渡すと、それらは `eval`を使用するのと同じ方法で処理されます。これは遅いです。

代わりに...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

...使用...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

36- シリーズfrom` if / else`の代わりに `switch / case`を使用：
3つ以上の条件がある場合は、「switch / case」を使用すると高速で、コードを整理するのに適しています。 これを避ける
10個を超える条件式がある場合の式。

37- 数値範囲で `switch / case`式を使用します：
数値範囲で「switch / case」式を使用すると、次のトリックが可能になります。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); // will return "Baby" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

38- プロトタイプが指定されたオブジェクトであるオブジェクトを作成します。
関数の引数で渡されるオブジェクトをプロトタイプとするオブジェクトを作成する関数を作成することができます...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype= object; return new OneShotConstructor(); } clone(Array).prototype ; // [] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

39- HTMLエスケーパー：

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function escapeHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", "\"": """}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

40- ループ内で「try-catch-finally」を使用しないでください：
「try-catch-finally」は、例外がスローされて変数にバインドされるたびに、現在の実行スペースに新しい変数を作成します。

代わりに...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i++) { try { // do something that throws an exception } catch (e) { // handle exception } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

...それを使用して...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var object = ['foo', 'bar'], i; try { for (i = 0, len = object.length; i <len; i++) { // do something that throws an exception } } catch (e) { // handle exception } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

41- `XMLHttpRequests`の遅延を設定します：
XHRに時間がかかりすぎると（たとえば、ネットワークの問題）接続が失われる場合があります。呼び出しには `setTimeout（）`を使用します
XHR。

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () { if (this.readyState == 4) { clearTimeout(timeout); // do something with response data } } var timeout = setTimeout( function () { xhr.abort(); // call error callback }, 60*1000 /* timeout after a minute */ ); xhr.open('GET', url, true); xhr.send(); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

おまけとして、同期Ajaxリクエストを避ける必要があります。

42- WebSocketタイムアウトに対処する
通常、接続が確立されると、サーバーは30秒間非アクティブになった後、タイムアウトにより接続をリセットできます。 ファイアウォールは、一定期間後、非アクティブのためにタイムアウトにより接続をリセットすることもできます。
この問題は、空のメッセージをサーバーに送信することで解決できます。 これを行うには、2つの関数をコードに追加する必要があります。1つは接続をサポートし、もう1つはこのサポートをキャンセルします。
このトリックを使用して、タイムアウトを管理します。

`timerID`を追加...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var timerID = 0; function keepAlive() { var timeout = 15000; if (webSocket.readyState == webSocket.OPEN) { webSocket.send(''); } timerId = setTimeout(keepAlive, timeout); } function cancelKeepAlive() { if (timerId) { cancelTimeout(timerId); } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

webSocketの `onOpen（）`メソッドの最後に `keepAlive（）`を追加する必要があります
接続と `cancelKeepAlive（）`を `onClose（）`メソッドの最後に追加します。

43-プリミティブは関数呼び出しよりも高速であることを忘れないでください。
VanillaJSを活用する

たとえば、代わりに...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var min = Math.min(a,b); A.push(v); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

...それを使用して...

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var min = a < b ? ab; A[A.length] = v; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

44-コードのフォーマットとスタイルのツールを使用することを忘れないでください。
コードが有効になる前に、JSLintと最小化（たとえば、JSMin）を使用します。

45- JavaScriptは単純にshiiiikaaaren： JavaScriptを学ぶのに最適なリソースです。

おわりに

当然のことながら、多くのヒント、トリック、およびプラクティスがあります。 したがって、追加するものがある場合は、フィードバックを取得するか、調整を行います-コメントを記入します。

参照資料

この記事を書くときはコード例を使用しましたが、他の記事やフォーラムからヒントを得た例もあります。

• JavaScriptパフォーマンスのベストプラクティス （ CC ）
• Google Code JavaScriptのヒント
• StackOverFlowのヒントとコツ
• XHRのタイムアウト

そして、これが物語の終わりです…。

誰もが、この資料に書かれて述べられていることとは異なる関係をもつことができます。 彼は十分に良かったのか、質問がどれほど深く明らかにされたのか、結果がカバーされたのか、例がどれほど賢くて面白かったのか。
翻訳者としての私の仕事は、彼を一般市民のシナプスの仕事から沸き起こっている講演者の法廷に連れて行くことでした。 そして、なぜ彼がこれを特に必要としているのか-誰もが自分で決める。
著者と話したい人、コメントを読む-リンクをたどってください。 元の記事をご覧ください。 私のささやかなコピーがあなたに利益をもたらし、多くの時間を費やさなかったことを願っています。

ご清聴ありがとうございました！

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
元のテキスト
原文の著者：Saad Musliki（ ヒーローを見る ）
* 2013年12月23日*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~