Javascriptの基本のいくつかの重要なポイント

ネット 2022-03-28 10:54:39 訪問数: null

基本的な部分のいくつかの重要なポイント

1.場所を書きます

  1. タグの属性に書き込むことができます

    <button onclick = "alert("点我")"></button>

  2. ハイパーリンクのhref属性に書き込むことができます

    <a href = "javascript:alert('点我')"></a>

  3. スクリプトノートに書かれている

    <script>
    alert('点我')
</script>

  4. 外部jsファイルはスクリプトタグを介してインポートできます。通常、外部ファイルをインポートすると、コードを記述できません。記述しても、ブラウザは無視します。必要に応じて、内部書き込み用の新しいスクリプトタグを作成できます。コード。

    <script type = "text/javascript" src="js/script.js">
	alert('我是猪')   //无效
</script>



2.構文上の注意

  1. JSのすべてのステートメントは（；）最後に、セミコロンを記述しない場合、ブラウザは自動的に追加しますが、システムリソースを消費し、ブラウザが間違ったセミコロンを追加する場合があるため、開発時にセミコロンを記述する必要があります。
  2. JSは複数のスペースまたは改行を無視するため、コードをスペースまたは改行でフォーマットできます



3.リテラルと変数

導入

リテラル：すべて不変の値であり、リテラルを直接使用できます。しかし、私たちは一般的にそれを直接使用しません

変数：リテラルの保存に使用でき、変数の値は任意に変更できます。変数は使い勝手が良いため、開発時によく使用されます。リテラルを変数に格納します、およびリテラルを直接使用することはめったにありません




4.データ型

導入

データ型はリテラルタイプ

JSには6つのデータ型があります。

  1. 文字列文字列
  2. 数値
  3. ブールブール
  4. ヌルの空の値
  5. 未定義未定義
  6. オブジェクトオブジェクト

その中で、String、Number、Boolean、Null、およびUndefinedはすべて基本的なデータ型であり、Objectは参照データ型です。



4.1文字列

  1. JSでは、文字列を引用符で囲む必要があります。アポストロフィまた二重引用符できますが、混同しないでください
  2. 引用符をネストしたり、一重引用符を一重引用符内に配置したり、二重引用符を二重引用符内に配置したりすることはできませんが、一重引用符と二重引用符はネストできます
  3. 文字列では、エスケープ文字として==（\）==を使用できます。特殊記号を表現する場合は、「\」を使用してエスケープできます。
    • \nは改行を意味します
    • \tはタブ文字を意味します
    • \\ 特急\


4.2番号

導入

  1. JSのすべての数値は、整数と浮動小数点数（10進数）を含むNumber型です。

  2. 演算子typeofを使用して、変数の型を確認できます。文字列を確認する場合は文字列を返し、値を確認する場合は数値を返します。

  3. 表示された値が最大値を超えると、無限大が返されます。Infinityは無限大を表すリテラルであり、typeofでInfinityをチェックするとNumberも返されます。、無限大は正の無限大を意味します、-無限大は負の無限大を意味します

  4. NaNは、数字ではないことを意味する特別な数字です。typeofでNaNをチェックすると、Numberも返されます

  5. JSでの整数の演算は、基本的に精度を保証できます。JSを使用して浮動小数点計算を実行すると、0.1 + 0.2などの不正確な結果が得られる可能性があります。したがって、比較的高い精度が必要な演算にはJSを使用しないでください。 。



4.3ヌル、未定義

導入

  1. Null型の値は1つだけで、これはnullです。nullの値は、表現するために特別に使用されます。空のオブジェクト、typeofを使用してnull値をチェックすると、物体
  2. Undefinedタイプの値は1つだけで、これは未定義です。変数を宣言する場合、ただし変数に値を割り当てません、彼の価値は未定義、typeofを使用してnull値をチェックすると、未定義


4.4文字列への強制

  1. 方法1：toString（）メソッドを呼び出します。nullとundefinedの2つの値にはtoString（）メソッドがないことに注意してください。これらのメソッドを呼び出すと、エラーが報告されます。
  2. メソッド2：String（）関数を呼び出します。NumberおよびBooleanの場合、実際にはtoString（）メソッドを呼び出していますが、nullおよびundefinedの場合は呼び出されず、変換は成功する可能性があります。


4.5鋳造番号

  1. 文字列から数値へ：== Number（）==関数を使用
    • 対応する数値に直接変換された純粋な数値の文字列
    • 文字列に数値以外のコンテンツが含まれている場合は、NaNに変換します
    • 空の文字列またはすべてスペースのある文字列の場合、0に変換されます
  2. ブール値を数値に：use == Number（）==関数、trueは1に変換され、falseは0に変換されます
  3. nullから0
  4. NaNに未定義
  5. 特に文字列を処理する場合：
    • parseInt（）：文字列を整数に変換します
    • parseFloat（）：文字列を浮動小数点数に変換します。有効な10進数を取得できます
    • 文字列以外の場合は、parseInt（）またはparseFloat（）を使用し、最初に文字列に変換してから操作します


