通常，作為開發人員，我們會編寫類似類型的程式碼，陷入雖然舒適但有時感覺很平凡的模式。
然而，JavaScript 的世界是廣闊的，充滿了高級功能，當發現和使用這些功能時，可以將我們的開發工作變得更加令人興奮和充實。
在本指南中，我們將揭曉 25 個高級 JavaScript 功能，這些功能不僅能揭示這些隱藏的瑰寶，還能將您對 JavaScript 的掌握提升到前所未有的水平。
讓我們一起踏上這段發現之旅，將 JavaScript 的高級功能整合到我們的編碼庫中，以建立更有效率、更優雅、更強大的應用程式。是時候為我們的開發任務注入新的樂趣和創造力了。
1 — 迴圈和區塊語句的標籤
JavaScript 允許標記迴圈和區塊語句，從而可以使用break和continue進行精確控制。
outerLoop: for (let i = 0; i < 5; i++) {
innerLoop: for (let j = 0; j < 5; j++) {
if (i === 2 && j === 2) break outerLoop;
console.log(`i=${i}, j=${j}`);
}
}2 - 逗號運算符
逗號運算子允許按序列計算多個表達式，並傳回最後一個表達式的結果。
let a = (1, 2, 3); // a = 33 — 字串格式化以外的標記範本文字
除了建立字串之外，標記範本還可用於 DSL（域特定語言）、清理使用者輸入或本地化。
function htmlEscape(strings, ...values) {
// Example implementation
}4 — 區塊內的函數聲明
儘管不推薦，但 JavaScript 允許在區塊內聲明函數，這可能會導致非嚴格模式下的不同行為。
if (true) {
function test() { return "Yes"; }
} else {
function test() { return "No"; }
}
test(); // Behavior varies depending on the environment5 — 無效運算符
void運算子計算任何表達式，然後傳回未定義的值，這對於 JavaScript 的超連結很有用。
void (0); // returns undefined6 — 用於快速數學的位元運算符
位運算符，例如|和& ，可以更快地執行一些數學運算，但會犧牲可讀性。
let floor = 5.95 | 0; // Fast way to do Math.floor(5.95)7 — with 處理物件的語句
with語句擴展了區塊的作用域鏈，讓您可以編寫更短的程式碼。但是，出於可讀性和效能方面的考慮，不建議這樣做。
with(document.getElementById("myDiv").style) {
background = "black";
color = "white";
}
與 Christian Heilmann 一起提高您的 JavaScript 技能 - 從今天開始編寫更乾淨、更快、更好的程式碼！
8 — 自動分號插入 (ASI)
JavaScript 嘗試修復缺少的分號，但依賴它可能會導致意外結果。
let x = 1
let y = 2
[x, y] = [y, x] // Without proper semicolons, this could fail9 — 在屬性檢查操作員中
檢查物件是否具有屬性，而無需直接存取其值。
"toString" in {}; // true10——instanceof 與 typeof
instanceof檢查原型鏈，而typeof傳回一個字串，指示未計算的操作數的類型。
function Person() {}
let person = new Person();
console.log(person instanceof Person); // true
console.log(typeof person); // "object"11 — ES6 中的區塊級函數
ES6允許函數具有區塊作用域，類似let和const 。
{
function test() {
return "block scoped";
}
}
console.log(typeof test); // "function" in non-strict mode, "undefined" in strict mode12 — 偵錯器語句
使用debugger語句暫停執行並開啟偵錯器。
function problematicFunction() {
debugger; // Execution pauses here if the developer tools are open
}13 —用於動態程式碼執行的eval()
eval將字串作為 JavaScript 程式碼執行，但會帶來重大的安全性和效能影響。
eval("let a = 1; console.log(a);"); // 1
利用 InMotion Hosting 的一系列計劃（從共享伺服器到 VPS 以及專用伺服器）為您的專案找到合適的託管解決方案。
14 — 非標準__proto__屬性
雖然__proto__被廣泛支持用於設定物件的原型，但它是非標準的。請改用Object.getPrototypeOf()和Object.setPrototypeOf() 。
let obj = {};
obj.__proto__ = Array.prototype; // Not recommended15 — document.write() 用於直接文件編輯
document.write()直接寫入 HTML 文件，但使用它可能會產生負面影響，特別是同步載入外部腳本。
document.write("<h1>Hello World!</h1>");16 — 鍊式分配
JavaScript 允許鍊式賦值，它可以在一個語句中將單一值指派給多個變數。
let a, b, c;
a = b = c = 5; // Sets all three variables to the value of 517 — 屬性存在的 in 運算符
in運算子檢查屬性是否存在於物件中，而不存取屬性值。
const car = {
make: 'Toyota',
model: 'Corolla'
};
console.log('make' in car); // true18 — 物件屬性簡寫
為物件指派屬性時，如果屬性名稱與變數名稱相同，則可以使用簡寫。
const name = 'Alice';
const age = 25;
const person = { name, age };19 — 預設參數值和解構組合
您可以將預設參數值與函數參數中的解構結合起來，以獲得更具可讀性和更靈活的函數定義。
function createPerson({ name = 'Anonymous', age = 0 } = {}) {
console.log(`Name: ${name}, Age: ${age}`);
}
createPerson({ name: 'Alice' }); // Name: Alice, Age: 0
createPerson(); // Name: Anonymous, Age: 020 — 使用Array.fill()初始化陣列
使用fill()方法使用特定值快速初始化陣列。
const initialArray = new Array(5).fill(0); // Creates an array [0, 0, 0, 0, 0]
利用可調式 LED 照明優化您的工作空間，提高工作效率和舒適度，為專注的工作會議創造理想的環境。
21 — Array.includes()用於存在檢查
使用includes()方法可以輕鬆檢查陣列中是否存在元素，這比使用indexOf()更具可讀性。
const fruits = ['apple', 'banana', 'mango'];
console.log(fruits.includes('banana')); // true22 — 解構別名
destructuring物件時，可以使用別名將屬性指派給具有不同名稱的變數。
const obj = { x: 1, y: 2 };
const { x: newX, y: newY } = obj;
console.log(newX); // 123 — 預設值的空合併運算符
使用??僅在處理null或undefined時提供預設值，而不是其他falsy值，例如
const count = 0;
console.log(count ?? 10); // 0, because count is not null or undefined24 — 動態函數名稱
使用物件字面量中的計算屬性名稱建立具有動態名稱的函數。
const dynamicName = 'func';
const obj = {
[dynamicName]() {
return 'Dynamic Function Name!';
}
};
console.log(obj.func()); // "Dynamic Function Name!"25 — 私有類別字段
使用 hash #前綴定義類別中的私有字段，該字段無法從類別外部存取。
class Counter {
#count = 0;
increment() {
this.#count++;
}
getCount() {
return this.#count;
}
}簡單總結
當我們結束 25 個 JavaScript 高階功能的探索時，JavaScript 的函式庫既龐大又強大。
我們深入研究的每個功能都為解決編碼挑戰開闢了新途徑，類似於在我們的工具包中加入創新工具。
這不僅增強了我們創造性、有效率地制定解決方案的能力，而且還強調了 JavaScript 的動態多功能性。
這些進階功能凸顯了持續學習在 Web 開發領域的關鍵角色。
接受這些細微差別並將它們整合到我們的日常編碼實踐中，使我們能夠提高我們的技能並為網路技術的發展做出貢獻。
請記住，掌握 JavaScript 的道路是一個持續的旅程，每一行程式碼都提供了發現非凡事物的機會。
讓我們不斷突破 JavaScript 所能實現的極限，保持好奇心並對未來的無限可能性保持開放。
支持我們的技術見解
注意：此頁面上的某些連結可能是附屬連結。如果您透過這些連結進行購買，我可能會賺取少量佣金，而您無需支付額外費用。感謝您的支持！
原文出處：https://dev.to/mmainulhasan/25-unnoticeable-features-of-javascript-15l1
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式