幫助同學(xué)們學(xué)會(huì)在前端真實(shí)業(yè)務(wù)項(xiàng)目里，到底該怎么寫空值處理（?.、??、||、if判斷、兜底邏輯），以及為什么這么選、會(huì)踩哪些高頻坑，順便幫你拉直JS/TS空值、真值假值的基礎(chǔ)概念，助力寫出規(guī)范可維護(hù)的團(tuán)隊(duì)級(jí)代碼。

很多前端開發(fā)者都會(huì)遇到一個(gè)瓶頸：

代碼能跑，但不夠規(guī)范；功能能實(shí)現(xiàn)，但維護(hù)起來特別痛苦；一個(gè)人寫沒問題，一到團(tuán)隊(duì)協(xié)作就各種混亂、踩坑、返工。

想寫出干凈、優(yōu)雅、可維護(hù)的專業(yè)代碼，靠的不是天賦，而是體系化的規(guī)范 + 真實(shí)實(shí)戰(zhàn)經(jīng)驗(yàn)。

這一系列《前端規(guī)范實(shí)戰(zhàn)》，我會(huì)用大白話 + 真實(shí)業(yè)務(wù)場(chǎng)景，不講玄學(xué)、不堆理論，只分享能直接落地的規(guī)范、標(biāo)準(zhǔn)與避坑指南。

幫你從「會(huì)寫代碼」真正升級(jí)為「會(huì)寫優(yōu)質(zhì)、可維護(hù)、團(tuán)隊(duì)級(jí)別的代碼」。

引子：為什么要專門聊“空值處理規(guī)范”

一句話定位這篇文章：

教你在真實(shí)項(xiàng)目里，到底該怎么寫空值處理（ ?. 、 ?? 、 || 、 if ** 判斷、兜底邏輯），以及為什么這么選、會(huì)踩哪些坑**，順便幫你把 JS/TS 的一些基礎(chǔ)概念拉直。

適用人群：

• 已經(jīng)會(huì)寫 JS / Vue，但概念有點(diǎn)混：== null、||、?.、?? 到底差在哪？
• 剛?cè)腴T前端的小伙伴：想從一開始就養(yǎng)成靠譜的代碼習(xí)慣
• 像我這樣工作多年想回爐重造的工程師：系統(tǒng)校準(zhǔn)一下“習(xí)慣”是不是已經(jīng)過時(shí)了 本文不會(huì)講太多過度底層的規(guī)范條文，而是：
• 圍繞真實(shí)業(yè)務(wù)代碼的寫法
• 配合 完整示例 + 場(chǎng)景解釋
• 重點(diǎn)放在：怎么選寫法、為什么這么選、常見坑在哪里

一、先把“空值家族”講清楚：null、undefined、空字符串、0、false…

日常開發(fā)中經(jīng)?；煸谝黄鸬膸讉€(gè)值：

null           // 明確的“空值”，一般表示“這里有個(gè)位置，但現(xiàn)在沒有值”
undefined      // 未定義，通常是“壓根沒傳”、“沒賦值”
''             // 空字符串
0              // 數(shù)字 0
false          // 布爾 false
NaN            // 不是一個(gè)合法數(shù)字

1.1 “真值/假值”概念（很關(guān)鍵）

在 JS 里，if (xxx) 判斷的是“真值/假值（truthy / falsy）”，而不是嚴(yán)格意義上的 true/false。下面這些都是 falsy（假）：

• false
• 0
• -0
• ''（空字符串）
• null
• undefined
• NaN

其他的基本都被當(dāng)成 truthy（真）。

為什么要先講這個(gè)？

因?yàn)?|| 、 && 這些邏輯運(yùn)算符，走的就是“真值/假值”邏輯。

比如：

const value = 0;
const result = value || 100;
console.log(result); // 100，而不是 0

0 在 JS 里是假值，所以 value || 100 會(huì)拿到 100。

