share_javascript スキルを身につけるための 20 の実践的な JavaScript スキル-jsチュートリアル-php.cn

share_javascript スキルを身につけるための 20 の実践的な JavaScript スキル

WBOY

リリース： 2016-05-16 16:29:55

オリジナル

1398 人が閲覧しました

ご存知のとおり、JavaScript は非常に人気のあるプログラミング言語であり、開発者は魅力的な Web プログラムを開発するだけでなく、いくつかのモバイルアプリケーション (PhoneGap や Appcelerator など) の開発にも使用できます。、NodeJS、Wakanda、その他の実装など。さらに、多くの開発者は JavaScript を入門レベルの言語として選択し、ポップアップウィンドウなどの小さなものを作成するためにそれを使用しています。

この記事では、フロントエンド開発者でもサーバーサイド開発者でも、著者が JavaScript 開発のヒント、ベストプラクティス、その他の非常に実践的な内容を紹介します。それらは間違いなくあなたに利益をもたらします。

この記事で提供されているコードスニペットは、V8 JavaScript エンジン (V8 3.20.17.15) を使用する Chrome 30 の最新バージョンでテストされています。

1. 初めて変数に値を割り当てるときは、var キーワード

を忘れないでください。

宣言されていない変数に値を割り当てると、その変数はグローバル変数として自動的に作成されます。JS 開発では、グローバル変数の使用を避ける必要があります。

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. 行末記号としてセミコロンを使用します

開発者がセミコロンの追加を忘れた場合でも、ほとんどの場合、JavaScript パーサーが自動的にセミコロンを追加するため、行の終了にはセミコロンを使用することをお勧めします。

4. コンストラクター

を作成します。

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

関数 人(名, 姓){ 

This.firstName = 名 

This.lastName = 姓 

} 

var Saad = 新しい人("Saad", "Mousliki");

5. Typeof、instanceof、およびコンストラクターは慎重に使用する必要があります

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

var arr = ["a", "b", "c"];
typeof arr; // "オブジェクト" を返します 

arr 配列のインスタンス // true 

arr.constructor() //[] 

6. 自己呼び出し関数を作成します

これは、自己呼び出し匿名関数または即時呼び出し関数式 (LLFE) と呼ばれることがよくあります。関数が作成されると、次のように自動的に実行されます:

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

(関数(){

// 自動的に実行されるプライベート コード 

})(); 

(関数(a,b){ 

var 結果 = a b;
結果を返します 

})(10,20) 

7. 配列

にランダムな項目を作成します。

コードをコピーしますコードは次のとおりです: var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];

var randomItem = items[Math.floor(Math.random() * items.length)];

8. 特定の範囲の乱数を取得します

次のコードは、最低給与と最高給与の前にランダムな値を取得するなど、テスト用に偽のデータを生成する必要がある場合に非常に多用途です。

コードをコピー

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

var x = Math.floor(Math.random() * (最大値 - 最小値 1)) 分

9. 数値 0 から最大数値までの一連の乱数を生成します

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

var 数値配列 = [] 、最大 = 100;

for( var i=1;numberArray.push(i )

10. ランダムな英数字のセットを生成します

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

functiongenerateRandomAlphaNum(len) { 

var rdmstring = "";
for( ; rdmString.length 
}

11. デジタルアレイをスクランブルします

コードをコピーします

コードは次のとおりです: 変数番号 = [5, 458, 120, -215, 228, 400, 122205, -85411]; 数値 = 数値.sort(関数(){ return Math.random() - 0.5}); /* 配列番号は、たとえば [120, 5, 228, -215, 400, 458, -85411, 122205] となります */

12. 文字列 tim 関数

trim 関数は文字列から空白文字を削除でき、Java、C#、PHP などの言語で使用できます。

コードをコピーします

コードは次のとおりです: String.prototype.trim = function(){return this.replace(/^s |s $/g, "");};

13. 配列の追加

コードをコピーします

コードは次のとおりです: var array1 = [12 , "foo" , {name "ジョー"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 は [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] と等しくなります */

14. パラメータオブジェクトを配列

に変換します

コードをコピーします

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

var argArray = Array.prototype.slice.call(引数); 15. 指定されたパラメータが数値であるかどうかを確認します

コードをコピーします

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

関数 isNumber(n){

!isNaN(parseFloat(n)) && isFinite(n) を返します。 } 16. 指定されたパラメーターが配列

であることを確認します。

コードをコピーします

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

関数 isArray(obj){

戻り値 Object.prototype.toString.call(obj) === '[オブジェクト配列]' ; }

toString() メソッドがオーバーライドされると、期待した結果が得られないことに注意してください。または、次のように書くこともできます:

コードをコピー

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

Array.isArray(obj); // 新しい Array メソッド

同様に、複数のフレームを使用する場合、コンテンツが多すぎる場合は、instancesof を使用できます。

コードをコピー

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

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

17. 数値配列

から最大値と最小値を取得します。

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

変数番号 = [5, 458, 120, -215, 228, 400, 122205, -85411]; var maxInNumbers = Math.max.apply(数学, 数値); var minInNumbers = Math.min.apply(数学, 数値);

18. 配列をクリアします

コードをコピーします

コードは次のとおりです: var myArray = [12, 222, 1000]; myArray.length = 0; // myArray は [] と等しくなります。

19. 配列 

 から項目を削除するために delete を使用しないでください。

開発者は、配列項目を削除するために、削除の代わりに分割を使用できます。配列内の未定義の項目を削除する代わりに、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 メソッドはオブジェクトのプロパティを削除する必要があります。

20. length 属性を使用して配列 

 を短縮します。

配列をクリアするために上で述べたように、開発者は 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] // 未定義

;