JavaScript 解構預設值遇到 null 為什麼失效？分清欄位與參數預設

2026-11-03

前端

JavaScript

/

前端開發

/

疑難排解

/

最佳實踐

API 回傳 { limit: null }，寫了 const { limit = 20 } = data 卻仍拿到 null，這是解構預設值的正常行為。只有欄位取得 undefined 時才會採用預設值；null、0、false 和空字串都會保留。

先決定 API 契約：null 是「未提供，請用預設」，還是「刻意清空」？依這個答案決定補值規則，並保留契約允許的 falsy 值。

參數預設與欄位預設，處理不同層#

MDN 解構文件說明預設值只處理缺少或 undefined。函式的 = {} 處理的是整個參數，裡面的 limit = 20 處理的是欄位。

本文兩組範例由維護流程於 2026-11-03 在 macOS、Node.js v24.13.0 執行，驗證範圍為獨立 JavaScript 範例。將以下獨立存成 .mjs，用 Node.js 執行：

1
import assert from 'node:assert/strict';
2

3
function readLimit({ limit = 20 } = {}) {
4
  return limit;
5
}
6

7
assert.equal(readLimit(), 20);
8
assert.equal(readLimit(undefined), 20);
9
assert.equal(readLimit({}), 20);
10
assert.equal(readLimit({ limit: undefined }), 20);
11
assert.equal(readLimit({ limit: null }), null);
12
assert.equal(readLimit({ limit: 0 }), 0);
13
assert.equal(readLimit({ limit: false }), false);
14
assert.equal(readLimit({ limit: '' }), '');
15
assert.throws(() => readLimit(null), TypeError);
16
console.log('參數與欄位預設值檢查通過');

最後一行之前的 TypeError 來自對整個 null 進行物件解構。巢狀解構也要逐層檢查：替 options = {} 設預設，仍不會替換 options: null。

null 可以當缺值時，用 ??；型別錯誤另外拒絕#

若產品明確規定 null 與 undefined 都使用預設，nullish coalescing 的 ??符合這個條件；|| 還會替換 0、false、空字串。換運算子之前，先列出必須保留的合法值。

例如這個分頁設定允許 limit: 0 表示不載入，範圍是 0 到 100 的整數；enabled 必須是布林值。整個輸入只允許一般資料物件，null 不視為合法回應。這是自行定義的應用契約：

1
import assert from 'node:assert/strict';
2

3
function readOptions(input = {}) {
4
  if (input === null || typeof input !== 'object' || Array.isArray(input) ||
5
      ![Object.prototype, null].includes(Object.getPrototypeOf(input))) {
6
    throw new TypeError('需要一般設定物件');
7
  }
8
  const limit = Object.hasOwn(input, 'limit') ? (input.limit ?? 20) : 20;
9
  const enabled = Object.hasOwn(input, 'enabled') ? (input.enabled ?? true) : true;
10
  if (!Number.isInteger(limit) || limit < 0 || limit > 100) {
11
    throw new TypeError('limit 必須是 0 到 100 的整數');
12
  }
13
  if (typeof enabled !== 'boolean') throw new TypeError('enabled 必須是布林值');
14
  return { limit, enabled };
15
}
16

17
assert.deepEqual(readOptions(), { limit: 20, enabled: true });
18
assert.deepEqual(readOptions({ limit: null, enabled: undefined }), { limit: 20, enabled: true });
19
assert.deepEqual(readOptions({ limit: 0, enabled: false }), { limit: 0, enabled: false });
20
assert.equal(0 || 20, 20);
21
assert.equal(0 ?? 20, 0);
22
for (const input of [null, [], 3, 'x', new Date()]) {
23
  assert.throws(() => readOptions(input), TypeError);
24
}
25
for (const limit of ['', '20', false, NaN, Infinity, -1, 101, 1.5]) {
26
  assert.throws(() => readOptions({ limit }), TypeError);
27
}
28
assert.throws(() => readOptions({ enabled: 'false' }), TypeError);
29
const empty = Object.create(null);
30
assert.deepEqual(readOptions(empty), { limit: 20, enabled: true });
31
console.log('nullish 補值、合法零值與型別驗證通過');