這也是我們后面會(huì)反復(fù)提的一個(gè)大坑：“用 ** || ** 做默認(rèn)值會(huì)把合法值 0/''/false 當(dāng)成沒傳”。

二、可選鏈?.：安全訪問深層屬性的標(biāo)準(zhǔn)寫法

場(chǎng)景：從后端拿到一個(gè)復(fù)雜對(duì)象，但某一層可能是 null / undefined，直接訪問就會(huì)炸：

// 假設(shè) user 可能是 null
const city = user.profile.address.city; 
// TypeError: Cannot read properties of null (reading 'profile')

2.1 傳統(tǒng)寫法 VS 可選鏈

傳統(tǒng)寫法（防御式編程）：

const city =
  user &&
  user.profile &&
  user.profile.address &&
  user.profile.address.city;

• 可讀性差
• 很啰嗦
• 稍微一改結(jié)構(gòu)就容易漏一個(gè)判斷

可選鏈寫法：

const city = user?.profile?.address?.city;

• 短很多
• 語義清晰：如果中間任何一層是 null/undefined，就直接返回 undefined，而不是拋異常

2.2 在 Vue 模板里的使用

Vue 2 + Babel 環(huán)境 或 Vue 3 默認(rèn) Vite 腳手架 一般都支持可選鏈。

在模板里：

<template>
  <div>
    <p>用戶名：{{ user?.profile?.name || '未設(shè)置' }}</p>
    <p>城市：{{ user?.profile?.address?.city || '未知城市' }}</p>
  </div>
</template>
<script setup>
const user = ref(null);
// 后端請(qǐng)求完成后，再賦值
</script>

注意：模板表達(dá)式里也可以用 ?. 和 ||、??，和 JS 里一樣。

2.3 規(guī)范建議：何時(shí)必須用可選鏈？

我在項(xiàng)目里通常建議：

• 從接口拿來的數(shù)據(jù) + 多層嵌套對(duì)象：默認(rèn)用可選鏈
• SDK / 第三方庫返回的結(jié)構(gòu)：盡量用可選鏈保護(hù)
• 對(duì)于我們自己完全可控、結(jié)構(gòu)固定的內(nèi)部數(shù)據(jù)，可以不用（比如本地寫死的配置）

統(tǒng)一規(guī)則示例：

• 接口 Model 層（TypeScript 類型 + 接口封裝）：盡量把可選屬性處理掉，往下傳固定結(jié)構(gòu)
• 頁面 / 組件層：
  • 對(duì)于“接口原始數(shù)據(jù)”：用 ?. + 兜底字符串 / 兜底組件
  • 對(duì)于“內(nèi)部狀態(tài)”：減少可選，用默認(rèn)值初始化

三、空值合并運(yùn)算符??：給“真空”兜底，而不是給所有假值兜底

回顧剛才的例子：

const value = 0;
const result = value || 100;
console.log(result); // 100

如果 0 在業(yè)務(wù)里是合法值（比如“價(jià)格 0 元”、“數(shù)量 0 個(gè)”），那上面這行其實(shí)是錯(cuò)的。

我們想要的是：“只有在值為 null 或 undefined 的時(shí)候才給默認(rèn)值”。

這就是 ?? 的作用。

3.1||vs??對(duì)比示例

console.log(0 || 100);       // 100
console.log(0 ?? 100);       // 0

console.log('' || '默認(rèn)');   // '默認(rèn)'
console.log('' ?? '默認(rèn)');   // ''

console.log(null || '默認(rèn)'); // '默認(rèn)'
console.log(null ?? '默認(rèn)'); // '默認(rèn)'

console.log(undefined || '默認(rèn)'); // '默認(rèn)'
console.log(undefined ?? '默認(rèn)'); // '默認(rèn)'

總結(jié)一句話：

• ||：只要左邊是假值（包括 0 / '' / false / NaN / null / undefined），就用右邊
• ??：只有左邊是 null 或 undefined 時(shí)，才用右邊

