天天看點

入門級别的 JS 基本概念詳細介紹

對于初學者來說,Javascript 乍一看似乎很容易,因為它的類似于 C 的文法

但不管它的運作方式如何,對語言 (ESNext) 及其架構所做的不斷變化可能會讓初學者不知所措。

學習回報豐厚,因為 JS 幾乎可以輕松完成你想做的任何事情。

想要建構一個 Web 應用程式? 沒問題。

想要建構 CLI 工具? 沒問題。

想要建構桌面應用程式? 做起來比說的更容易

每天提供的越來越多的包和庫表明 JS 在建構軟體應用程式時是多麼抽象。

然而,JS 似乎受到了很多人的讨厭,主要是因為與競争對手相比它過于傳統。任何可能錯過 JS 理論方面的人都會感到困惑。

許多人在深入研究 Javascript 之前忽略了 Javascript 的理論方面。這些概念幫助我們了解建構 Javascript 應用程式時所采用的不同路徑和模式。這些模式存在于 JS Land 的每個架構中,是以在學習語言本身之前了解這些概念很有意義。

JS的特點

(1) 多範式

Javascript 支援過程式、面向對象和事件驅動的函數式程式設計!掌握 JS 的面向對象程式設計風格是非常有益的。

面向對象程式設計可幫助程式員更輕松地可視化軟體應用程式的元件。此外,學習 Typescript(Javascript with Types)可以讓程式員輕松實作行業中最好的設計模式。這些設計模式用于以最有效的方式解決軟體程式設計中遇到的最常見問題。

這種多功能性使 Javascript 非常平易近人且非常強大。

(2) 解釋

Javascript 與 C/C++ 不同,它不是一次讀取程式,而是逐行解釋。這就是說 JS 會比 C/C++ 等編譯語言慢。

警告: Javascript 因在運作時是一種極其被動的語言而臭名昭著,對錯誤進行故障排除非常困難。

不過随着時間和練習,你将學會如何流暢地運作。最常見的錯誤涉及你的變量傳回NULL值。當此類問題确實出現時,請前往 Stack Overflow,因為我向你保證,無論錯誤多麼離譜,你都不是第一個遇到錯誤的人。在你的項目進行開發時自由地使用console.log()也是一個好辦法。這可以幫助您準确找出程式生命周期中的時刻,您的變量可能已經脫落。

(3) 單線程

Javascript 一次隻能執行一項任務。它根據類型将不同的任務排隊到不同的隊列中。

在最抽象的意義上,Javascript 基本上會将同步任務和異步任務分組,并将它們分開排隊。

同步任務是在遇到它們時立即處理的語句,即它們立即運作。這些任務包括日志語句、變量聲明、條件檢查等。

異步任務涉及可能需要可變時間來傳回輸出的任務。異步任務的一個示例可能是從 Web API 請求資訊。

此外,Javascript 還有一個 Job Queue,用于處理名為 Promises 的 JS Feature。

通過右鍵單擊此網頁并點選檢查頁籤,您實際上可以看到 Javascript 的單線程特性。接下來,轉到剛剛打開的視窗上的控制台頁籤。輸入以下代碼并按Enter鍵。\

while(true) {}

您現在可以觀察到此頁面完全沒有響應。這是因為此頁面上的 Javascript 現在正忙于運作我們上面執行的無限 while 循環。

(4) 非阻塞

我們之前已經讨論過異步任務。由于 JS 在單線程環境中運作,預設情況下,它不會進行等待!

異步代碼塊隻有在所有同步代碼塊都執行完後才會執行,而不管代碼在程式中的位置如何。

console.log("我是第一個語句")
setTimeout(()=> {
console.log("我是第二個語句")
},1000)
console.log("我是第三個語句")      

這裡console.log()将其中的語句記錄到控制台,setTimeout()函數在一秒鐘後運作第二條語句。

在檢查輸出時

我是第一個語句

我是第三個語句

我是第二個語句

我們可以看到第三條語句在第二條語句之前記錄。這是因為 JS 處理同步和異步代碼塊的固有方法。

(5) 進階

JavaScript 是一種進階語言。進階語言可能隻是意味着它們更接近人類所說的語言。進階語言能夠提供更多功能來幫助程式員更好地表達他們正在嘗試建構的内容。

Javascript 的這種進階特性有助于它最好地服務于 Web 的用戶端部分。過去 JS 的一個主要限制是它隻能在用戶端提供服務,而不能像大多數伺服器端語言那樣進行檔案操作。

然而,這已經改變了NodeJS,允許開發人員使用 Javascript 來建構後端伺服器。是以,隻需使用一種語言,軟體開發人員就可以在伺服器端和用戶端進行操作。這導緻全棧工程師變得突出。

(6) 動态類型

Javascript 也是一種動态類型語言。這意味着與需要為變量指定資料類型的 C 不同,我們可以type-inference在 Javascript 中使用來自動檢測資料的類型,變量儲存。\

// 在 C 中變量必須有資料類型。 為了将資料類型從一種類型更改為另一種類型,我們需要使用類型轉換
int a = 5;
char b = "a";
float c = 7.036;      

在 Javascript 中,我們使用let和const分别聲明變量或常量。\

let a = 5
console.log(a) // 5
a = 'Hello World'
console.log(a) // Hello World
const b = 'JS 很酷' 
console.log(b) // JS 很酷
b = '我改變主意了'
console.log(b) // Error: const cannot be changed      

雖然類型推斷因其易于使用而看起來是一個加分點,但它立即成為需要類型安全作為功能的大型項目的一個騙局。

出于這個原因,較大的項目使用 TypeScript,它隻是 Javascript 的包裝器,提供類型、接口和各種其他功能。

學習政策

在 JS Land 中安頓下來需要一段時間,但我有一個簡單的清單,Minimum Requirements用于學習 Express 或 ReactJS 等架構。

首先,不要急于學習這些架構。你需要花點時間掌握 Vanilla Javascript。

基礎知識

變量和常量

條件塊(if-else)

循環(for、while、forEach)

開關盒(Switch Case)

方法(Functions)

這些是你必不可少的程式設計基礎。

進階部分(最低要求)

異步/等待

Promises

Javascript 中的類

Rest/Spread 文法

數組/對象疊代器

數組解構

子產品(導入、導出)

在建構項目時繼續學習,很快你就會對語言有很強的掌握。

繼續閱讀