分享一個(gè)好玩的函數(shù)，用于統(tǒng)一判斷一個(gè)數(shù)據(jù)是否為“合法數(shù)據(jù)”，即判斷該數(shù)據(jù)既不是空字符串，也不是 undefined 和 null。

1. 非空判斷

const isLegalData = (data) => {
  if (((data ?? '') !== '')) {
    return true;
  }
  return false;
};

解析一下：data ?? ' '

使用空值合并操作符 ??，它會檢查 data 的值：

- 如果 data 是 null 或 undefined，則使用空字符串 ' ' 代替，返回 false；

- 如果 data 是 空字符串，返回 false；

- 如果 data 是其他值，則保持 data 的原始值，返回 true。

console.log(isLegalData(undefined)); // false
console.log(isLegalData(null)); // false
console.log(isLegalData('')); // false
console.log(isLegalData('Hello')); // true
console.log(isLegalData(0)); // true
console.log(isLegalData(false)); // true

說到這，那就簡單了解一下 空值合并操作符 --- ?? 吧。

2. 基本介紹

空值合并操作符是 JS 中一個(gè)非常實(shí)用的邏輯運(yùn)算符，用于處理 null 和 undefined 值。它允許我們提供一個(gè)默認(rèn)值，當(dāng)一個(gè)表達(dá)式的結(jié)果是 null 或 undefined 時(shí)，就會返回這個(gè)默認(rèn)值。

const value = someVariable ?? defaultValue;

- someVariable：被檢查的變量或表達(dá)式。

- defaultValue：當(dāng) someVariable 為 null 或 undefined 時(shí)，返回的默認(rèn)值。

舉個(gè) ??

const username = null;
const displayName = username ?? 'Monica';
console.log(displayName); // 輸出: Monica

3. ?? 與 || 的區(qū)別

在 JS 中，邏輯或運(yùn)算符 || 也常常用于提供默認(rèn)值，它不會對 null 和 undefined 做特殊處理，而是對其他的“假值”（如：0、'' 、false、NaN、null、undefined）進(jìn)行統(tǒng)一處理，視為 false。

const value1 = 0 || 'default';
console.log(value1); // 輸出: default

const value2 = 0 ?? 'default';
console.log(value2); // 輸出: 0

- || ：返回第一個(gè)“真值”

- ?? ：只對 null 和 undefined 處理

如果我們只想處理 null 和 undefined，而保留其他“假值”，應(yīng)該使用 ??。

4. 注意事項(xiàng)

4.1 優(yōu)先級

在使用 ?? 時(shí)，必須注意運(yùn)算符的優(yōu)先級，特別是在與其他邏輯運(yùn)算符（如 || 和 &&）混合使用時(shí)。

如果期望 || 優(yōu)先執(zhí)行：

const result = (someValue || otherValue) ?? defaultValue;

如果期望 ?? 優(yōu)先執(zhí)行：

const result = someValue || (otherValue ?? defaultValue);

4.2 使用環(huán)境

空值合并操作符是 ECMAScript 2020 (ES11) 中的新特性，因此需要確保在現(xiàn)代瀏覽器或支持 ES2020 的 JavaScript 環(huán)境中使用。

5. 示例

如果在實(shí)際開發(fā)中，某些配置項(xiàng)可以是 0 或者 空字符串，但當(dāng)這些配置項(xiàng)是 null 或 undefined 時(shí)，則需要提供一個(gè)默認(rèn)值。

const config = {
  maxRetries: 0,
  timeout: undefined,
  cacheSize: null,
};

// 正確使用空值合并操作符
const retries = config.maxRetries ?? 5; // 輸出: 0（因?yàn)?maxRetries 是有效的值）
const timeout = config.timeout ?? 100; // 輸出: 100（因?yàn)?timeout 是 undefined）
const cache = config.cacheSize ?? 365; // 輸出: 365（因?yàn)?cacheSize 是 null）

在這個(gè)例子中，如果使用 || ，即使 maxRetries 為 0，也會被替換為 5，不是我們想要的結(jié)果，所有這種情況下，?? 會更加合適。

空值合并操作符 ?? 對處理 null 和 undefined 非常有幫助，它與傳統(tǒng)的 || 運(yùn)算符相比，更加精確和安全。

到此這篇關(guān)于js有趣的非空判斷函數(shù) + ?? 實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js 非空判斷 + ?? 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論