完整的 Javascript - 基礎到高級-js教程-PHP中文網

首頁

web前端

js教程

完整的 Javascript - 基礎到高級

Susan Sarandon

Dec 25, 2024 am 02:41 AM

Complete Javascript - Basic to Advanced

變數與資料型別：var、let、const。

原始型別：字串、數字、布林值、null、未定義、符號。

空與未定義（小鬼）：

a. null：明確分配給變數以指示它故意為空或沒有值。

類型：它是物件類型。（這是 JavaScript 中的一個歷史怪癖。）
用法：通常在您想要故意為變數或物件分配空值時使用，表示故意缺少某些內容。

b. 未定義：表示變數已被宣告但尚未賦值，或函數沒有傳回任何內容。
類型：它是它自己的類型，未定義。

用法：未初始化的變數或未傳遞的函數參數的預設值。它還表明函數沒有傳回任何內容。

引用型別：物件、陣列、函數。

控制結構：if、else、switch

迴圈：for、while、do-while、for...of、for...in

功能：
一個。函數宣告與表達式
b.箭頭函數
c.立即呼叫函數表達式 (IIFE)
d.高階函數（將其他函數作為參數或傳回它們的函數）
e.回呼函數
Promises ：這是一種處理非同步操作的方法。
一個。 Promise.all()
b. Promise.resolve()
c. Promise.then()
d. Promise.any()
e. Promise.race()
f. Promise.reject()
g.Promise.allSettled()

Async/await：讓您以更同步的方式編寫非同步程式碼。
回呼函數：回呼是作為參數傳遞給另一個函數並在該主函數完成後執行的函數。
閉包：JavaScript 中的閉包是一個可以存取其父作用域中的變數的函數，即使在父函數返回後也是如此。
範圍：
一個。全域範圍與局部範圍
b.函數作用域、區塊作用域（使用 let 和 const）
吊掛：
一個。變數提升
b.函數提升
事件循環與任務佇列（微任務與巨集任務）
執行上下文：執行上下文是程式碼執行的環境。
一個。全域執行上下文 (GEC)
b.函數執行上下文
作用域鍊與執行上下文：

作用域鍊是一個至關重要的概念，它決定了執行函數或程式碼區塊時如何在不同上下文中尋找變數
執行上下文是一個抽象概念，表示 JavaScript 程式碼評估和執行的環境。每次呼叫函數或執行程式碼區塊時，都會建立一個新的執行上下文。

