JavaScript 的核心功能

---

在本教程中，我們將瞭解 Javascript 的特殊功能。

Javascript 是一種流行的程式語言。Javascript 功能靈活。許多開源庫可用。GitHub 包含全球開發者的大量 Javascript 程式碼。Javascript 在前端和後端都表現出色。

Javascript 具有簡單的語法。無需任何設定，任何人都可以執行 Javascript 程式並使其對使用者友好。具備HTML、CSS 和編碼基礎知識的個人就可以使用 Javascript。

Javascript 的功能

指令碼編寫

Javascript 在瀏覽器中執行客戶端指令碼。

直譯器

瀏覽器解釋 JavaScript 程式碼。

事件處理

事件是動作。Javascript 提供事件處理選項。

輕量級

由於 Javascript 不是編譯型語言，因此原始碼在執行前不會轉換為位元組碼。由於其輕量級特性，低端裝置也可以執行 Javascript。

區分大小寫

在 Javascript 中，名稱、變數、關鍵字和函式都區分大小寫。

控制語句

Javascript 具有控制語句，例如 if-else-if、switch case 和 迴圈。使用者可以使用這些控制語句編寫複雜的程式碼。

物件作為一等公民

Javascript 陣列、函式 和符號是物件，可以繼承 Object 原型屬性。物件作為一等公民意味著物件可以執行所有任務。

支援函數語言程式設計

Javascript 函式可以作為另一個函式的引數，可以按引用呼叫，並且可以賦值給變數。

動態型別

Javascript 變數可以具有任何值型別。同一個變數可以具有字串值、整數值或其他任何值。

客戶端驗證

Javascript 客戶端驗證允許使用者在表單提交期間向伺服器提交有效資料。

平臺無關性

Javascript 將在所有具有任何作業系統的系統中以相同的方式執行。

非同步處理

Javascript 的 async-await 和 promise 功能提供了非同步特性。由於程序並行執行，因此提高了處理速度和響應能力。

基於原型

Javascript 使用 'Object.prototype' 函式而不是類繼承。

空值合併運算子 (??)

如果左側運算元為 null，則空值合併運算子返回右側運算元。如果左側運算元不是 'null'，則運算子返回左側運算元的值。此運算子有助於避免布林運算子錯誤。

邏輯空賦值 (??=)

這是…的簡寫

result=left??right;

樣式化控制檯日誌

Javascript 控制檯可以具有樣式。例如，請參見下面的程式碼塊。

console.log('%cText %cValue', 'color:black; cursor:pointer', 'color: green;');

第一組樣式應用於帶有 %c 的第一個字串，第二個 %c 獲取第二個字串的第二組樣式。

物件簡寫

物件簡寫可以透過允許使用者使用相同的名稱來分配變數和鍵值來節省空間和時間。

const name='Egan',
id=1;

//The above snippet can be as follows
const egan={
name,
id
}
console.log(egan);

//Output
{name:'Egan', id:1}

可選鏈 (?.)

Javascript 可選鏈優化了以下示例中的常規空檢查。

var obj={
   data:{
      id: 1;
   }
}

//General null check
if(obj.data && obj.data.id)

//Optional chaining
obj.data?.id

延遲/非同步載入

Javascript 的 'defer' 和 async 在 HTML 解析期間下載檔案並最佳化頁面載入時間。非同步指令碼在下載後立即執行。延遲指令碼僅按 DOM 順序執行。

簡單的客戶端計算

Javascript 可以在瀏覽器上執行簡單的客戶端計算。

大型瀏覽器控制

Javascript 將瀏覽器優先於伺服器。

日期和時間處理

Javascript 具有用於獲取“日期”和時間的內建函式。

HTML 內容生成

Javascript 允許使用者在頁面上執行某些操作後新增動態 HTML 內容。

瀏覽器和作業系統檢測

Javascript 具有內建程式碼來檢測使用者使用的瀏覽器。

Let & Const 關鍵字

Javascript 使用 let 和 const 關鍵字替換 var 關鍵字，並具有塊級作用域。

箭頭函式

Javascript 使用箭頭函式語法幫助最佳化匿名函式中的語法。

模板字面量

Javascript 允許將變數儲存為字串，並節省開發時間。

新的陣列函式

Javascript 陣列函式可以最佳化程式碼。常規陣列具有整數索引，關聯陣列具有字串索引。

預設引數

Javascript 使用預設引數避免使用未定義值的錯誤情況。

屬性簡寫

Javascript 有一些簡寫方法，例如 .get()，可以節省編碼時間和成本。

與 Java 語法相似

Javascript 語法和 Java 語法更相似，這有助於開發人員同時使用這兩種程式語言。

If else 語句

Javascript 的 'if else' 條件語句執行邏輯運算。

迴圈語句

Javascript 迴圈允許開發人員使用迴圈多次執行相同的程式碼。

BigInt

Javascript 允許使用大整數值。Javascript 引擎對 BigInt 的支援方式不同。

動態匯入

Javascript 動態匯入函式允許在執行時新增任何檔案。

Promise.allSettled

Javascript Promise.allSettled 方法僅在解析或拒絕所有 Promise 後才接受 Promise 陣列。

String matchAll

Javascript string.matchAll() 返回正則表示式中的所有匹配組。

globalThis

Javascript globalThis 指向全域性物件，而不考慮視窗物件或自身物件。

模組名稱空間匯出

Javascript 模組名稱空間匯入匯出語法如下。

import * as utils from'./utils.mjs';
export {utils}

定義明確的 for-in 順序

直到 2020 年，Javascript 的 'for(a in b)' 還沒有執行順序。ES2020 給出了規範。

Import.meta

Javascript import.meta 提供指令碼標籤的元資訊。

<script type='module' src='module.js'>
console.log(meta);
//Output
{url: 'file':'//home/user/module.js'}

使用 .at() 進行負索引

使用陣列長度減去過程的 Javascript 陣列索引是一種舊方法。.at() 函式可以替代此任務。

let arr=[10, 20, 30];
arr.at(2);//Prints 20

hasOwn

Javascript hasOwn 屬性是 hasOwnProperty 的擴充套件。Javascript hasOwn 是一個靜態方法。

let obj = Object.create(null);
obj.hasOwnProperty=function(){};
Object.hasOwnProperty(obj, 'hasOwnProperty');

//Cannot convert the object to the primitive value
Object.hasOwn(obj, 'hasOwnProperty'); //true

類靜態塊

Javascript 類可以具有靜態項。

class Color {
   static blue;
   static {
      this.blue = 'blueberry';
   }
}

錯誤原因

Javascript Error 類也提供錯誤原因報告。

throw new Error('Error message', { cause: rootCause });

結論

Javascript 具有獨特的特性以及面向物件程式設計和 Java 語言的特性。所有討論的功能以及其餘功能使 Javascript 成為一種強大的程式語言。