JavaScript自体は単純な言語と見なすことができますが、知恵と柔軟なパターンで常にそれを改善しています。昨日、これらのパターンをJavaScriptフレームワークに適用しましたが、今日、これらのフレームワークは再びWebアプリケーションを推進しています。多くの初心者開発者は、さまざまな強力なJavaScriptフレームワークに惹かれていますが、フレームワークの背後に広大で広大な実用的なJavaScriptスキルを無視しています。この記事では、知識ポイントの包括的な紹介をご紹介します。
1。JS整数の操作
| 0と~~を使用して、フローティングポイントを整数に変換し、同様のparseintやmath.roundよりも高速です。これは、ピクセルやアニメーション変位などの効果を扱うときに役立ちます。これがパフォーマンスの比較です。
var foo =（12.4 / 4.13）| 0; //結果は3Var bar = ~~（12.4/4.13）; //結果は3です
別の小さなトリックは！ ！ 2つの感嘆符、値について話して、すぐにブール値に変換できます。テストできます！
var eee = "eee"; alert（!! eee）
リターンは真です。つまり、あらゆる値が先行することを意味します！ ！すべてがtrueに等しくなる可能性があります。この値が元々ブール値であるか、未定義である場合、または未定義、null、0、false、nan ''、未定義、null、0、false、nanが言及されているため、これらは元々falseであるため、2つが追加されます！ ！その後、それはまだファールです。
2。ネイティブアラートを書き直し、ポップアップボックスの数を記録します
（function（）{var oldalert = window.alert、count = 0; window.alert = function（a）{count ++; oldalert（a + "/n You Called +" + "times now。3。中間変数を宣言しないデジタル交換の方法
2つの数字を交換する場合、一般的なアプローチは中間変数を宣言することですが、今日のアプローチはかなり奇妙です。中間変数を宣言して、それがどのように実装されているかを確認する必要はありません！
var a = 1、b = 2; a = [b、b = a] [0]; console.log（ 'a：'+a+'、b：'+b）; //出力a：2、b：1
それはどうですか、この方法には新しい気持ちがありますか？
4。すべてがオブジェクトです
JavaScriptの世界では、すべてがオブジェクトです。 nullおよび未定義である他の基本的なタイプの数字に加えて、文字列とブール酸類には対応するラッパーオブジェクトがあります。オブジェクトの特徴の1つは、メソッドを直接呼び出すことができることです。
数値の基本タイプの場合、それのトストリング方法を呼び出そうとするときに失敗しますが、括弧内に囲まれてから呼び出された後に失敗することはありません。内部実装は、対応するラッパーオブジェクトを使用して、基本タイプをオブジェクトに変換することです。したがって、（1）.toString（）は新しい数字（1）.toString（）に相当します。したがって、実際には、基本的なタイプの数字、文字列、ブーチャンなどをオブジェクトとして使用できます。適切な構文に注意してください。
同時に、JavaScriptの数値が浮動ポイントとシェーピングに分割されていないことに気付きました。すべての数値は実際には浮動点タイプであり、小数点を省略するだけです。たとえば、表示される1は1として記述できます。これが、1。toString（）を試みたときにエラーが報告される理由です。したがって、それを書く正しい方法は次のようにする必要があります：1..toString（）、または上記のブラケットを追加します。ここでの括弧の目的は、JSパーサーを修正することであり、1以降のポイントを小数点と見なさないでください。内部実装は、上記のとおりで、1。ラッパーオブジェクトを持つオブジェクトに変換し、メソッドを呼び出します。
5。IFステートメントの変形
IFステートメントを書く必要がある場合は、代わりにJavaScriptの論理演算子を使用して、別のより簡単な方法を試してください。
var day =（new Date）.getDay（）=== 0; //従来のifステートメントif（day）{alert（ 'Today is Sunday！'）;}; // Logicを使用してifday && alert（ 'Today is Sunday！'）;たとえば、上記のコードは今日の日付を取得します。日曜日の場合、ポップアップウィンドウの場合、それ以外の場合は何も行われません。論理操作には短絡があることを知っています。ロジックと式の場合、両方が真である場合にのみ、結果が真である可能性があります。前日の変数がfalseと判断された場合、結果は式全体のfalsであるため、後続のアラートは継続されません。前日が当てはまる場合、後続のコードを継続して、式全体の信頼性を決定するために次のコードを実行し続ける必要があります。この点を使用して、IFの効果が達成されます。
従来のIFステートメントの場合、実行ボディコードが1つのステートメントを超える場合、巻き毛のブレースが必要であり、コンマ式を使用して、インケリーブレースなしでコードを実行できます。
if（conditoin）alert（1）、alert（2）、console.log（3）;
6。ake ===、==ではありません
==（または！=）演算子は、必要に応じてタイプ変換を自動的に実行します。 ===（または！==）操作は変換を実行しません。値とタイプを比較し、速度の観点からも==よりも優れていると見なされます。
[10] === 10 // false [10] == 10 // true'10 '== 10 // true'10' == 10 // false [] === 0 // true [] === 0 // false '' == false // true == "はfals
7.閉鎖を使用して、プライベート変数を実装します
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; }; //コンストラクターvar職業で初期化されていない属性。 this.getoccupation = function（）{return courdut; }; this.setoccupation = function（newocc）{crocuption = newocc; };}8。オブジェクトコンストラクターを作成します
function person（firstName、lastName）{this.firstname = firstName; this.lastname = lastname;} var saad = new person（ "saad"、 "mousliki"）;9。Typeof、instanceof、およびconstructorを使用するように注意してください
var arr = ["a"、 "b"、 "c"]; typeof arr; // "object" arr instance of array // truearr.constructor（）; // []
10。セルフコール関数を作成します
これは、多くの場合、自己挑発された匿名関数またはインスタントコール関数式と呼ばれます。これは、通常は次のように、作成直後に自動的に実行される関数です。
（function（）{//自動的に実行されるいくつかのプライベートコード}）（）;（function（a、b）{var result = a+b;戻り結果;}）（10,20）11.配列からランダムなアイテムを取得します
var items = [12、548、 'a'、2、5478、 'foo'、8852 、、 'doe'、2145、119]; var randomitem = items [math.floor（math.random（） * items.length）];
12。特定の範囲内で乱数を取得します
このスニペットは、最小値と最大値の間のランダムな給与値など、テストデータを生成する場合に非常に便利です。
var x = math.floor（math.random（） *（max -min + 1）） + min;
13。0から設定された最大値の間の数値の配列を生成します
var numbersArray = []、max = 100; //番号= [0,1,2,3 ... 100]
14.乱数のアルファベット文字列を生成します
関数generaterandomalphanum（len）{var rdmstring = ""; for（; rdmstring.length <len; rdmstring += math.random（）。toString（36）.substr（2））; RDMSTRING.SUBSTR（0、LEN）;} //メソッドGENERATHOMALPHANUM（15）を呼び出します。15。数字の配列をスクランブルします
var番号= [5、458、120、-215、228、400、122205、-85411]; numbers = numbers.sort（function（）{return math.random（） - 0.5}）;16。文字列のトリム関数
string.prototype.trim = function（）{return this.replace（/^/s+|/s+$/g、 ""）;};17。別の配列に配列を追加（追加）します
var array1 = [12、 "foo"、{name： "joe"}、-2458]; var array2 = ["doe"、555、100]; array.prototype.push.apply（array1、array2）;/ * array1は[12、 "foo"、{name "" "foo"、{foo "、" "18.引数オブジェクトを配列に変換します
var argarray = array.prototype.slice.call（arguments）; [翻訳者のメモ：引数オブジェクトはクラスの配列オブジェクトですが、実際の配列ではありません]
19。パラメーターが数字（番号）であるかどうかを確認します
function isNumber（n）{return！isnan（parsefloat（n））&& isfinite（n）;}20。パラメーターが配列かどうかを確認します
function 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 array（a、b、10）; // [a、b、10] //インスタンスは正しく機能しません、myarrayはコンストラクターを失います//コンストラクターは、framesArrインスタンスの配列間で共有されません。 // 間違い
[翻訳者のメモ：インターネット上でアレイを判断する方法について多くの議論があります。Googleをグーグルで検索できます。この記事については詳細に書かれています。 】
21.数字の配列で最大値または最小値を取得します
var番号= [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メソッドを使用してパラメーターを渡すスキルは次のとおりです。
22.配列をクリアします
var myArray = [12、222、1000]; myarray.length = 0; // myArrayは[]に等しくなります。
23.削除を使用して、配列内のアイテムを削除しないでください。
削除する代わりにスプライスを使用して、配列内のアイテムを削除します。 deleteを使用すると、元のアイテムを未定義に置き換えるだけで、実際には配列から削除されません。
この方法を使用しないでください：
var items = [12、548、 'a'、2、5478、 'foo'、8852、 'doe'、2154、119]; items.length; // 11deleteアイテムを返します[3]; // trueItems.lengthを返します。 // return 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; // 11items.splice（3,1）; items.length; //返される10/ *アイテムは[12、548、 "a"、5478、 "foo"、8852、未定義×1、 "doe"、2154、119] */]に等しくなります。
削除メソッドを使用して、オブジェクトのプロパティを削除する必要があります。
24。長さを使用して、配列を切り捨てます
上記の配列をクリアする方法と同様に、長さ属性を使用して配列を切り捨てます。
var myArray = [12、222、1000、124、98、10]; myArray.length = 4; // MyArrayは[12、222、1000、124]に等しくなります。
さらに、アレイの長さを現在の値よりも大きな値に設定すると、アレイの長さが変更され、新しい未定義のアイテムが追加されて入力されます。配列の長さは、読み取り専用のプロパティではありません。
myarray.length = 10; //新しい配列の長さは10myarray [myarray.length -1]です。 // 未定義
25。論理的および/または条件付き判断を下すために使用します
同じ（5）、変形ステートメントの場合！
var foo = 10; foo == 10 && dosomething（）; // if（foo == 10）dosomething（）; foo == 5 || dosomething（）; // if（foo！= 5）dosomething（）に相当します。
論理的で、関数パラメーターのデフォルト値を設定するためにも使用できます
関数dosomething（arg1）{arg1 = arg1 || 10; // arg1が設定されていない場合、arg1はデフォルトで10に設定されます}26。マップ（）メソッドを使用して、配列内のアイテムを通過する
var squares = [1,2,3,4] .map（function（val）{return val * val;}）; //正方形は[1、4、9、16]に等しくなります。27。数字を丸め、n 10桁の場所を保持します
var num = 2.443242342; num = num.tofixed（4）; // numは2.4432に等しくなります
28。浮動小数点数の問題
0.1 + 0.2 === 0.3 // false9007199254740992 + 1 //は90071992547409929007199254740992 + 2 //
なぜこれが起こっているのですか？ 0.1+0.2は0.30000000000000000004に相当します。すべてのJavaScript番号は、IEEE 754標準に準拠している64ビットバイナリで表現された内部的に浮動的なポイント番号であることを知っておく必要があります。詳細については、このブログ投稿を読むことができます。 Tofixed（）およびtrocrecision（）メソッドを使用して、この問題を解決できます。
29。オブジェクトの内部プロパティをトラバースするためにfor-inを使用する場合は、プロパティを確認してください。
次のコードスニペットは、オブジェクトプロパティを通過するときにプロトタイプのプロパティへのアクセスを避けることができます。
for（objectのvar name）{if（object.hasownproperty（name））{//名前で何かをする}}}30、コンマオペレーター
var a = 0; var b =（a ++、99）; console.log（a）; // aは1console.log（b）に等しくなります。 // Bは99に等しくなります
31.計算してクエリを行う必要があるキャッシュ変数（計算またはクエリ）
jQueryセレクターの場合、これらのDOM要素をキャッシュする方が良いでしょう。
var navright = document.queryselector（ '＃right'）; var naveft = document.queryselector（ '＃left'）; var navup = document.queryselector（ '＃up'）; var navdown = document.queryselector（ '＃down'）;
32。isfinite（）を呼び出す前にパラメーターを確認します
Isfinite（0/0）; // falseisfinite（ "foo"）; // falseisfinite（ "10"）; // trueisfinite（10）; // trueisfinite（undifined）; // falseisfinite（）; // falseisfinite（null）; // 真実 ！！！
33。配列の負のインデックスを避けます
var NumbersArray = [1,2,3,4,5]; var from = numbersarray.indexof（ "foo"）; // fromは-1numbersArray.splice（from、2）に等しくなります。 //戻ります[5]
IndexOFを呼び出すときのパラメーターが負ではないことを確認してください。
34。JSONに基づくシリアル化と降下
var person = {name： 'saad'、age：age：26、department：{id：15、name： "r＆d"}}; var stringfromperson = json.stringify（person）;/ * stringfrompersonは "{" name "：" saad "、" age "：26、" "：{" id "：" r＆d "：" "r＆d"： "" r＆d "：" id "：" "r＆d"： "id"： "" r＆d "：" id "：" r＆d "：" id " json.parse（stringfromperson）;/ * personfromstringは人物と等しい */35。eval（）および関数コンストラクターの使用を避けます
Eval and Function Constructorsを使用することは非常に高価です。なぜなら、スクリプトエンジンを呼び出してソースコードを実行可能コードに変換するたびに。
var func1 = new function（functioncode）; var func2 = eval（functioncode）;
36。（）で使用しないでください
with（）を使用すると、グローバル変数が挿入されます。したがって、同じ名前の変数が上書きされ、不必要なトラブルが発生します。
37。配列を横断するためにforinを使用しないでください
この方法の使用は避けてください：
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.lengthがループがループされるたびに計算されるためです。
38。settimeout（）およびsetInterval（）を呼び出すときに、文字列の代わりに関数を渡します。
文字列をsettimeout（）またはsetInterval（）に渡すと、文字列はevalで使用されているかのように解析されます。これは非常に時間がかかります。
使用しないでください：
setinterval（ 'dosomethingperiodially（）'、1000）; setimeout（ 'dosomethersfiveseconds（）'、5000）
そして使用：
setinterval（dosomethingperiodically、1000）; setimeout（dosomethingafterfiveseconds、5000）;
39。if/elseの長いリストの代わりにスイッチ/ケースステートメントを使用する
状況が2を超えると判断する場合、スイッチ/ケースを使用することはより効率的でエレガントです（コードの整理が簡単です）。ただし、10を超える判断がある場合は、スイッチ/ケースを使用しないでください。
40.数値範囲を審査するときにスイッチ/ケースを使用します
次の状況では、スイッチ/ケースを使用して数値範囲を決定することが合理的です。
関数getCategory（age）{var category = ""; switch（true）{case isnan（age）：category = "not a age";壊す; case（age> = 50）：category = "old";壊す;ケース（年齢<= 20）：category = "baby";壊す;デフォルト：category = "Young";壊す; }; return category;} getCategory（5）; //「赤ちゃん」を返します[翻訳者のメモ：一般的に言えば、/elseが数値範囲を判断する方が適切である場合。スイッチ/ケースは、値を決定するという判断により適しています]
41.作成されたオブジェクトのプロトタイプオブジェクトを指定します
パラメーターをプロトタイプとして指定するオブジェクトを作成する関数を作成することができます。
function clone（object）{function oneshotconstructor（）{}; oneshotconstructor.prototype = object; new oneshotConstructor（）;} clone（array）.prototypeを返します。 // []42。HTMLエスケープ機能
function escasehtml（text）{var facterments = {"<"： "<"、 ">"： ">"、 "＆"： "＆"、 "/"： "" "}; return text.replace（/[<>＆ "]/g、function（character）{return facterments [character];}）;}43。ループ内でfinallyでトライキャッチを使用しないでください
実行時に、CATCH句が実行されるたびに、キャプチャされた例外オブジェクトが変数に割り当てられ、Try-Catch-Finally Structureでは、この変数は毎回作成されます。
このように書くことは避けてください：
var object = ['foo'、 'bar']、i;
そして使用：
var object = ['foo'、 'bar']、i; try {for（i = 0、len = object.length; i <len; i ++）{//例外をスローする何かを行う}} catch（e）{//ハンドル例外}44。XMLHTTPREQUESTSのタイムアウトを設定します。
XHRリクエストが長い時間をかけた後（たとえば、ネットワークの問題により）、リクエストを中止する必要がある場合があるため、XHRコールにsetimeout（）を使用できます。
var xhr = new xmlhttprequest（）; xhr.onreadystatechange = function（）{if（this.readystate == 4）{cleartimeout（timeout）; //応答データを使用して何かを行う}} var timeout = setimeout（function（）{xhr.abort（）; // call error callback}、60*1000/*1分後*/）; xhr.open（ 'get'、url、true）; xhr.send（）;さらに、通常、同期したAJAX要求を完全に避ける必要があります。
45。 WebSocket Timeoutを処理します
通常、WebSocket接続が作成された後、アクティブでない場合、サーバーは30秒後に接続（タイムアウト）を切断します。ファイアウォールも、非アクティブな期間の後に切断されます。
タイムアウトの問題を防ぐには、空のメッセージをサーバー側に断続的に送信する必要がある場合があります。これを行うには、コードに次の2つの関数を追加できます。1つは接続を保持し、もう1つは接続を保持するためです。このトリックを使用すると、タイムアウトの問題を制御できます。
タイマリーを使用してください：
var timerid = 0; function keepalive（）{var timeout = 15000; if（websocket.readystate == websocket.open）{websocket.send（ ''）; } TimerID = setimeout（KeepAlive、Timeout）;} function cancelKeepalive（）{if（timerid）{canceltimeout（timerid）; }}websocket接続のonopen（）メソッドの最後にkeepalive（）メソッドを追加する必要があり、onclose（）メソッドの最後にCancelKeepalive（）が追加されます。
46。元の演算子は、機能呼び出しよりも常に効率的であることを忘れないでください。 Vanillajsを使用してください。
たとえば、使用しないでください。
var min = math.min（a、b）; a.push（v）;
そして使用：
var min = a <b？ ab; a [a.length] = v;
47。整数から、値をランダムに選択します
次の式がありますが、これは非常に便利で、特定の有名な引用やニュースイベントをランダムに表示できます！
value = math.floor（math.random（） *考えられる値の総数+最初の可能な値）
たとえば、2〜10の値を選択するには、このように書くことができます
var num = math.floor（math.random（）*9+2）
上記の式を覚えておいてください！ 〜
JSオペレーターの単一の垂直バーの使用と機能 "|" JSデータの処理
ちょうど今、JS Integersを操作するとき、それは小数点であるParseintを削除することと同等です。正の数がmath.floor（）に相当する場合、および負の数がmath.ceil（）に相当する場合注：
1。math.ceil（）は、上向きの丸めとして使用されます。 2。math.floor（）は、下向きの丸めとして使用されます。 3。Math.Round（）Round（）数学で一般的に使用されます。 console.log（0.6 | 0）// 0console.log（1.1 | 0）// 1console.log（3.65555 | 0）// 3console.log（5.99999 | 0）// 5console.log（-7.777 | 0）//- 7
注：数学の数学の3つの方法に加えて、Parseint（）、Parsefloat（）、Tofixed（）、Trocrecision（）などを使用することがよくあります。簡単な説明：
Tofixedメソッドの使用は次のとおりです。
100.456001.tofixed（2）; //100.47100.456001.TOFIXED(3）; //100.456Number.prototype.tofixed.call(100.456001,2）; //100.47
短所：使用後、文字列になります。
前回の使用法は次のとおりです。
99.456001.toprecision（5）; //99.456100.456001.TOPRECISION(5）; //100.46Number.Prototype.Toprecision.Call(10.456001,5）; //10.456
単一の垂直バーの操作ルール
上記の例を見た後、単一の垂直バーが丸め操作を実行できることを知っています。つまり、正の部分のみが保持され、小数部が削除されます。しかし、「| 0」はどのように計算されますか？なぜ「| 0」は丸めの目的を達成できるのですか？ 0でない場合、単一の垂直バーはどうなりますか？
これらの質問を念頭に置いて、次の例を見てみましょう。
console.log（3 | 4）; //7console.log(4|4）; //4Console.log(8|3）; //11Console.log(5.3|4.1）; //5Console.log(9|3455）; // 3455
見つけるパターンはないようですか？オンラインで検索します。 http://tools.vevb.com/table/priority
これは、単一の垂直バー「|」に言及していますしかし、JavaScriptはありません。
OK、ここで答えを発表します。実際、単一の垂直バー「|」結果は、それを2桁のシステムに変換することによって得られます。たとえば、簡単な例を見てみましょう。
3 | 4はバイナリに変換され、011 | 100追加が111 = 74 | 4がバイナリに変換され、100 | 100追加が100 = 48 | 3がバイナリに変換され、1000 | 011追加が1011 = 11に変換されます
など、ここには一つずつリストしません。単一の垂直バー「|」操作は、それを2桁のシステムに変換することで得られる結果です！あなたはそれをすべて学んだことがありますか？