記憶化：這是一種透過快取昂貴的函數呼叫的結果並在相同的輸入再次出現時重複使用這些結果來優化函數的技術。這有助於避免冗餘計算，從而提高使用相同參數重複呼叫函數的情況下的效能。
去抖動：限制呼叫函數的速率。有助於避免頻繁觸發的事件（例如按鍵或調整大小事件）的多個函數呼叫。
限制：確保在給定時間段內最多呼叫一次函數，無論事件觸發的頻率為何。
柯里化：原因：柯里化將採用多個參數的函數轉換為一系列每個採用一個參數的函數。這對於部分應用參數很有用。
使用地點：函數式編程，重複使用固定參數的函數。
setTimeout()、setInterval() 和clearTimeout() :
一個。 setTimeout() ：在指定的延遲（以毫秒為單位）後執行函數。
b. setInterval() ：以指定的時間間隔（以毫秒為單位）重複執行函數。
c. clearTimeout()：取消先前安排的 setTimeout() 操作。
模板文字：模板文字，也稱為模板字串，是 JavaScript 中的一項功能，可以更輕鬆地進行字串插值和多行字串。它們以反引號 (`) 表示，而不是單引號或雙引號。
本地儲存和會話儲存：

localStorage：以跨瀏覽器會話持久儲存資料而聞名，即使在瀏覽器關閉後仍然可用。

sessionStorage：以僅在單一瀏覽器會話期間儲存資料而聞名，並在選項卡或瀏覽器關閉時清除。

正規表示式 (RegExp)：正規表示式（RegEx 或 RegExp）是定義搜尋模式的字元序列。 RegEx 主要用於字串搜尋和操作，可讓您搜尋、匹配和取代文字中的模式。
this 關鍵字：this 關鍵字指的是函數執行的上下文。它是一個特殊的關鍵字，根據函數的呼叫方式，其行為會有所不同。
在全域執行上下文中（在任何函數之外），this 指的是全域物件（瀏覽器中的窗口，Node.js 中的全域）。
在常規函數中（非嚴格模式），this 指的是全域物件（瀏覽器中的視窗）。
當函數作為物件的方法被呼叫時，this 指的是呼叫該方法的物件。
JavaScript 中的 OOP：

JavaScript 中的類別

JavaScript 中的類別和物件

如何在 ES6 中建立 JavaScript 類別

此關鍵字 JavaScript

JavaScript 中的新關鍵字

JavaScript 中的物件建構子

JavaScript 中的繼承

JavaScript 中的封裝

JavaScript 中的靜態方法

JavaScript 中的 OOP

JavaScript 中的 Getter 和 Setter

操作員：
一個。算術運算子：, -, *, /, %
b.比較運算子：==、===、!=、!==、>、=、 c.邏輯運算子：&&、||、!
d.賦值運算子：=、=、-=、*=、/=
e.一元運算子：、--、typeof、delete
f.三元運算子（imp）：條件？ expr1 : expr2
中斷並繼續

break（退出循環）
繼續（跳到下次迭代）

參數與參數：

參數是在函數宣告（或函數簽名）中定義的變量，用於指定函數在呼叫時期望接收的值類型。
參數是呼叫函數時傳遞給函數的實際值。

解構：解構是 JavaScript 中的一種語法，可讓您將陣列中的值或物件中的屬性解壓縮為不同的變數。它簡化了從物件或陣列中提取多個屬性或元素的過程，使您的程式碼更乾淨、更具可讀性。

a.數組解構
b.對象解構

Rest 和 Spread 運算子：Rest 和 Spread 運算子在 JavaScript 中都用 ... 表示，但根據使用方式不同，它們的用途也不同。

Rest 運算子用於收集多個元素並將它們捆綁到單一陣列或物件中。它主要用於函數參數中收集參數，或用於解構中收集剩餘屬性。

Spread 運算子用於將陣列或物件的元素解包為單獨的元素或屬性。它允許您將可迭代物件（數組或物件）擴展或“擴展”為單個元素或屬性。

31.事件委託：使用父元素上的事件監聽器來處理子元素事件

高階函數：高階函數是一種接受一個或多個函數作為參數或傳回一個函數作為結果的函數。
匿名函數：匿名函數是沒有名稱的函數。這些函數通常是內聯定義的，可以指派給變數、作為參數傳遞或在需要函數的其他地方使用。

主要特徵：

無名稱：函數定義時沒有名稱。
經常使用內聯：通常用作回調函數或作為參數傳遞給高階函數。
可以指派給變數：可以像任何其他值一樣指派給變數或屬性。

詞法作用域：在運行時決定變數或函數的作用域的過程稱為詞法作用域。

詞法作用域如何運作：

定義函數時，它可以存取其作用域內的變數（即函數內部宣告的變數和外部函數的變量，包括全域作用域）。
如果一個函數嵌套在另一個函數中，則內部函數可以存取外部函數的變數（這稱為閉包）。

陣列方法：

push()、pop()、shift()、unshift()
concat()、slice()、splice()
map()、filter()、reduce()、forEach()
find(), findIndex()
排序()、反向()
連接()、分割()
indexOf()、includes()、lastIndexOf()

物件方法：

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

原型：

原型鏈：
使用原型繼承

課程

類別語法、建構子、方法
使用extends
進行繼承 super() 和 super() 建構子

call()、apply() 和 bind() ：用於控制 this
事件冒泡與捕獲：

事件冒泡是在元素上觸發事件時發生的，然後事件從目標元素「冒泡」到 DOM 樹中的祖先元素。在大多數情況下，事件預設會冒泡，除非您專門阻止它

事件捕捉與事件冒泡相反。該事件首先被根元素捕獲，然後向下滲透到目標元素。

生成器與迭代器：
原因：生成器允許惰性求值，這意味著它們按需生成值，而不是一次性生成所有值。對於大型資料集或無限序列很有用。
使用地點：實作自訂迭代器、序列的惰性求值。
WeakMap 和 WeakSet :
原因：有助於 JavaScript 中的記憶體管理。 WeakMap 和 WeakSet 允許在沒有更多引用時對鍵或值進行垃圾回收。
使用地點：管理對物件的引用而不阻止垃圾收集。例如，在您不想造成記憶體洩漏的地方快取 DOM 節點。
Polyfill :
原因：透過提供模仿現代功能的程式碼，增加對舊版瀏覽器中本機不可用的功能的支援。
使用地點：確保與舊版瀏覽器（例如舊版 Internet Explorer）相容，以實現 Promise、fetch 等新 JavaScript 功能。
原型繼承：
原因：JavaScript 使用原型進行繼承，而不是經典的物件導向繼承。了解原型鏈的工作原理是理解 JavaScript 繼承模型的關鍵。
使用地點：建構物件層次結構、新增方法至建構函式。
Cookie：在 JavaScript 中儲存和擷取 cookie
高階陣列方法

Array.prototype.find() ：找出陣列中符合條件的第一個元素
Array.prototype.filter()：依條件過濾元素
Array.prototype.reduce()：將陣列縮減為單一值
Array.prototype.map()：透過對每個元素應用函數來建立新陣列
Array.prototype.sort()：使用自訂排序函數對陣列進行排序

設計模式：

模組模式：將程式碼封裝到模組中
單例模式：確保一個類別只有一個實例
觀察者模式：當一個物件的狀態改變時通知多個物件。
工廠模式：提供一種實例化物件的方法，同時將建立邏輯與應用程式的其餘部分分開。
策略模式：允許您為特定操作定義策略（演算法）並在運行時變更它。
裝飾器模式：動態地為物件添加行為而不影響其結構。

延遲載入：延遲載入內容直到需要時。
使用 JSON :

JSON 基礎
JSON 語法，使用 JSON.parse() 進行解析，使用 JSON.stringify() 進行字串化
使用 API
使用 fetch() 從 API 取得資料
使用 Promises 或 Async/Await 處理 API 回應

DOM 操作：

DOM 選擇
document.getElementById()、document.querySelector()、document.querySelectorAll()
事件處理
事件監聽器：addEventListener()、removeEventListener()
event.target、event.preventDefault()、event.stopPropagation()
修改 DOM 元素
更改文字、HTML、屬性、樣式
動態新增/移除元素（createElement()、appendChild()、removeChild()）
DOM 遍歷
父節點、子節點、下一個兄弟節點、上一個兄弟節點

錯誤處理：

try...catch...finally：處理同步程式碼中的錯誤
自訂錯誤：建立自訂錯誤類別
Throwing Errors：手動拋出錯誤的 throw 關鍵字

字串方法：
charAt()、charCodeAt()、concat()、includes()、indexOf()、lastIndexOf()、slice()、split()、toLowerCase()、toUpperCase()、trim()、replace()、search( )、match()、repeat()、startsWith()、endsWith()、padStart()、padEnd()、localeCompare()、fromCharCode()。
日期方法：
Date.now()、Date.parse()、Date.UTC()、getDate()、getDay()、getFullYear()、getHours()、getMilliseconds()、getMinutes()、getMonth()、getSeconds()、 getTime()、getTimezoneOffset()、setDate()、setFullYear()、setHours()、setMilliseconds()、 setMinutes()、setMonth()、setSeconds()、setTime()、toDateString()、toISOString()、toStringDate()、toString )、toLocaleTimeString()、toString()。
生成器：JavaScript 中的生成器是一種特殊類型的函數，可讓您暫停和恢復其執行。
函數*、yield、next()、return()、throw()。
JavaScript 代理程式：JavaScript 中的代理程式是一種特殊的對象，它允許您攔截和自訂對物件的操作，例如屬性存取、賦值、函數呼叫等。它充當另一個物件的包裝器，並且可以重新定義該物件的基本操作（如 get、set、deleteProperty 等）。

常用陷阱（方法）：

get(target, prop, receive)：攔截屬性存取。
set(target, prop, value, receive): 攔截屬性賦值。
has(target, prop)：攔截 in 運算子。
deleteProperty(target, prop)：攔截屬性刪除。
apply(target, thisArg,argumentsList)：攔截函數呼叫。
Construction(target, args): 攔截 new 運算子。
DefineProperty（target，prop，descriptor）：攔截屬性定義。

Javascript 陣列和物件克隆：淺層還是深層？

物件或陣列的淺克隆會建立一個新實例，但它僅複製頂層屬性或元素。如果原始物件或陣列包含對其他物件（嵌套物件或陣列）的引用，則不會複製這些內部物件。相反，淺克隆將引用相同的物件。

深度克隆建立原始物件或陣列的完全獨立的副本。它遞歸地複製所有屬性或元素，包括嵌套物件或陣列。這表示深度克隆可確保原始物件和克隆物件之間不會共用對巢狀物件的參考。

鬆散相等 (==) 和嚴格相等 (===) :

鬆散相等在執行型別強制後比較兩個值的相等性。這意味著在進行比較之前，這些值會被轉換為通用類型（如果它們屬於不同類型）。
使用 == 時，JavaScript 會在比較運算元之前嘗試將它們轉換為相同型別。

嚴格相等比較兩個值而不執行任何型別轉換。它檢查操作數的值和類型。
對於 ===，操作數必須具有相同的類型和值才能被視為相等。

以值呼叫與按引用呼叫：

以值呼叫：當參數以值傳遞給函數時，會傳遞實際值的副本。對函數內部參數所做的任何更改都不會影響函數外部的原始變數。
何時發生：當原始類型（如數字、字串、布林值、null、未定義和符號）傳遞給函數時，就會發生這種情況。

按引用呼叫：當按引用傳遞參數時，實際物件的參考（或記憶體位址）將傳遞給函數。這意味著對函數內部參數所做的任何更改都將直接修改函數外部的原始物件。
何時發生：當非基本類型（如物件、陣列和函數）傳遞給函數時，就會發生這種情況。

JavaScript Set：JavaScript 中的 Set 是一個內建的集合對象，它允許您儲存任何類型的唯一值，無論是原始值還是物件參考。

集合的主要特徵：

唯一元素：集合會自動確保它包含的每個值都是唯一的。如果您嘗試新增重複值，它將被忽略。
有序：集合中的元素是有序的，這意味著值按照添加的順序儲存。但是，集合不允許重複條目。
可迭代：集合是可迭代的，因此您可以使用 for...of 或 .forEach() 等方法循環集合中的元素。
無索引：與陣列不同，Set 元素不透過索引存取。它們按插入順序存儲，但您不能透過編號引用它們。
集合的基本方法：

add(value)：在 Set 中加入一個值。如果該值已經存在，則不會執行任何操作（不重複）。
has(value)：檢查 Set 是否包含指定值。傳回 true 或 false。
delete(value)：從 Set 中刪除指定的值。
clear()：從 Set 中刪除所有元素。
size：傳回Set中元素的數量。
forEach(callback)：對 Set 中的每個值執行一次提供的函數。

JavaScript Map：JavaScript 中的 Map 是內建鍵值對的內建物件。與常規 JavaScript 物件不同，Map 允許使用任何資料類型（包括物件、函數以及字串和數字等基本類型）的鍵。地圖還維護其鍵的插入順序，這使得它們在順序很重要的場景中非常有用。

地圖的基本方法：

set(key, value)：在 Map 中新增或更新指定鍵和值的元素。
get(key)：檢索與指定鍵關聯的值。
has(key)：檢查 Map 是否包含鍵。
delete(key)：刪除與指定鍵關聯的元素。
clear()：從 Map 中刪除所有元素。
size：傳回Map中鍵值對的數量。
forEach(callback)：為 Map 中的每個鍵值對執行一次提供的函數。
keys()：傳回一個包含Map中所有鍵的迭代器物件。
value()：傳回一個包含Map中所有值的迭代器物件。
items()：傳回一個包含[key, value]對數組的迭代器物件。

Fetch API：Fetch API 允許我們從瀏覽器向 Web 伺服器發出非同步請求。每次發出請求時，它都會傳回一個承諾，然後進一步用於檢索請求的回應。
導入/匯出：

模組：在 JavaScript 中，模組是包含要重複使用的程式碼的檔案。您可以將程式碼拆分為單獨的文件，然後匯入所需的內容，而不是將所有內容放在一個文件中。這使程式碼保持乾淨、有組織且可維護。

導入：這是您將其他模組的功能引入當前文件的方式。
導出：這是使一個模組中的變數、函數、類別或物件可供其他模組使用的方式。

純函數、副作用、狀態突變與事件傳播：
遞迴：
遞歸是一個基本的程式設計概念，函數呼叫自身來解決問題。當問題可以分解為更小、相似的子問題時，通常會使用遞歸。在 JavaScript 中，遞歸對於遍歷樹、解決謎題等任務很有用。

關鍵概念：

基本情況：停止遞歸的條件。如果沒有基本情況，遞歸可能會導致無限函數調用，從而導致堆疊溢位錯誤。
遞歸情況：遞歸的一部分，函數透過更小或更簡單的問題版本呼叫自身。

apply、call、bind 方法：
視窗方法：
Alert()、confirm()、prompt()、setTimeout()、setInterval()、clearTimeout()、clearInterval()、open()、close()、requestAnimationFrame()。
老鼠事件：
點選、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、上下文選單。
鍵盤事件：
按鍵、按鍵、按鍵。
表單事件：
提交、更改、對焦、模糊、輸入、重設、選擇、按鍵、按鍵、按鍵。
調試：
跨來源資源共享（CORS）：
Web Workers：一種在後台執行緒中執行腳本的機制，允許 JavaScript 執行計算量大的任務而不阻塞主執行緒。
Service Workers：在瀏覽器背景執行的腳本，支援推播通知、後台同步和離線功能快取等功能。
延遲載入或無限滾動）：