JavaScript プログラマーが知っておくべき 45 の実践的なヒント_javascript のヒント

ご存知のとおり、JavaScript は世界でナンバーワンのプログラミング言語であり、Web の言語、モバイル ハイブリッド アプリ (PhoneGap や Appcelerator など)、およびサーバーサイド言語 (NodeJS など) です。またはWakanda)、他にも多くの実装があります。同時に、ブラウザ上に単純な警告メッセージを表示できるだけでなく、(nodebot または nodruino を使用して) ロボットの制御にも使用できるため、多くの初心者にとって啓発的な言語でもあります。 JavaScript をマスターし、体系化され、標準化され、パフォーマンスの高い効率的なコードを作成できる開発者は、人材市場で求められています。
この記事のコード スニペットは、V8 JavaScript エンジン (V8 3.20.17.15) を使用する最新の Google Chrome (バージョン番号 30) でテストされていることに注意してください。

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 – クロージャを使用してプライベート変数を実装します

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

function person(name, age) {
this.getName = function() { return name; };
this.setName = function(newName) { name = newName; } ;
this.getAge = function() { return age; };
this.setAge = function(newAge) { age = newAge; };

//コンストラクターで初期化されます。 Attributes
var occupation;
this.getHandling = function() { return jobs; };
this.setHandling = function(newOcc) { occupation =
newOcc; >}

4 – ステートメントの末尾にセミコロンを使用する ステートメントの末尾にセミコロンを使用することをお勧めします。ほとんどの場合、JavaScript インタプリタがセミコロンを追加してくれるため、書き忘れても警告は表示されません。
5 – オブジェクトのコンストラクターを作成します

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

function Person(firstName, lastName){

this.firstName = firstName;
this.lastName = lastName;
}

var Saad = new Person("Saad", "Mousliki") ;

6 – typeof、instanceof、コンストラクターは慎重に使用してください

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

var arr = ["a", "b", "c"];

typeof arr; // return "object"
arrinstanceof Array // true
arr.constructor(); / /[]

7 – 自己呼び出し関数の作成 これは、自己呼び出し匿名関数または即時呼び出し関数式と呼ばれることがよくあります。 (IIFE-即時に呼び出される関数式)。これは作成直後に自動的に実行される関数で、通常は次のようになります:

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

(function(){
// 自動的に実行されるプライベート コード
})();
(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)];[code]
9 – 特定の範囲の乱数を取得します
このコード スニペットは、次のような場合に非常に役立ちます。テスト データの生成に使用します。最小値と最大値の間のランダムな給与値などに役立ちます。
[code]var x = Math.floor(Math.random() * (max - min 1)) min;

10 – 0 と設定された最大値の間で生成される次の配列数値

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

varnumbersArray = [], max = 100 ;

for( var i=1;numbersArray.push(i )
11 – ランダムな英数字文字列を生成します

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

functiongenerateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length return rdmString.substr(0, len);
}

12 – 数値の配列をスクランブルします

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

varnumbers = [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] */

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] と等しくなります */
//In実際、concat は 2 つの配列接続を直接実装できますが、その戻り値は新しい配列です。これは array1

への直接の変更です。

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

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

var argArray = Array.prototype.slice.call(arguments);
arguments オブジェクトは配列のようなオブジェクトですが、実際の配列ではありません

16 – かどうかを確認します引数は数値 (数値) です

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

関数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 instanceof Array;

18 – 数値の配列の最大値または最小値を取得します

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

varnumbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math,numbers);
//翻訳者注: ここでは 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 // return 11
項目を削除します。 ; // true を返します
items.length; // 11 を返します
/* 項目は [12, 548, "a", 未定義 × 1, 5478, "foo", 未定義 × 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
/* 項目は [12, 548, "a", 5478, "foo", 8852 と等しくなります、未定義 × 1、 "Doe" 、 2154、 119] */

delete メソッドは、オブジェクトの属性を削除するために使用する必要があります。
21 – 長さを使用して配列を切り詰めます

上記の配列をクリアする方法と同様に、length プロパティを使用して配列を切り詰めます。

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

var myArray = [12, 222, 1000, 124, 98, 10 ];
myArray.length = 4; // myArray は [12, 222, 1000, 124] になります。

また、配列の長さをより大きい値に設定すると、現在の値より 1 つ大きい場合、配列の長さが変更され、新しい未定義の項目が追加されます。 配列の長さは読み取り専用のプロパティではありません。

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

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

22 – 論理 AND/OR を使用して条件判断を行います

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

var foo = 10;
foo == 10 && doSomething(); // if (foo == 10) doSomething();
foo == 5 || と同等; // if (foo != 5) doSomething();

論理 AND を使用して関数パラメータのデフォルト値を設定することもできます

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

function doSomething(arg1){
Arg1 = arg1 || // arg1 がそうでない場合設定すると、Arg1 はデフォルトで 10 に設定されます
}

23 – map() メソッドを使用して配列内の項目を反復処理します

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

var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// 平方は [1, 4, 9, 16]

24 – 数値を 10 進数の N に丸めます場所

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

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

