即使是後端工程師也應該知道的基本 - 前端 JS 方法與模組的最佳 5

即使是後端工程師，最終的“結果”也是在瀏覽器上運行的。
不需要專精於前端，但如果至少了解基本的 JavaScript 語法和方法：

可以更輕鬆地找出錯誤原因
能與前端同事進行良好的溝通
能自己對簡單的畫面進行修改。

本文總結了 後端工程師在前端 JavaScript 中必知的最佳 5。

1. `fetch` – 在瀏覽器中進行 HTTP 調用

為何重要？

後端工程師最熟悉的就是 HTTP API。
在前端中，經常以 fetch 來調用這些 API。
理解請求是如何發送的，以及如何處理響應/錯誤，就能大大簡化調試過程。

基本用法

// GET 請求示例
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('HTTP 錯誤 ' + res.status);
    return res.json(); // JSON 解析
  })
  .then((data) => {
    console.log('使用者:', data);
  })
  .catch((err) => {
    console.error('fetch 錯誤:', err);
  });

POST + JSON 示範

async function createUser() {
  try {
    const res = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'Alice', age: 30 }),
    });

    if (!res.ok) {
      throw new Error('HTTP 錯誤 ' + res.status);
    }

    const data = await res.json();
    console.log('創建的:', data);
  } catch (e) {
    console.error(e);
  }
}

重點

通過查看 res.ok, res.status 等來區分伺服器錯誤
記住使用 JSON.stringify, res.json() 的模式就如同模板一般也不錯
如果發生 CORS 錯誤，養成在瀏覽器控制台查看 fetch 請求發送方式的習慣會很好

2. `Promise` 與 `async/await` – 非同步邏輯的基礎

為何重要？

前端大部分是非同步的。

UI 事件
HTTP 請求
計時器、WebSocket 等

處理這些的核心概念是 Promise 和 async/await。
如果在後端使用過非同步 I/O，那麼概念是相似的。

Promise 基本

function getUser(id) {
  return fetch(`/api/users/${id}`).then((res) => res.json());
}

getUser(1)
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.error(err);
  });

使用 async/await 更具可讀性

async function showUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

showUser(1);

並行調用（在後端也經常使用的模式）

async function loadDashboard() {
  const [userRes, statsRes] = await Promise.all([
    fetch('/api/me'),
    fetch('/api/stats'),
  ]);

  const [user, stats] = await Promise.all([
    userRes.json(),
    statsRes.json(),
  ]);

  console.log(user, stats);
}

重點

Promise 基礎 API 可以根據 .then().catch() 或者 async/await 選擇其中一種可讀性更好的方式
當一起發送多個請求時，記住 Promise.all 模式

3. 陣列方法三寶：`map`, `filter`, `reduce`

為何重要？

前端也需要處理數據。

將從伺服器獲得的 JSON 列表轉換為顯示用數據格式
僅篩選符合特定條件的數據
計算總和/統計

在這時，我們經常會使用 陣列方法。這跟後端常見的 集合處理 概念是一樣的。

`map` – 轉換陣列中的各個元素

const users = [
  { id: 1, name: 'Alice', age: 31 },
  { id: 2, name: 'Bob', age: 27 },
];

const names = users.map((u) => u.name);
// ['Alice', 'Bob']

`filter` – 只保留符合條件的項目

const adults = users.filter((u) => u.age >= 30);
// [{ id: 1, name: 'Alice', age: 31 }]

`reduce` – 將陣列合併為單一值

const totalAge = users.reduce((sum, u) => sum + u.age, 0);
// 58

鏈式調用示例

const avgAgeOfAdults = users
  .filter((u) => u.age >= 30)
  .reduce((acc, u, _, arr) => acc + u.age / arr.length, 0);

重點

當看到“前端代碼中只有 for 循環”的時候，也能發現可改寫為 map/filter/reduce 的地方
若將前端與後端（Java、Kotlin、Python、Go 等）的集合函式庫建立對應關係，理解會變得更快

4. DOM 操作的核心：`querySelector`, `addEventListener`, `classList`

為何重要？

即使使用框架（如 React、Vue 等），在調試階段最終也需要直接查看 DOM。
簡單的管理頁面或內部工具有時會使用純粹的 Vanilla JS 來編寫。

選擇元素 – `querySelector`

<button id="save-btn">儲存</button>

const saveBtn = document.querySelector('#save-btn');

直接使用 CSS 選擇器語法。

#id
.class
button.primary
div > span 等等

事件處理器 – `addEventListener`

saveBtn.addEventListener('click', () => {
  console.log('儲存按鈕被點擊!');
});

樣式/狀態切換 – `classList`

<button id="save-btn" class="primary">儲存</button>

saveBtn.classList.add('loading');     // 新增類別
saveBtn.classList.remove('primary');  // 移除類別
saveBtn.classList.toggle('hidden');   // 存在則移除，不存在則新增

只要懂得這些組合：

“為何按鈕不能被點擊?” → 可以檢查實際的 DOM 元素是否正確獲取，事件是否正常綁定
“為何這個 div 不見了?” → 可以查看 classList 追蹤哪些狀態類別被應用

重點

在理解框架的內部運作時，擁有 DOM API 基礎就不會感到太迷茫
在瀏覽器控制台中直接使用 document.querySelector(...) 的習慣也很重要