4.6その他のベース番号

導入

  1. JSでは、16進数を表す必要がある場合は、0xから始める必要があります。
  2. 8進数を表す必要がある場合は、0から始める必要があります
  3. 2進数を表現する場合は、0bから始める必要がありますが、すべてのブラウザーが2進数をサポートしているわけではありません。
  4. 070のような文字列、一部のブラウザは8進数として解析され、一部のブラウザは10進数として解析されます
  5. parseInt（）で渡すことができます2番目のパラメーター、数値の基数を指定します


4.7ブール値に変換

Boolean（）メソッドの使用

  1. 数値---->ブール値：0とNaNを除くすべてがtrue
  2. string ----> boolean：空の文字列を除くすべてがtrue
  3. Nullおよび未定義---->ブール値：false
  4. オブジェクトもtrueに変換されます



5.算術演算子

導入

  1. 数値以外の値に対して演算を実行する場合、これらの値は数値に変換されてから演算されます。任意の値とNaN演算はNaNになります。加算演算が2つの文字列に対して実行される場合、それは連結され、2つの文字は連結操作を行う文字列。
  2. 文字列に値を追加すると、最初に文字列に変換され、次に文字列との連結操作が実行されます。この機能を使用して、任意のデータ型+""を文字列に変換できます。これは一種の暗黙的な型変換です。 、ブラウザによって自動的に実行されます。実際には、文字列とも呼ばれます。
  3. 文字列の追加を除いて、残りの操作は数値に変換されます



6.関数をすぐに実行します

<script>
    (function (){
    
    
        console.log('111')
    })()
</script>



7.スコープ

7.1グローバルスコープ

  1. varキーワードで宣言された変数は、すべてのコードが実行される前に宣言されます
  2. 関数宣言で作成された関数は、すべての関数が実行される前に作成されるため、関数宣言の前に呼び出すことができます：function A（）{}が、関数式で作成された関数は、var a = functionA（）ではありません。 {}
  3. グローバルスコープでは、作成された変数はウィンドウオブジェクトのプロパティとして保存されます


7.2機能範囲

  1. 変数が関数スコープで操作されると、最初にそれ自体のスコープで変数を検索します。存在する場合は直接使用されます。存在しない場合は、グローバルスコープが見つかるまで上位レベルのスコープを検索します。 。それでも存在しない場合は、エラーが報告されます
  2. 関数内のグローバル変数にアクセスするには、ウィンドウオブジェクトを使用できます
  3. 関数スコープには早期宣言機能もあり、関数内のすべてのコードが実行される前に関数宣言も実行されます。
  4. 関数では、varなしで宣言された変数はグローバル変数と呼ばれ、ウィンドウオブジェクトのプロパティと同等です。
  5. 正式なパラメータは、関数アクションで変数を宣言することと同じです



8.これ

導入

  1. パーサーが関数を呼び出すと、毎回暗黙のパラメーターが関数に渡されます。このパラメーターはthisであり、これはオブジェクトを指します。
  2. このオブジェクトは、関数実行のコンテキストオブジェクトと呼ばれます
  3. 関数の呼び出し方法に応じて、これはさまざまなオブジェクトを指します。
    • 関数として呼び出された場合、これは常にウィンドウです
    • メソッドとして呼び出された場合、これはメソッドが呼び出されたオブジェクトです



9.プロトタイプオブジェクト

導入

  1. 作成する関数ごとに、パーサーはプロパティのプロトタイプを関数に追加します。このプロパティはオブジェクトに対応します、このオブジェクトは、プロトタイプオブジェクトと呼ばれるものです。

  2. 関数が通常の関数として呼び出された場合、プロトタイプは効果がありません

  3. 関数がコンストラクターの形式で呼び出されると、関数が作成するオブジェクトには、コンストラクターのプロトタイプオブジェクトを指す暗黙のプロパティがあります。** __ proto __ **を介してこのプロパティ（二重下線）にアクセスできます。

  4. プロトタイプオブジェクトはパブリックエリアに相当します。同じクラスのすべてのインスタンスがこのプロトタイプオブジェクトにアクセスできます。オブジェクトの共通コンテンツをプロトタイプオブジェクトに一律に設定できます。

  5. オブジェクトの属性またはメソッドにアクセスするとき、彼は最初にオブジェクト自体でそれを探します。存在する場合は直接使用され、そうでない場合はオブジェクトのプロトタイプオブジェクトで検索されます。見つかった場合に使用されます。

  6. 将来コンストラクターを作成するときに、これらのオブジェクトに共通のプロパティとメソッドをコンストラクターのプロトタイプオブジェクトに一律に追加して、各オブジェクトにプロパティとメソッドを持たせることができます。

  7. プロトタイプオブジェクトもオブジェクトであるため、プロトタイプもあります。オブジェクトのプロパティまたはメソッドを使用する場合、最初にそれ自体を検索します。そうでない場合は、プロトタイプオブジェクトで検索します。それがまだ存在しない場合は、プロトタイプのプロトタイプオブジェクトを検索します。 Objectオブジェクトのプロトタイプを見つけます。

