完全な Javascript - 基本から上級まで

変数とデータ型 : var、let、const.

プリミティブ型: 文字列、数値、ブール値、null、未定義、シンボル。

Null と未定義 (imp):

a. null: 変数が意図的に空であるか、値がないことを示すために変数に明示的に割り当てられます。

• タイプ: オブジェクト型です。 (これは JavaScript の歴史的な癖です。)
• 使用法: 通常、変数またはオブジェクトに意図的に空の値を割り当て、何かが意図的に欠落していることを示したい場合に使用されます。

b. 未定義: 変数は宣言されているが値が割り当てられていない、または関数が何も返さないことを意味します。
タイプ: 独自のタイプであり、未定義です。

• 使用法: これは、初期化されていない変数または渡されない関数引数のデフォルト値です。また、関数が何も返さなかったことも示します。

参照型: オブジェクト、配列、関数。

制御構造: if、else、switch

ループ: for、while、do-while、for…of、for…in

関数:
ａ．関数宣言と式
b.アロー関数
c.即時に呼び出される関数式 (IIFE)
d.高階関数 (他の関数を引数として受け取るか、それを返す関数)
e.コールバック関数
Promise : 非同期操作を処理する方法です。
ａ． Promise.all()
b. Promise.resolve()
c. Promise.then()
d. Promise.any()
e. Promise.race()
f. Promise.reject()
g.Promise.allSettled()

1. Async/await : より同期的に見える方法で非同期コードを作成できます。

2. コールバック関数: コールバックは、別の関数に引数として渡され、そのメイン関数の完了後に実行される関数です。

3. クロージャー: JavaScript のクロージャーは、親関数が戻った後でも、親スコープ内の変数にアクセスできる関数です。

4. 範囲:
   ａ．グローバル スコープとローカル スコープ
   b.関数スコープ、ブロックスコープ (let と const を含む)

5. 吊り上げ:
   ａ．変数の巻き上げ
   b.関数ホイスティング

6. イベントループとタスクキュー (マイクロタスクとマクロタスク)

7. 実行コンテキスト: 実行コンテキストは、コードが実行される環境です。
   ａ．グローバル実行コンテキスト (GEC)
   b.関数実行コンテキスト

8. スコープチェーンと実行コンテキスト:

スコープ チェーンは、関数またはコード ブロックが実行されるときに、さまざまなコンテキストで変数がどのように検索されるかを決定する重要な概念です
実行コンテキストは、JavaScript コードが評価および実行される環境を表す抽象的な概念です。関数が呼び出されるたび、またはコードのブロックが実行されるたびに、新しい実行コンテキストが作成されます。

1. メモ化: コストのかかる関数呼び出しの結果をキャッシュし、同じ入力が再度発生したときにそれらの結果を再利用することで関数を最適化するために使用される手法です。これにより、冗長な計算が回避され、関数が同じ引数で繰り返し呼び出されるシナリオでのパフォーマンスが向上します。

2. デバウンス : 関数が呼び出される速度を制限します。キーストロークやサイズ変更イベントなど、頻繁にトリガーされるイベントに対する複数の関数呼び出しを回避できます。

3. スロットリング: イベントがトリガーされる頻度に関係なく、関数が指定された期間内に最大 1 回呼び出されることを保証します。

4. カリー化: 理由: カリー化は、複数の引数を取る関数を、それぞれが 1 つの引数を取る一連の関数に変換します。これは、引数を部分的に適用する場合に便利です。
   使用場所: 関数型プログラミング、固定引数を持つ関数の再利用。

5. setTimeout()、setInterval()、clearTimeout() :
   ａ． setTimeout() : 指定された遅延 (ミリ秒単位) の後に関数を実行します。
   b. setInterval() : 指定した間隔(ミリ秒単位)で関数を繰り返し実行します。
   c. clearTimeout(): 以前にスケジュールされた setTimeout() 操作をキャンセルします。