5. ES 模組 – `import` / `export` 基礎

為何重要？

現在前端 JavaScript 基本使用 ES 模組 (ESM)。

代碼以文件為單位分離
只引入需要的 import 來使用
即使不使用 webpack/babel/打包器，瀏覽器也直接理解 ESM

由於後端（Node.js）也越來越多地使用 ESM，因此整理清楚對雙方都有好處。

模組導出 – `export`

// mathUtils.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

// 默認 (default) 導出 – 代表模組的值/函數
export default function mul(a, b) {
  return a * b;
}

模組導入 – `import`

// main.js
import mul, { add, PI } from './mathUtils.js';

console.log(add(1, 2)); // 3
console.log(mul(3, 4)); // 12
console.log(PI);        // 3.14

{ add, PI } : 具名導出 (named export)
mul : 默認導出 (default export)

在瀏覽器中使用模組腳本的示例

<script type="module" src="/static/js/main.js"></script>

這樣宣告後，就能在 main.js 中使用 import / export 語法。

重點

前端/後端共通的“模組化”概念是相同的
如果知道導入路徑的規則 (./, ../, 絕對路徑，打包器的別名等) 就能更不混淆地閱讀前端構建設置

後端工程師寫 JS 代碼的樣子

結束 – “能做前端的後端” 的最基本要求

總結來說，後端工程師如果要 了解前端 JS 時，至少要知道的幾個要點有：

fetch – 在瀏覽器中進行 HTTP 調用及 JSON 處理
Promise / async/await – 理解非同步邏輯結構
陣列方法 (map, filter, reduce) – 數據轉換/篩選/匯總
DOM 基本 (querySelector, addEventListener, classList) – 選擇畫面元素、事件、狀態切換
ES 模組 (import / export) – 理解以模組為單位的代碼結構

這五樣熟悉了之後：

能參加前端代碼審查
能直接實現/修改簡單的畫面
能同時在前後端跟踪 API 集成問題。

之後根據需要可以擴展到 React/Vue 等框架，構建/打包工具（Webpack、Vite、SWC 等）。

即使是後端工程師也應該知道的基本 - 前端 JS 方法與模組的最佳 5

1. `fetch` – 在瀏覽器中進行 HTTP 調用

為何重要？

基本用法

POST + JSON 示範

2. `Promise` 與 `async/await` – 非同步邏輯的基礎

為何重要？

Promise 基本

使用 async/await 更具可讀性

並行調用（在後端也經常使用的模式）

3. 陣列方法三寶：`map`, `filter`, `reduce`

為何重要？

`map` – 轉換陣列中的各個元素

`filter` – 只保留符合條件的項目

`reduce` – 將陣列合併為單一值

鏈式調用示例

4. DOM 操作的核心：`querySelector`, `addEventListener`, `classList`

為何重要？

選擇元素 – `querySelector`

事件處理器 – `addEventListener`

樣式/狀態切換 – `classList`

5. ES 模組 – `import` / `export` 基礎

為何重要？

模組導出 – `export`

模組導入 – `import`

在瀏覽器中使用模組腳本的示例

結束 – “能做前端的後端” 的最基本要求

相似的文章

MAME RUN!! 製作背後 – 技術篇

圖像優化的隱藏英雄：`width`、`height`屬性與Core Web Vitals改善策略

如何判斷JavaScript中的瀏覽器寬度，以及在三星瀏覽器中遇到的奇怪經歷

JavaScript、Python 字典與 C++ 的 std::map

留下評論

新增評論

1. fetch – 在瀏覽器中進行 HTTP 調用

為何重要？

基本用法

POST + JSON 示範

2. Promise 與 async/await – 非同步邏輯的基礎

為何重要？

Promise 基本

使用 async/await 更具可讀性

並行調用（在後端也經常使用的模式）

3. 陣列方法三寶：map, filter, reduce

為何重要？

map – 轉換陣列中的各個元素

filter – 只保留符合條件的項目

reduce – 將陣列合併為單一值

鏈式調用示例

4. DOM 操作的核心：querySelector, addEventListener, classList

為何重要？

選擇元素 – querySelector

事件處理器 – addEventListener

樣式/狀態切換 – classList

5. ES 模組 – import / export 基礎

為何重要？

模組導出 – export

模組導入 – import

在瀏覽器中使用模組腳本的示例

結束 – “能做前端的後端” 的最基本要求

相似的文章

MAME RUN!! 製作背後 – 技術篇

圖像優化的隱藏英雄：`width`、`height`屬性與Core Web Vitals改善策略

如何判斷JavaScript中的瀏覽器寬度，以及在三星瀏覽器中遇到的奇怪經歷

JavaScript、Python 字典與 C++ 的 std::map

留下評論

新增評論

1. `fetch` – 在瀏覽器中進行 HTTP 調用

2. `Promise` 與 `async/await` – 非同步邏輯的基礎

3. 陣列方法三寶：`map`, `filter`, `reduce`

`map` – 轉換陣列中的各個元素

`filter` – 只保留符合條件的項目

`reduce` – 將陣列合併為單一值

4. DOM 操作的核心：`querySelector`, `addEventListener`, `classList`

選擇元素 – `querySelector`

事件處理器 – `addEventListener`

樣式/狀態切換 – `classList`

5. ES 模組 – `import` / `export` 基礎

模組導出 – `export`

模組導入 – `import`