JavaScript プログラマーが知っておくべき 45 の実践的なヒント_javascript のヒント-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

May 16, 2016 pm 04:57 PM

javascript 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 < len; 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を使用します。
例:

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