ここに画像の説明を挿入




10.アレイ

10.1配列の4つの方法

  1. push（）：配列の最後に1つ以上の要素を追加します
  2. pop（）：配列の最後の要素を削除し、削除された要素を戻り値として返します
  3. unshift（）：配列の先頭に1つ以上の要素を追加し、新しい配列の長さを返します
  4. shift（）：配列の最初の要素を削除し、削除された要素を戻り値として返します


10.2 forEach（）

導入

  1. forEach（）メソッドには、パラメーターとしてコールバック関数が必要です
  2. 配列にはいくつかの要素があり、関数は数回実行されます。実行されるたびに、ブラウザはトラバースされた要素を実際のパラメータの形式で渡します。
  3. ブラウザは、コールバック関数で3つのパラメータを渡します。
    • 最初のパラメータは、現在トラバースされている要素です
    • 2番目のパラメーターは、現在トラバースされている要素のインデックスです。
    • 3番目のパラメーターは、トラバースする配列です。
  4. この方法は、IE8以降のブラウザーのみをサポートします。IE8との互換性が必要な場合は、forEachを使用しないでください。


10.3slice（）およびsplice（）

導入

  1. スライス（）：選択した要素を配列から返すことができます。このメソッドは元の配列には影響しませんが、インターセプトされた要素を新しい配列にカプセル化して返し、左側で開き、右側で閉じます。

    • パラメータ：

      • 迎撃が始まる位置：開始

      • 傍受が終了する位置：終了

        let arr=["a","b","c","d","e"];
console.log(arr.slice(0, 3)); //["a", "b", "c"]

  2. splice（）：元の配列に影響を与える配列内の指定された要素を削除し、元の配列から指定された要素を削除し、削除された要素を戻り値として返すことができます。

    • パラメータ：

      • 最初：開始位置のインデックス

      • 2番目：削除の数

      • 3番目以降：新しい要素を渡すことができ、これらの要素は開始位置インデックスの前に自動的に挿入されます。

        <script>
    let arr=["a","b","c","d","e"];
    console.log(arr.splice(0, 3,'aaa'));
    console.log(arr);  //["aaa", "d", "e"]
</script>



11.電話、申し込み

導入

  1. これらの2つのメソッドはどちらも関数オブジェクトのメソッドであり、関数オブジェクトを介して呼び出す必要があります。
  2. 関数オブジェクトでcall（）とapply（）を呼び出すと、両方の関数の実行が呼び出されます。これはfunc（）と同等です。
  3. call（）およびapply（）を呼び出す場合、最初のパラメーターとしてオブジェクトを指定できます。このオブジェクトは、関数の実行時にこれになります。
  4. call（）は、オブジェクトの後に実際のパラメーターを順番に渡すことができます。apply（）メソッドは、実際のパラメーターを配列にカプセル化して、それらを均一に渡す必要があります。
<script>
    let obj={
    
    name:'obj调用'}
    let obj2={
    
    name:'obj2调用'}
    function A(a,b){
    
    
        console.log(this.name)
    }
    A.call(obj,1,2)  //obj调用
    A.apply(obj2,[1,2])  //obj2调用
</script>



12.引数

導入

  1. 関数を呼び出すとき、ブラウザは毎回2つの暗黙的なパラメータを渡します。1つは関数のコンテキストオブジェクトthisであり、もう1つは実際のパラメータをカプセル化するオブジェクト引数です。
  2. 引数は配列のようなオブジェクトであり、インデックスによってデータを操作し、長さを取得することもできます
  3. 関数を呼び出すときに、渡す引数は引数に保存されます
  4. arguments.lengthを使用して、格納されている引数の長さを取得できます
  5. 仮パラメータを定義しなくても、引数を介して引数を使用できますが、より面倒です。
    • arguments [0]：最初の引数を示します
    • arguments [1]：2番目の引数を示します
  6. 引数には次の属性があります：callee、この属性は、現在実行している関数オブジェクトである関数オブジェクトに対応します



13.ドム

