在日常開發中，我們經常會遇到一些重複、冗長的代碼。寫起來費勁，讀起來費神，維護起來更是頭疼。而且代碼越複雜，性能可能越受影響。

那有沒有辦法讓代碼更簡潔、清晰又高效呢？

JavaScript提供了許多現代語法特性，合理使用這些簡寫技巧，不僅能大幅減少代碼量，還能提升可讀性和執行效率。

很多資深前端都在用，這篇文章整理了 12 個最實用的 JS 簡寫技巧，並結合實際場景進行優化和補充，幫助你寫出更優雅的代碼。

1. 短路運算符：替代簡單的 if 判斷

以前我們這樣寫條件判斷：

if (isReady) {
    startApp();
}

現在可以用邏輯與（&&）的短路特性簡化為一行：

isReady && startApp();

適用場景：當 isReady 為真值時才執行函數。

注意：僅適用於簡單條件，避免濫用導致可讀性下降。

2. 空值合併運算符（??）：精準設置默認值

傳統做法是用 || 設置默認值：

let name = username || '默認用户';

但問題來了：如果 username 是 0、'' 或 false，也會被替換成默認值 —— 這通常不是我們想要的。

推薦使用空值合併運算符：

let name = username ?? '默認用户';

只有當 username 是 null 或 undefined 時才會使用默認值，其他“假值”如 0、'' 都會被保留。

最佳實踐：處理 API 返回數據或配置項時特別有用。

3. 可選鏈操作符（?.）：安全訪問深層屬性

想獲取一個嵌套對象的屬性：

user.address.street.name;

但如果 user 或 address 不存在，就會拋出錯誤。

過去需要層層判斷：

const streetName = user && user.address && user.address.street && user.address.street.name;

現在只需：

const streetName = user?.address?.street?.name;

如果任意一層為 null/undefined，返回 undefined 而不會報錯。

支持方法調用：obj.method?.() 和數組索引：arr?.[index]

4. 模板字符串：字符串拼接

老式拼接方式容易出錯且難看：

let message = 'Hello, ' + name + '! 你的餘額是 ' + balance + ' 元。';

用模板字符串（反引號）清爽多了：

let message = `Hello, ${name}! 你的餘額是 ${balance} 元。`;

優勢：

  • • 支持換行
  • • 內嵌表達式 ${}
  • • 更易維護

5. 解構賦值：快速提取數據

從對象或數組中取值，再也不用手動賦值了。

對象解構：

// 舊寫法
let name = user.name;
let age = user.age;

// 新寫法
let { name, age } = user;

還可以重命名、設默認值：

let { name: userName, age = 18 } = user;

數組解構：

let [first, second] = list;
let [, , third] = list; // 跳過前兩個元素

常用於函數參數解構、React 中的狀態提取等。

6. 箭頭函數：更簡潔的函數定義

傳統函數：

function multiply(a, b) {
    return a * b;
}

箭頭函數一行搞定：

const multiply = (a, b) => a * b;

優點：

  • • 語法簡潔
  • • 不綁定自己的this，適合事件回調、.map() 等場景

注意：不要在對象方法或需要動態this的地方使用（比如 DOM 事件監聽器），否則this指向會出問題。

7. 擴展運算符（...）：輕鬆合併與複製

合併數組：

// 舊：concat()
let combined = array1.concat(array2);

// 新：擴展運算符
let combined = [...array1, ...array2];

插入元素也方便：

let newArr = [...array1, newItem, ...array2];

合併對象：

let config = { ...defaultConfig, ...userConfig };

注意：擴展運算符是淺拷貝！嵌套對象仍共享引用。

8. 數組高階函數：替代 for 循環

遍歷查找元素，過去常用 for 循環：

let found;
for (let i = 0; i < users.length; i++) {
    if (users[i].id === targetId) {
        found = users[i];
        break;
    }
}

現在一行解決：

let found = users.find(user => user.id === targetId);

常用方法推薦：

方法

用途

.find()

查找第一個匹配項

.filter()

過濾出所有符合條件的項

.map()

映射新數組

.some()

 / .every()

判斷是否存在 / 是否全部滿足條件

.includes()

判斷是否包含某值

示例：

// 獲取所有活躍用户的名字
const activeNames = users
  .filter(u => u.isActive)
  .map(u => u.name);

9. 對象屬性簡寫：變量名即屬性名

當變量名與屬性名一致時，無需重複書寫：

let name = '小明';
let age = 25;

// 舊寫法
let user = {
    name: name,
    age: age
};

// 新寫法
let user = {
    name,
    age
};

特別適合構建 API 請求體、返回對象等場景。

10. 指數運算符（**）：更直觀的冪運算

以前計算冪要用 Math.pow()：

let result = Math.pow(2, 8); // 256

現在直接用 **：

let result = 2 ** 8; // 256

更接近數學表達習慣，支持負指數：

let half = 2 ** -1; // 0.5

11. 邏輯賦值運算符：結合條件與賦值

ES2021 引入了三個邏輯賦值運算符，能進一步簡化賦值邏輯。

場景一：只在為空時賦值

// 舊寫法
if (user.role === null || user.role === undefined) {
    user.role = 'guest';
}

// 新寫法
user.role ??= 'guest'; // 等價於 user.role = user.role ?? 'guest';

場景二：只有當前值為真才更新

user.isAdmin &&= false; // 若 isAdmin 為真，則設為 false

場景三：拼接字符串或累加

message += welcomeText; // 原生已有

// 也可以用
message ||= 'default'; // 如果 message 是假值，則賦默認值

小結：

運算符

含義

??=

空值合併賦值

&&=

邏輯與賦值

||=

邏輯或賦值

12. Nullish Coalescing 結合 Optional Chaining

將 ?. 和 ?? 結合使用，可以構建極其健壯的數據訪問邏輯。

例如：

const displayName = user?.profile?.name ?? '匿名用户';

解釋：

  • • 先通過可選鏈安全訪問 name
  • • 如果結果是 null 或 undefined，則返回默認值

應用於表單默認值、UI 渲染 fallback 等非常合適。

總結

技巧

關鍵字/符號

1. 短路運算

&& , ||

2. 空值合併

??

3. 可選鏈

?.

4. 模板字符串

`${}`

5. 解構賦值

{} , []

6. 箭頭函數

=>

7. 擴展運算符

...

8. 數組方法

.find(), .map() 等

9. 屬性簡寫

{ name }

10. 指數運算符

**

11. 邏輯賦值

??=, &&=, ||=

12. 組合技巧

?. + ??

✨ 它們的好處：

  • • 減少代碼量
  • • 提升可讀性（適度使用）
  • • 增強健壯性（如 ?. 和 ??）
  • • 更貼近現代 JS 編碼規範

❗ 但也請注意：

  • • 不要為了使用而過度簡化
  • • 團隊協作中確保成員都熟悉這些語法
  • • 在關鍵路徑上優先保證可讀性和可調試性