3.2 在真實(shí)業(yè)務(wù)中的推薦用法

典型錯(cuò)誤寫法（很常見）：

// 單價(jià)和數(shù)量來自接口
const price = item.price || 0;
const count = item.count || 1;
const total = price * count;

在這些場(chǎng)景會(huì)出錯(cuò)：

• 價(jià)格為 0 元：price 會(huì)變成 0 || 0 → 0（這里還好）
• 數(shù)量為 0：count 會(huì)變成 1（業(yè)務(wù)錯(cuò)了）
• 用戶輸入了空字符串 '' 需要區(qū)分，但被直接當(dāng)成沒填

推薦寫法：

const price = item.price ?? 0;  // 價(jià)格缺失才用 0
const count = item.count ?? 1;  // 只有未傳 count 才默認(rèn) 1

再比如配置項(xiàng)對(duì)象：

function createDialog(options = {}) {
  const width = options.width ?? 400;         // 未傳 width 才采用默認(rèn) 400
  const closable = options.closable ?? true;  // 未傳 closable 才用 true
}

3.3 在 Vue 模板中用??

<template>
  <div>
    <!-- 后端沒給 nickName 時(shí)顯示 '游客'，但如果是空字符串就保持空 -->
    <p>昵稱：{{ user.nickName ?? '游客' }}</p>
  </div>
</template>

規(guī)范建議：

• 只要你的兜底邏輯只想針對(duì) null/undefined，統(tǒng)一用 ??，不要用 ||。
• 保留 || 用于“邏輯或”場(chǎng)景，而不是“兜底默認(rèn)值”。

四、兜底邏輯：不僅是運(yùn)算符，還有“業(yè)務(wù)上的安全網(wǎng)”

可選鏈和空值合并屬于“語法層面的防御”。

真實(shí)項(xiàng)目里，還需要“業(yè)務(wù)層面的兜底”，比如：

• 數(shù)據(jù)為 null 時(shí)顯示一個(gè)“空態(tài)組件”
• 錢包余額為 null 時(shí)，不顯示數(shù)字而是展示“--”
• 列表為空時(shí)展示“暫無數(shù)據(jù)”

4.1 文本兜底：別讓頁面渲染出undefined/null

錯(cuò)誤示例：

<template>
  <div>
    <!-- 假設(shè) user.name 可能 undefined -->
    <p>用戶名：{{ user.name }}</p>
  </div>
</template>

頁面可能出現(xiàn)：

<p>用戶名：undefined</p>

推薦寫法：

<template>
  <div>
    <p>用戶名：{{ user?.name ?? '未設(shè)置' }}</p>
  </div>
</template>

如果你更謹(jǐn)慎一點(diǎn)，還可以抽成一個(gè)小工具函數(shù)或指令：

function displayText(value, fallback = '--') {
  if (value === null || value === undefined) return fallback;
  return String(value);
}

模板中：

<p>用戶名：{{ displayText(user?.name, '未設(shè)置') }}</p>

4.2 數(shù)字兜底：0、null、undefined 要區(qū)分

常見場(chǎng)景：金額 / 數(shù)量 / 積分

<template>
  <div>
    <!-- 如果 amount 為 0，要顯示 0 元，而不是 “--” -->
    <p>金額：{{ formatAmount(order?.amount) }}</p>
  </div>
</template>
<script setup>
function formatAmount(value) {
  if (value === null || value === undefined) return '--'; // 真空
  const num = Number(value);
  if (Number.isNaN(num)) return '--';                     // 非法數(shù)字
  return num.toFixed(2) + ' 元';
}
</script>

這里的思路是：

• 對(duì)于“真空”（null/undefined）和“非法值”（NaN），直接兜底成 --
• 對(duì)于合法的 0、10.5 等，按正常格式化邏輯展示

4.3 列表兜底：空數(shù)組 vs null/undefined