ドキュメントオブジェクトによって呼び出されます

  1. getElementById（）：id属性を介して要素ノードオブジェクトを取得します
  2. getElementByTagName（）：タグ名で要素ノードオブジェクトのセットを取得します
  3. getElementsByName（）：name属性を介して要素ノードオブジェクトのセットを取得します

スタイル

  1. JSを使用して要素のスタイルを変更します：element.style.style name = style value

  2. CSSの命名では、-接続がある場合は、スタイル名をキャメルケースに変更し、大文字の後に-を削除してから-を削除する必要があります

  3. style属性で読み取って設定するスタイルはすべてインラインスタイルであるため、優先度が高いためすぐに表示されますが、スタイルに！importantと入力すると、現時点でスタイルの優先度が最も高くなります。 JSがスタイルを変更して失敗するようにします。

  4. 読み取りスタイル：element.style.stylename

  5. 要素が現在表示しているスタイルを読み取ります：element.currentStyle.stylename、ただしIEのみがそれをサポートします。

  6. 他のブラウザでは、** getComputedStyle（）**メソッドを使用して、要素の現在のスタイルを取得できます。このメソッドはウィンドウメソッドであり、直接使用できます。2つのパラメータが必要です。

    • 最初：スタイルを取得するための要素
    • 2番目：疑似要素を渡すことができます。通常はnullです。

    このメソッドは、現在の要素に対応するスタイルをカプセル化するオブジェクトを返します。取得したスタイルが設定されていない場合、デフォルト値ではなく実際の値を取得します。たとえば、widthが設定されていない場合、取得されません。自動。これは長さです。このメソッドはIE8以下のブラウザをサポートしていません。

  7. currentStyleおよびgetComputedStyle（）を介して取得されたスタイルは読み取り専用であり、変更できません。これらを変更する場合は、style属性を渡す必要があります。




14.イベントオブジェクトとバインディング

導入

  1. イベントの応答関数がトリガーされると、ブラウザは毎回応答関数への引数としてイベントオブジェクトイベントを渡します
  2. 現在のイベントに関連するすべての情報は、イベントオブジェクトにカプセル化されます。たとえば、マウスの座標、キーボードのどのボタンが押されたか、マウスホイールのスクロール方向などです。
  3. IE8では、応答関数がトリガーされたときに、ブラウザーはイベントを渡しません。IE8以下のブラウザーでは、イベントはウィンドウオブジェクトのプロパティとして保存されます。
  4. イベントのcancelBubblをtrueに設定すると、イベントのバブリングをキャンセルできます。
  5. イベントのターゲットは、イベントをトリガーしたオブジェクトを表します。

イベントの委任

  1. イベントの委任とは、要素の共通の祖先要素へのイベントの統一されたバインドを指します。これにより、子孫要素のイベントがトリガーされると、イベントは祖先要素にバブルアップし、イベントは応答を通じて処理されます。祖先要素の機能。
  2. イベントの委任はバブリングを利用します。これにより、イベントバインディングの数を減らし、委任を通じてプログラムのパフォーマンスを向上させることができます。

イベントバインディング

  1. addEventListener（）メソッドを使用して応答関数を要素にバインドし、複数の応答関数を要素の同じイベントに同時にバインドできるため、イベントがトリガーされると、応答関数は次のように実行されます。関数のバインド順序に。

  2. パラメータ：

    • イベントの文字列、オンにしないでください

    • イベントがトリガーされたときにコールバックされるコールバック関数

    • キャプチャフェーズでイベントをトリガーするかどうかに関係なく、ブール値が必要です。通常はfalseです。

      btn.addEventListener("click",function(){
        
        
    alert(1);
},false)；
btn.addEventListener("click",function(){
        
        
    alert(2);
},false)；
btn.addEventListener("click",function(){
        
        
    alert(3);
},false)

  3. IE8では、attachEvent（）メソッドを使用して、イベントやパラメーターをバインドすることもできます。

    • 時間文字列、オンになります
    • 折り返し電話

    また、イベントに対して複数のハンドラー関数を同時にバインドすることもできます。違いは、バインド後に最初に実行されることと、実行順序がaddEventListener（）とは逆、つまりポップアップ3.2.1であるということです。




15.良い

位置

  1. 場所を直接印刷すると、アドレスバーに情報が表示されます
  2. assign（）：場所を直接変更するのと同じように、他のページにジャンプするために使用されます
  3. reload（）：現在のページをリロードするために使用されます。更新ボタンと同じです。メソッドのパラメーターとしてtrueを渡すと、キャッシュにページの更新が強制されます。
  4. replace（）：現在のページを新しいページに置き換えることができます。呼び出し後にページがジャンプされ、履歴レコードは生成されません。

おすすめ

転載: blog.csdn.net/lyyrhf/article/details/115271152
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com