25 – 浮動小数点問題

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

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 (var name in object) {
if (object.hasOwnProperty(name)) {
// 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 navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');

29 – isFinite() を呼び出す前にパラメータを検証します

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

isFinite(0/0); // false
isFinite("foo"); // true
isFinite(10); ); // true
isFinite(未定義); // false
isFinite(null); // true !!!

30 – 配列内での回避 負のインデックス

コードをコピー コードは次のとおりです。varnumbersArray = [1, 2,3,4,5];

var from =numbersArray.indexOf("foo") ; // from は -1 に等しい

numbersArray.splice(from,2); [5 ]
を返す
indexOf を呼び出すときの引数が負でないことを確認してください。

31 – JSON ベースのシリアル化と逆シリアル化

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

var person = {名前 :'Saad'、年齢 : 26、部署 : {ID : 15、名前 : "研究開発"} };
var stringFromperson = JSON.stringify(person );
/* stringFromPerson は "{"name":"Saad","age":26,"Department":{"ID":15,"name":"R&D"}}" に等しい */
var personFromString = JSON.parse(stringFromPersonal);
/* personFromString は person オブジェクトと等しい */

32 – eval() と Function コンストラクターの使用を避ける
eval と Function を使用するコンストラクターは毎回スクリプト エンジンを呼び出してソース コードを実行可能コードに変換するため、非常にコストのかかる操作です。

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

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 sum = arrayNumbers[i];
}

追加の利点は次のとおりです。 i と len は両方とも変数の値は 1 回だけ実行され、次の方法よりも効率的です:

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

for (var i = 0; i
なぜですか? arrayNumbers.length はループするたびに計算されるためです。
35 – setTimeout() および setInterval() を呼び出すときに、文字列の代わりに関数を渡します。
文字列を setTimeout() または setInterval() に渡すと、その文字列は eval を使用しているかのように解析され、非常に時間がかかります。
使用しないでください:

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

setInterval ('doSomethingPeriodical() ', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)

そして以下を使用します:

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

setInterval(doSomethingPeriodively, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);

36 – switch/case ステートメントを使用し、3 つ以上の状況を判断する場合、if/else
の長いリストの代わりに、switch/case を使用する方が効率的かつ洗練されます (コードを整理しやすくなります)。ただし、判断する状況が 10 個を超える場合は、switch/case を使用しないでください。
37 – 数値範囲を判断するときに switch/case を使用します
次の状況では、数値範囲を判断するために switch/case を使用することが合理的です:

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

function getCategory(age) {
var category = "";
switch (true) {
case isNaN(age):
category = "年齢ではありません";
ブレーク; カテゴリ = "赤ちゃん" ;
ブレーク;
デフォルト:
カテゴリ = "若い";
ブレーク;
};
カテゴリを返します;
}
getCategory(5) ; // "Baby" を返します
//一般に、数値範囲を判断するには、if/else を使用する方が適切です。 switch/case は特定の値を判断するのに適しています


38 – 作成したオブジェクトのプロトタイプ オブジェクトを指定します

指定されたパラメーターを持つオブジェクトを作成する関数を次のように記述することができますプロトタイプ:

コードをコピー

コードは次のとおりです:function clone(object) { function OneShotConstructor(){ }; OneShotConstructor.prototype= object; return new OneShotConstructor();

}

clone(Array).prototype // []

39 – 1 つの HTML エスケープ関数

コードをコピー

コードは次のとおりです。functionscapeHTML (テキスト) { var replaces= {"": ">","&": "&", """: """}; return text.replace( /[&"]/g, function(character) { return replaces[character]; 実行時に毎回内部的に try-catch-finally

を使用しますcatch 句が実行されると、キャッチされた例外オブジェクトが変数に割り当てられ、try-catch-finally 構造内で毎回この変数が作成されます

。
次のような記述は避けてください:

コードをコピー

コードは次のとおりです:var object = [ 'foo' , 'bar'], i;

for (i = 0, len = object.length; i try {

// 例外をスローする何かを行う } catch (e) { // 例外を処理します }}

を使用します:

コードをコピー


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

var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object .length; i

// 例外をスローする処理を実行します }}catch (e) { // ハンドルException}

41 – XMLHttpRequests のタイムアウトを設定します。

XHR リクエストに長時間かかると (ネットワークの問題などにより)、リクエストを中止する必要がある場合は、XHR 呼び出しで setTimeout() を使用できます。




コードをコピー

コードは次のとおりです。var xhr = new XMLHttpRequest ();
xhr .onreadystatechange = function () {
if (this.readyState == 4) {

clearTimeout(timeout); // 応答データを使用して処理します }}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;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout( keepAlive, timeout);
}
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 – エンコードするときは、コード整理ツール を使用することを忘れないでください。オンラインにする前に、JSLint とコード圧縮ツール (縮小化) (JSMin など) を使用します。 「時間節約ツール: コードの美化および書式設定ツール」

45 – JavaScript は素晴らしいです。

概要

他にもたくさんのヒント、コツ、ベストプラクティスがあると思いますので、他に追加したいことがある場合、または私が共有したものにフィードバックや修正が必要な場合は、コメント欄にその旨を記載してください。 。