6. テンプレート リテラル: テンプレート文字列とも呼ばれるテンプレート リテラルは、文字列の補間や複数行の文字列を容易にする JavaScript の機能です。これらは、一重引用符または二重引用符の代わりにバッククォート (`) で示されます。

7. ローカルストレージとセッションストレージ:

localStorage: ブラウザ セッション間でデータを永続的に保存することで知られており、ブラウザを閉じた後でも利用可能なままです。

sessionStorage: 単一のブラウザ セッションの間のみデータを保存し、タブまたはブラウザを閉じるとクリアされることで知られています。

1. 正規表現 (RegExp): 正規表現 (RegEx または RegExp) は、検索パターンを定義する文字のシーケンスです。 RegEx は主に文字列の検索と操作に使用され、テキスト内のパターンの検索、一致、置換を可能にします。

2. this Keyword : このキーワードは、関数が実行されるコンテキストを指します。関数の呼び出し方法に応じて動作が異なる特別なキーワードです。

3. グローバル実行コンテキスト (関数の外部) では、これはグローバル オブジェクト (ブラウザーのウィンドウ、Node.js のグローバル) を指します。

4. 通常の関数 (厳密モードではない) では、これはグローバル オブジェクト (ブラウザーのウィンドウ) を参照します。

5. 関数がオブジェクトのメソッドとして呼び出される場合、これはメソッドが呼び出されるオブジェクトを参照します。

6. JavaScript の OOP:

JavaScript のクラス

JavaScript のクラスとオブジェクト

ES6 で JavaScript クラスを作成する方法

このキーワード JavaScript

JavaScript の新しいキーワード

JavaScript のオブジェクト コンストラクター

JavaScript の継承

JavaScript でのカプセル化

JavaScript の静的メソッド

JavaScript の OOP

JavaScript のゲッターとセッター

1. オペレーター:
   ａ．算術演算子: 、-、*、/、%
   b.比較演算子: ==、===、!=、!==、>、<、>=、<=
   c.論理演算子: &&、||、!
   d.代入演算子: =、=、-=、*=、/=
   e.単項演算子: 、 --、typeof、delete
   f.三項演算子 (imp) : 条件 ? expr1 : expr2

2. 中断して続行

ブレーク (ループを終了)
続行 (次の反復にスキップ)

1. パラメータと引数:

パラメータは、関数宣言 (または関数シグネチャ) で定義された変数で、関数が呼び出されたときに受け取ることが期待される値の種類を指定します。
引数は、関数が呼び出されたときに関数に渡される実際の値です。

1. Destructuring : Destructuring は、配列の値やオブジェクトのプロパティを個別の変数に解凍できる JavaScript の構文です。これにより、オブジェクトまたは配列から複数のプロパティまたは要素を抽出するプロセスが簡素化され、コードがよりクリーンで読みやすくなります。

a.配列の構造化
b.オブジェクトの分割

1. Rest 演算子と Spread 演算子 : Rest 演算子と Spread 演算子はどちらも JavaScript では ... で表されますが、使用方法に応じて異なる目的を果たします。

Rest 演算子は、複数の要素を収集し、それらを 1 つの配列またはオブジェクトにバンドルするために使用されます。これは主に、引数を収集するための関数パラメータ、または残りのプロパティを収集するための構造化で使用されます。

Spread 演算子は、配列またはオブジェクトの要素を個別の要素またはプロパティに解凍するために使用されます。これにより、反復可能 (配列またはオブジェクト) を個々の要素またはプロパティに拡張または「拡散」できます。

31.イベント委任: 親要素のイベント リスナーを使用して子要素のイベントを処理します

1. 高階関数: 高階関数は、1 つ以上の関数を引数として受け取るか、その結果として関数を返す関数です。

2. 匿名関数: 匿名関数は、名前を持たない関数です。これらの関数は通常インラインで定義され、変数に割り当てたり、引数として渡したり、関数が必要な他の場所で使用したりできます。

主な特徴:

名前なし: 関数は名前なしで定義されています。
インラインでよく使用される: 一般的にコールバック関数として使用されるか、高階関数への引数として渡されます。
変数に割り当て可能: 他の値と同様に、変数またはプロパティに割り当てることができます。

1. 字句スコープ: 実行時に変数または関数のスコープを決定するプロセスは、字句スコープと呼ばれます。

字句スコープの仕組み:

関数を定義すると、そのスコープ内の変数 (つまり、関数内で宣言された変数と、グローバル スコープを含む外部関数の変数) にアクセスできます。
関数が別の関数内にネストされている場合、内側の関数は外側の関数から変数にアクセスできます (これをクロージャと呼びます)。

1. 配列メソッド:

push()、pop()、shift()、unshift()
concat()、slice()、splice()
map()、filter()、reduce()、forEach()
find()、findIndex()
ソート()、リバース()
join()、split()
IndexOf()、includes()、lastIndexOf()

1. オブジェクトメソッド:

Object.assign()、Object.create()、Object.keys()、Object.values()、Object.entries()、Object.hasOwn()、Object.freeze()、Object.seal()

1. プロトタイプ:

プロトタイプチェーン:
プロトタイプを使用した継承

1. クラス

クラス構文、コンストラクター、メソッド
extends
を使用した継承 super() および super() コンストラクター

1. call()、apply()、bind() : この

のコンテキストを制御します。

2. イベントのバブリングとキャプチャ:

イベント バブリングは、要素上でイベントがトリガーされると発生し、DOM ツリー内のターゲット要素からその祖先要素までイベントが「バブルアップ」します。ほとんどの場合、特に禁止しない限り、イベントはデフォルトでバブルアップします

イベント キャプチャはイベント バブリングの逆です。イベントは最初にルート要素によってキャプチャされ、次にターゲット要素にトリクルダウンします。

1. ジェネレータとイテレータ:
   理由: ジェネレーターでは遅延評価が可能です。つまり、一度にすべての値を生成するのではなく、オンデマンドで値を生成します。大規模なデータセットまたは無限シーケンスに役立ちます。
   使用場所: カスタム反復子の実装、シーケンスの遅延評価。

2. WeakMap と WeakSet :
   理由: JavaScript でのメモリ管理に役立ちます。 WeakMap と WeakSet を使用すると、キーまたは値への参照がなくなったときに、それらのガベージ コレクションが可能になります。
   使用場所: ガベージ コレクションを妨げずにオブジェクトへの参照を管理します。たとえば、メモリ リークを起こしたくない DOM ノードをキャッシュします。

3. ポリフィル:
   理由: 最新の機能を模倣するコードを提供することで、古いブラウザーではネイティブに利用できない機能のサポートを追加します。
   使用場所: Promise、fetch などの新しい JavaScript 機能について、古いブラウザ (古いバージョンの Internet Explorer など) との互換性を確保します。

4. プロトタイプの継承:
   理由: JavaScript は、古典的なオブジェクト指向の継承ではなく、継承にプロトタイプを使用します。プロトタイプ チェーンがどのように機能するかを理解することは、JavaScript の継承モデルを理解するための鍵となります。
   使用場所: オブジェクト階層の構築、コンストラクターへのメソッドの追加。

5. Cookie : JavaScript での Cookie の保存と取得

6. 高度な配列メソッド

Array.prototype.find() : 条件に一致する配列内の最初の要素を検索します
Array.prototype.filter(): 条件に基づいて要素をフィルタリングします
Array.prototype.reduce(): 配列を単一の値に縮小します
Array.prototype.map(): 各要素に関数を適用して新しい配列を作成します
Array.prototype.sort(): カスタム並べ替え関数を使用した配列の並べ替え

1. デザインパターン:

モジュール パターン: コードをモジュールにカプセル化する
シングルトン パターン: クラスのインスタンスが 1 つだけであることを確認
オブザーバー パターン: 1 つのオブジェクトの状態が変化したときに複数のオブジェクトに通知します。
ファクトリ パターン: 作成ロジックをアプリケーションの残りの部分から分離したまま、オブジェクトをインスタンス化する方法を提供します。
戦略パターン : 特定の操作の戦略 (アルゴリズム) を定義し、実行時に変更できます。
デコレーター パターン: オブジェクトの構造に影響を与えることなく、オブジェクトに動作を動的に追加します。

1. 遅延読み込み : 必要になるまでコンテンツの読み込みを遅らせます。

2. JSON の操作:

JSON の基本
JSON 構文、JSON.parse() で解析、JSON.stringify()
で文字列化 API の使用
fetch()
を使用して API からデータを取得する Promise または Async/Await による API 応答の処理

1. DOM 操作:

DOM の選択
document.getElementById()、document.querySelector()、document.querySelectorAll()
イベント処理
イベントリスナー: addEventListener()、removeEventListener()
event.target、event.preventDefault()、event.stopPropagation()
DOM 要素の変更
テキスト、HTML、属性、スタイルの変更
動的要素の追加/削除 (createElement()、appendChild()、removeChild())
DOM トラバーサル
親ノード、子ノード、次の兄弟、前の兄弟

1. エラー処理:

try...catch...finally: 同期コードでのエラーの処理
カスタム エラー: カスタム エラー クラスの作成
エラーのスロー: 手動でエラーをスローするための throw キーワード

1. 文字列メソッド:
   charAt()、charCodeAt()、concat()、includes()、indexOf()、lastIndexOf()、slice()、split()、toLowerCase()、toUpperCase()、trim()、replace()、search( )、match()、repeat()、startsWith()、endsWith()、padStart()、padEnd()、localeCompare()、 fromCharCode().

2. 日付メソッド:
   Date.now()、Date.parse()、Date.UTC()、getDate()、getDay()、getFull Year()、getHours()、getMilliseconds()、getMinutes()、getMonth()、getSeconds()、 getTime()、getTimezoneOffset()、setDate()、setFullyear()、setHours()、setMilliseconds()、 setMinutes()、setMonth()、setSeconds()、setTime()、toDateString()、toISOString()、toLocaleDateString()、toLocaleTimeString()、toString().

3. ジェネレーター: JavaScript のジェネレーターは、実行を一時停止したり再開したりできる特殊なタイプの関数です。
   function*、yield、next()、return()、throw().

4. JavaScript プロキシ : JavaScript のプロキシは、プロパティ アクセス、割り当て、関数呼び出しなど、オブジェクトに対する操作をインターセプトしてカスタマイズできる特別なオブジェクトです。これは別のオブジェクトのラッパーとして機能し、そのオブジェクトに対する基本的な操作 (get、set、deleteProperty など) を再定義できます。

一般的に使用されるトラップ (メソッド):

get(target, prop, recruit): プロパティへのアクセスをインターセプトします。
set(target, prop, value, レシーバー): プロパティの割り当てをインターセプトします。
has(target, prop): in 演算子をインターセプトします。
deleteProperty(target, prop): プロパティの削除をインターセプトします。
apply(target, thisArg, argumentList): 関数呼び出しをインターセプトします。
construct(target, args): 新しい演算子をインターセプトします。
defineProperty(target, prop, descriptor): プロパティ定義をインターセプトします。

1. JavaScript 配列とオブジェクトのクローン作成: 浅いのか深いのか?

オブジェクトまたは配列の浅いクローンは新しいインスタンスを作成しますが、それはトップレベルのプロパティまたは要素をコピーするだけです。元のオブジェクトまたは配列に他のオブジェクト (ネストされたオブジェクトまたは配列) への参照が含まれている場合、これらの内部オブジェクトはコピーされません。代わりに、浅いクローンは同じオブジェクトを参照します。

ディープ クローンは、元のオブジェクトまたは配列の完全に独立したコピーを作成します。ネストされたオブジェクトや配列を含む、すべてのプロパティまたは要素を再帰的にコピーします。これは、ディープ クローン作成では、元のオブジェクトとクローンの間でネストされたオブジェクトへの参照が共有されないことを意味します。

1. 緩やかな等価性 (==) と厳密な等価性 (===) :

緩やかな等価性は、型強制を実行した後に 2 つの値が等しいかどうかを比較します。これは、値が比較を行う前に (型が異なる場合) 共通の型に変換されることを意味します。
== を使用すると、JavaScript はオペランドを比較する前に同じ型に変換しようとします。

厳密な等価性は、型変換を実行せずに 2 つの値を比較します。オペランドの値と型の両方をチェックします。
=== の場合、等しいとみなされるには、オペランドの型と値が同じである必要があります。

1. 値による呼び出しと参照による呼び出し:

値による呼び出し: 引数が値によって関数に渡される場合、実際の値のコピーが渡されます。関数内で引数を変更しても、関数外の元の変数には影響しません。
発生時期: これは、プリミティブ型 (数値、文字列、ブール値、null、未定義、シンボルなど) が関数に渡されたときに発生します。

参照による呼び出し: 引数が参照によって渡される場合、実際のオブジェクトの参照 (またはメモリ アドレス) が関数に渡されます。これは、関数内の引数に加えられた変更は、関数の外側の元のオブジェクトを直接変更することを意味します。
発生時期: これは、非プリミティブ型 (オブジェクト、配列、関数など) が関数に渡されたときに発生します。

1. JavaScript Set : JavaScript の Set は、プリミティブ参照かオブジェクト参照かに関係なく、任意の型の一意の値を保存できる組み込みのコレクション オブジェクトです。

セットの主な特徴:

一意の要素: セットは、含まれる各値が一意であることを自動的に保証します。重複する値を追加しようとすると、無視されます。
順序付け: セット内の要素は順序付けされています。つまり、値は追加された順序で保存されます。ただし、セットでは重複したエントリは許可されません。
Iterable: セットは反復可能であるため、for...of または .forEach().
のようなメソッドを使用して Set 内の要素をループできます。 インデックスなし: 配列とは異なり、Set 要素はインデックスによってアクセスされません。これらは広告掲載オーダーごとに保存されますが、番号で参照することはできません。
セットの基本メソッド:

add(value): セットに値を追加します。値がすでに存在する場合は、何も行われません (重複はありません)。
has(value): Set に指定された値が含まれているかどうかを確認します。 true または false を返します。
delete(value): 指定された値を Set から削除します。
clear(): Set からすべての要素を削除します。
size: Set 内の要素の数を返します。
forEach(callback): Set 内の値ごとに、提供された関数を 1 回実行します。

1. JavaScript マップ: JavaScript のマップは、キーと値のペアを格納する組み込みオブジェクトです。通常の JavaScript オブジェクトとは異なり、マップではあらゆるデータ型 (オブジェクト、関数、文字列や数値などのプリミティブ型を含む) のキーを使用できます。 マップはキーの挿入順序も維持するため、順序が重要なシナリオで役立ちます。

マップの基本メソッド:

set(key, value): 指定されたキーと値を持つ要素をマップに追加または更新します。
get(key): 指定されたキーに関連付けられた値を取得します。
has(key): マップにキーが含まれているかどうかを確認します。
delete(key): 指定されたキーに関連付けられた要素を削除します。
clear(): マップからすべての要素を削除します。
size: マップ内のキーと値のペアの数を返します。
forEach(callback): マップ内のキーと値のペアごとに、提供された関数を 1 回実行します。
key(): Map 内のすべてのキーを含む反復子オブジェクトを返します。
value(): Map 内のすべての値を含む反復子オブジェクトを返します。
events(): [キー、値] ペアの配列を含むイテレータ オブジェクトを返します。

1. Fetch API : Fetch API を使用すると、ブラウザから Web サーバーに非同期リクエストを行うことができます。リクエストが行われるたびに Promise を返します。その後、この Promise はリクエストの応答を取得するためにさらに使用されます。

2. インポート/エクスポート:

モジュール: JavaScript では、モジュールは再利用するコードを含むファイルです。すべてを 1 つのファイルに含める代わりに、コードを別々のファイルに分割して、必要なものをインポートできます。これにより、コードがクリーンで整理され、保守しやすくなります。

インポート: これは、他のモジュールから現在のファイルに機能を取り込む方法です。
エクスポート: これは、あるモジュールの変数、関数、クラス、またはオブジェクトを他のモジュールで使用できるようにする方法です。

1. 純粋な関数、副作用、状態の突然変異、およびイベントの伝播:

2. 再帰:
   再帰は、問題を解決するために関数がそれ自体を呼び出す基本的なプログラミング概念です。再帰は、問題をより小さな同様のサブ問題に分解できる場合によく使用されます。 JavaScript では、再帰はツリーの横断やパズルの解決などのタスクに役立ちます。

主要な概念:

基本ケース: 再帰を停止する条件。基本ケースがないと、再帰によって無限の関数呼び出しが発生し、スタック オーバーフロー エラーが発生する可能性があります。
再帰ケース: 関数が問題のより小さいまたは単純なバージョンでそれ自体を呼び出す再帰の部分。

1. apply、call、bind メソッド:

2. ウィンドウメソッド:
   alert()、confirm()、prompt()、setTimeout()、setInterval()、clearTimeout()、clearInterval()、open()、close()、requestAnimationFrame().

3. マウスイベント:
   click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、contextmenu。

4. キーボードイベント:
   キーダウン、キープレス、キーアップ。

5. フォームイベント:
   送信、変更、フォーカス、ぼかし、入力、リセット、選択、キー押下、キーダウン、キーアップ。

6. デバッグ:

7. クロスオリジンリソース共有 (CORS):

8. Web ワーカー: バックグラウンド スレッドでスクリプトを実行するメカニズム。JavaScript がメイン スレッドをブロックすることなく、計算量の多いタスクを実行できるようにします。

9. Service Worker: ブラウザのバックグラウンドで実行されるスクリプト。プッシュ通知、バックグラウンド同期、オフライン機能のキャッシュなどの機能を有効にします。

10. 遅延読み込みまたは無限スクロール) :

遅延読み込みと無限スクロールは、特に大量のデータやメディア (画像、リスト、記事など) を扱う場合に、Web アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させるために一般的に使用される 2 つの手法です。

遅延読み込みは、リソース (画像、スクリプト、ビデオ、コンテンツなど) が必要な場合にのみ読み込まれる Web 開発のデザイン パターンです。
遅延読み込みの主な目的は、最初に読み込まれるリソースの数を減らすことで、Web ページの初期読み込み時間を短縮することです。

無限スクロールは、ユーザーがページを下にスクロールすると、通常はページネーションを必要とせずに、より多くのコンテンツを自動的に読み込む手法です。これは、ソーシャル メディア プラットフォーム、ニュース サイト、および大規模なデータセットを表示する必要がある Web アプリケーション (Instagram、Twitter、Facebook など) で広く使用されています。

76: プログレッシブ Web アプリ (PWA): オフラインで動作し、プッシュ通知を提供し、ネイティブのようなパフォーマンスを持つ Web アプリケーションを構築します (サービス ワーカーや他のブラウザ API を通じて)。

1. サーバー送信イベント: サーバー送信イベント (SSE) は、単一の HTTP 接続を介してサーバーからクライアントへのリアルタイム更新を可能にするシンプルで効率的なテクノロジーです。

78.厳密モード: 厳密モードは、エラーや問題のある機能を確実に回避する JavaScript の機能です。

1. セキュリティ: (JavaScript の概念ではありませんが、知っておくことが重要です)

クロスサイト スクリプティング (XSS)
クロスサイト リクエスト フォージェリ (CSRF)
コンテンツ セキュリティ ポリシー (CSP)
CORS (クロスオリジンリソース共有)
JWT (JSON ウェブトークン)

1. Temporal Dead Zone (TDZ) : 変数の作成と実行コンテキストでの初期化の間の時間を指す用語です。この間、変数は存在しますがアクセスできません。アクセスしようとすると ReferenceError が発生します。

TDZ は、let と const を使用して宣言された変数に対して発生しますが、var 宣言はホイストされ、未定義で初期化されるため、var に対しては発生しません。

以上です。

JavaScript やその他のプログラミング言語を学ぶことは、最初は圧倒されるように感じるかもしれません。最初はトピックが理解できなくても、まったく問題ありません。一夜にして専門家になる人はいません。鍵となるのは、一貫性、実践、粘り強さです。

すべての開発者は基本から始めたことを忘れないでください。特に初心者の場合は、時間をかけて各トピックを徹底的に理解してください。プロセスを急がず、習得すべき概念の多さに落胆しないでください。練習を続けると、徐々に物事がうまくいき始めます。

辛抱強く、好奇心を持ち続け、そして最も重要なのは、コーディングを続けることです!

私のブログを読んでいただきありがとうございます!参考になりましたら幸いです。重要なトピックや概念を見逃していた場合は、心からお詫び申し上げます。ご質問やご提案がございましたら、お気軽にコメントを残すか、ご連絡ください。フィードバックはいつでも大歓迎です!

これが役に立ったと思ったら、拍手することを忘れないでください! ?

以上が完全な Javascript - 基本から上級までの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。