快捷導(dǎo)航

詳解JavaScript中?.、??和??=的用法及使用場景

更新時(shí)間：2023年08月25日 14:27:06 作者：阿虎兒

這篇文章主要為大家詳細(xì)介紹了JavaScript中?.、??和??=的用法及使用場景,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

下面這個(gè)錯(cuò)誤，相信前端開發(fā)工程師應(yīng)該經(jīng)常遇到吧，要么是自己考慮不全造成的，要么是后端開發(fā)人員丟失數(shù)據(jù)或者傳輸錯(cuò)誤數(shù)據(jù)類型造成的。因此對(duì)數(shù)據(jù)訪問時(shí)的非空判斷就變成了一件很繁瑣且重要的事情，下面就介紹ES6一些新的語法來方便我們開發(fā)。

1. 可選鏈操作符 (Optional Chaining Operator - ?.)

可選鏈操作符允許您在訪問對(duì)象屬性或調(diào)用函數(shù)時(shí)，檢查中間的屬性是否存在或?yàn)?null/undefined。如果中間的屬性不存在或?yàn)榭?，表達(dá)式將短路返回 undefined，而不會(huì)引發(fā)錯(cuò)誤。

1.1 用法示例

const obj = {
 foo: {
   bar: {
     baz: 42
   }
 }
};
// 使用可選鏈操作符
const value = obj?.foo?.bar?.baz; // 如果任何中間屬性不存在或?yàn)榭眨瑅alue 將為 undefined
// 傳統(tǒng)寫法
 const value = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手動(dòng)檢查每個(gè)屬性

1.2 使用場景

鏈?zhǔn)皆L問對(duì)象屬性，而不必手動(dòng)檢查每個(gè)屬性是否存在。

調(diào)用可能不存在的函數(shù)。

2. 空值合并操作符 (Nullish Coalescing Operator - ??)

空值合并操作符用于選擇性地提供默認(rèn)值，僅當(dāng)變量的值為 null 或 undefined 時(shí)，才返回提供的默認(rèn)值。否則，它將返回變量的實(shí)際值。

2.1 用法示例

const foo = null;
const bar = undefined;
const baz = 0;
const qux = '';
cosnt xyz = false;
const value1 = foo ?? 'default'; // 'default'，因?yàn)?foo 是 null
const value2 = bar ?? 'default'; // 'default'，因?yàn)?bar 是 undefined
const value3 = baz ?? 'default'; // 0，因?yàn)?baz 不是 null 或 undefined
const value4 = qux ?? 'default'; // ''，因?yàn)?qux 不是 null 或 undefined
const value5 = xyz ?? 'default'; // false，因?yàn)?xyz 不是 null 或 undefined
//可能存在的傳統(tǒng)寫法，除了null,undefined, 無法兼容0、''、false的情況,使用時(shí)要特別小心
const value1 = foo || 'default'; // 'default'
const value2 = bar || 'default'; // 'default'
const value3 = baz || 'default'; // 'default'，因?yàn)?0 轉(zhuǎn)布爾類型是 false
const value4 = qux || 'default'; // 'default'，因?yàn)?'' 轉(zhuǎn)布爾類型是 false
const value5 = xyz || 'default'; // 'default'

2.2 使用場景

提供默認(rèn)值，而不使用 falsy 值（如空字符串、0 等）。

在處理可能為 null 或 undefined 的變量時(shí)，選擇性地提供備用值。

3. 空值合并賦值操作符 (Nullish Coalescing Assignment Operator - ??=)

空值合并賦值操作符結(jié)合了空值合并操作符和賦值操作符。它用于將默認(rèn)值分配給變量，僅當(dāng)變量的值為 null 或 undefined 時(shí)。

3.1 用法示例

let foo = null;
let bar = undefined;
let baz = 0;
foo ??= 'default'; // 'default'，因?yàn)?foo 是 null
bar ??= 'default'; // 'default'，因?yàn)?bar 是 undefined
baz ??= 'default'; // 0，因?yàn)?baz 的初始值不是 null 或 undefined