錯(cuò)誤寫法：

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script setup>
const list = ref(null);
</script>

list 為 null 時(shí)，Vue 其實(shí)不會(huì)崩潰，但可讀性很差，而且 TypeScript 下會(huì)瘋狂報(bào)錯(cuò)。

推薦規(guī)范：

• 列表類型的數(shù)據(jù)，初始化為 []，不要初始化為 null
• 接口響應(yīng)里如果是 null，在數(shù)據(jù)層統(tǒng)一轉(zhuǎn)成 []，不要把“既可以是數(shù)組又可以是 null”的結(jié)構(gòu)傳到視圖層

// 假設(shè)后端可能返回 { list: null }
interface ApiResponse<T> {
  list: T[] | null;
}
async function fetchUsers(): Promise<User[]> {
  const res: ApiResponse<User> = await request('/api/users');
  return res.list ?? [];
}

Vue 組件里直接：

const users = ref<User[]>([]);
onMounted(async () => {
  users.value = await fetchUsers(); // 一定是數(shù)組
});

好處：

• 模板里 v-for="user in users" 不用可選判斷
• 業(yè)務(wù)邏輯中也不用 if (!users) 亂判
• 類型更干凈，TS 也容易推斷

五、可讀性 vs 防御性：別讓“防空代碼”毀了代碼結(jié)構(gòu)

經(jīng)?？吹竭@樣的代碼：

if (user && user.profile && user.profile.address && user.profile.address.city) {
  showCity(user.profile.address.city);
} else {
  showDefaultCity();
}

可讀性非常差。我們可以結(jié)合 ?. 和業(yè)務(wù)邏輯重寫：

5.1 利用中間變量提高可讀性

const city = user?.profile?.address?.city;
if (city) {
  showCity(city);
} else {
  showDefaultCity();
}

如果業(yè)務(wù)含義更復(fù)雜，比如：

city 為空字符串也視為沒填

可以：

const rawCity = user?.profile?.address?.city;
const city = rawCity?.trim(); // string 或 undefined
if (!city) {
  showDefaultCity();
} else {
  showCity(city);
}

規(guī)范建議：

• 不要在 if (...) 里面寫一大串可選鏈，可以先提取出來
• 對(duì)于復(fù)雜邏輯（例如 if (a && b && c && d)），考慮拆成幾個(gè)語義明確的變量

六、項(xiàng)目中推薦的“空值處理規(guī)范（示例版）”

以下是一份可直接落地到團(tuán)隊(duì)規(guī)范里的示例，你可以根據(jù)團(tuán)隊(duì)實(shí)際情況調(diào)整。

6.1 基礎(chǔ)規(guī)則

• 規(guī)則 1：接口層統(tǒng)一做“空值歸一化”
  • 列表字段：null / undefined 統(tǒng)一轉(zhuǎn)成 []
  • 數(shù)字字段：null / undefined 轉(zhuǎn)成約定好的業(yè)務(wù)默認(rèn)（如 0），或者保持 null，但要有清晰設(shè)計(jì)文檔
  • 字符串字段：如果是必展示項(xiàng)，可以轉(zhuǎn) ''，或保留 null，但組件層要有兜底文案
• 規(guī)則 2：組件 / 頁面層永遠(yuǎn)不要直接信任后端
  • 訪問深層屬性一律用 ?.
  • 模板輸出中不要讓 null / undefined 直接裸露
• 規(guī)則 3：兜底默認(rèn)值盡量用 ??，而不是 ||
  • 只有當(dāng)你有意要把 0 / '' / false 也視為“空”時(shí)，才可以用 ||

6.2 風(fēng)格對(duì)比示例（推薦 vs 不推薦）

不推薦：

// 1. 訪問深層屬性不做保護(hù)
const city = user.profile.address.city;
// 2. 用 || 做默認(rèn)值
const price = item.price || 0;
const count = item.count || 1;
// 3. 列表用 null 表示“還沒加載”
const list = ref(null);

