通常，作為開發人員，我們會編寫類似類型的程式碼，陷入雖然舒適但有時感覺很平凡的模式。

然而，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 = 3

3 — 字串格式化以外的標記範本文字

除了建立字串之外，標記範本還可用於 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 environment

5 — 無效運算符

void運算子計算任何表達式，然後傳回未定義的值，這對於 JavaScript 的超連結很有用。

void (0); // returns undefined

6 — 用於快速數學的位元運算符

位運算符，例如|和& ，可以更快地執行一些數學運算，但會犧牲可讀性。

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 fail

9 — 在屬性檢查操作員中

檢查物件是否具有屬性，而無需直接存取其值。

"toString" in {}; // true

10——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 mode

12 — 偵錯器語句

使用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 recommended

15 — 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 5

17 — 屬性存在的 in 運算符

in運算子檢查屬性是否存在於物件中，而不存取屬性值。

const car = {
    make: 'Toyota',
    model: 'Corolla'
};
console.log('make' in car); // true

18 — 物件屬性簡寫

為物件指派屬性時，如果屬性名稱與變數名稱相同，則可以使用簡寫。

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: 0

20 — 使用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')); // true

22 — 解構別名

destructuring物件時，可以使用別名將屬性指派給具有不同名稱的變數。

const obj = { x: 1, y: 2 };
const { x: newX, y: newY } = obj;
console.log(newX); // 1

23 — 預設值的空合併運算符

使用??僅在處理null或undefined時提供預設值，而不是其他falsy值，例如

const count = 0;
console.log(count ?? 10); // 0, because count is not null or undefined

24 — 動態函數名稱

使用物件字面量中的計算屬性名稱建立具有動態名稱的函數。

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