推薦：

// 1. 使用可選鏈保護(hù)
const city = user?.profile?.address?.city;
// 2. 用 ?? 嚴(yán)格處理 null/undefined
const price = item.price ?? 0;
const count = item.count ?? 1;
// 3. 列表統(tǒng)一用 [] 作為初始值
const list = ref([]);

在 Vue 模板中的統(tǒng)一寫法示例：

<template>
  <div>
    <p>用戶名：{{ user?.name ?? '未設(shè)置' }}</p>
    <p>年齡：{{ user?.age ?? '--' }}</p>
    <p>余額：{{ formatAmount(account?.balance) }}</p>
    <ul v-if="orders.length">
      <li v-for="order in orders" :key="order.id">
        訂單號(hào)：{{ order.id }}，金額：{{ formatAmount(order.amount) }}
      </li>
    </ul>
    <p v-else>暫無訂單</p>
  </div>
</template>
<script setup>
const user = ref(null);
const account = ref(null);
const orders = ref([]); // 一定是數(shù)組
function formatAmount(value) {
  if (value === null || value === undefined) return '--';
  const num = Number(value);
  if (Number.isNaN(num)) return '--';
  return num.toFixed(2) + ' 元';
}
</script>

七、常見踩坑案例拆解

7.1 “把 0 當(dāng)成沒填”——報(bào)表類頁面的大坑

需求：展示一個(gè)指標(biāo)的環(huán)比增長率，后端字段 growthRate，可能是：

• 0：說明沒漲沒跌
• 正數(shù)：增長
• 負(fù)數(shù)：下降
• null：沒有數(shù)據(jù)

錯(cuò)誤寫法：

<p>環(huán)比：{{ growthRate || '--' }}%</p>

當(dāng) growthRate = 0 時(shí)，會(huì)顯示 --%，業(yè)務(wù)含義嚴(yán)重錯(cuò)誤。

正確寫法：

<p>環(huán)比：{{ growthRate ?? '--' }}{{ growthRate === null || growthRate === undefined ? '' : '%' }}</p>

或者包裝一下：

function displayPercent(value) {
  if (value === null || value === undefined) return '--';
  return `${value}%`;
}

模板：

<p>環(huán)比：{{ displayPercent(growthRate) }}</p>

7.2 “深層屬性訪問炸頁面”——常見于接口變更

場(chǎng)景：后端有一天把 user.profile 改成 user.info，但你代碼里到處是：

user.profile.address.city

遷移時(shí)推薦策略：

先統(tǒng)一加可選鏈防御（短期止血）：

const city = user?.profile?.address?.city;

在“數(shù)據(jù)適配層”做映射，避免在視圖層直接跟后端結(jié)構(gòu)硬綁定：

interface UserViewModel {
  city?: string;
  // ...
}
function mapUserDtoToViewModel(dto: any): UserViewModel {
  const profile = dto.profile || dto.info || {};
  return {
    city: profile.address?.city,
    // ...
  };
}

視圖層只用 viewModel.city，再配合兜底：

<p>城市：{{ user.city ?? '未知城市' }}</p>

這樣即使后端再改結(jié)構(gòu)，你只需要改映射函數(shù)，不會(huì)到處是 ?. 打補(bǔ)丁。

八、結(jié)合 TypeScript：從“到處防空”升級(jí)為“類型上減少空值”

如果你的項(xiàng)目已經(jīng)用 TypeScript，可以進(jìn)一步 把“空值問題”提前到類型設(shè)計(jì)階段解決。

8.1 接口類型：把“可選”縮到最小

錯(cuò)誤示例（很多后端生成工具會(huì)這樣）：

interface UserDto {
  id?: number;
  name?: string;
  age?: number | null;
  address?: {
    city?: string;
  } | null;
}

視圖層到處是：user?.address?.city ?? '未知城市'

更好的做法是：

• 在“接口模型”層承認(rèn)這些都是可選
• 但在往頁面?zhèn)鞯臅r(shí)候，通過構(gòu)造 ViewModel 把這些變成“非可選 + 有默認(rèn)值”

interface UserViewModel {
  id: number;
  name: string;
  age: number | null;   // 業(yè)務(wù)上允許為 null
  city: string;         // 至少有兜底
}
function toUserViewModel(dto: UserDto): UserViewModel {
  return {
    id: dto.id ?? 0,                         // 或拋錯(cuò)，看業(yè)務(wù)
    name: dto.name ?? '未命名用戶',
    age: dto.age ?? null,
    city: dto.address?.city ?? '未知城市',
  };

組件里就可以大膽用：

<p>用戶名：{{ user.name }}</p>
<p>城市：{{ user.city }}</p>

而不是到處防空。

九、落地建議：如何在現(xiàn)有項(xiàng)目里逐步推行這套規(guī)范？

9.1 從“新代碼”開始做對(duì)

• 自己寫的新組件、新方法，從一開始就用 ?. 和 ??
• 審 PR 的時(shí)候，對(duì)用 || 做默認(rèn)值的地方特別敏感，看清楚是否需要保留 0/''/false

9.2 為高風(fēng)險(xiǎn)頁面補(bǔ)一層“空值巡檢”

優(yōu)先排查：

• 面向 C 端用戶的關(guān)鍵頁面（訂單、支付、結(jié)算）
• 報(bào)表、數(shù)據(jù)面板類頁面（數(shù)字特別多）

從這些點(diǎn)切入：

• 所有深層屬性訪問，加上可選鏈或前置的空值判斷
• 所有數(shù)值展示，考慮是否需要 formatXXX 方法來統(tǒng)一兜底邏輯
• 所有默認(rèn)值邏輯，檢查 || 能否替換為 ??

9.3 寫到團(tuán)隊(duì)規(guī)范 / README / Contributing 里

可以直接摘抄下面一段到你們項(xiàng)目的規(guī)范文檔里：

空值處理規(guī)范（摘要）

• 從接口拿到的原始數(shù)據(jù)，訪問深層屬性一律使用可選鏈 ?.。
• 兜底默認(rèn)值優(yōu)先使用空值合并運(yùn)算符 ??，只有在需要把 0 / '' / false 也當(dāng)成“空”的場(chǎng)景才使用 ||。
• 列表數(shù)據(jù)初始化為 []，不要用 null 表示“尚未加載”。接口返回 null 時(shí)在數(shù)據(jù)適配層統(tǒng)一轉(zhuǎn)為 []。
• 數(shù)字和金額展示需通過統(tǒng)一的格式化方法處理，避免頁面出現(xiàn) NaN 或 undefined。
• 模板中禁止直接輸出可能為 null / undefined 的字段，必須有兜底顯示（如 '--'、'未設(shè)置' 等）。

十、總結(jié)：把“空值處理”當(dāng)成一個(gè)硬規(guī)范，而不是臨時(shí)腦補(bǔ)

• 可選鏈 ?.：用來安全訪問深層屬性，防止“Cannot read properties of undefined” 直接把頁面干崩。
• 空值合并 ??：只在 null / undefined 時(shí)兜底，避免誤傷合法的 0 / '' / false。
• 兜底邏輯：不僅是語法問題，更是業(yè)務(wù)體驗(yàn)和數(shù)據(jù)安全網(wǎng)的問題，最好沉淀為項(xiàng)目級(jí)規(guī)范，而不是隨手一寫。

技術(shù)成長，從來不是比誰寫得快，而是比誰寫得穩(wěn)、規(guī)范、可維護(hù)。

哪怕每次只吃透一條規(guī)范，長期下來，差距會(huì)非常明顯。

以上就是Vue前端空值處理的實(shí)戰(zhàn)指南與避坑記錄的詳細(xì)內(nèi)容，更多關(guān)于Vue空值處理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論