在 ES11 (2020) 中,新增了一个 nullish 合并运算符(nullish coalescing operator)。 该运算符使用两个问号(??)表示,可以轻松地处理 null 或 undefined 值。
常规运算符和问题
在 JavaScript 中,常规的逻辑运算符有并且(&&)和或者(||)。 但是和这两个运算符搭配使用时会有一些问题。
如果一个变量的值为 falsy 值(如空字符串、null、undefined),使用 || 运算符时,会将变量的值转换为 false,进而使用运算符左边的值。 同样地,如果使用 && 运算符时,变量的值也会被转换为 false。但是,在这种情况下会使用运算符右边的值。
let x = false || 'Hello'; // 'Hello' let y = '' && 'World'; // ''
对于以上的运算符组合,如果变量的值为 0、空字符串或者空数组时,也同样存在问题。
let a = 0 || 10; // 10 let b = '' && 'Hello'; // '' let c = [] || 'World'; // []
以上代码中,0 被转换为 false,因此 a 的值为 10; '' 被转换为 false,因此 b 的值为 ''; [] 被视为 truthy 值,最终变量 c 的值为 []。
nullish 合并运算符的作用
在 ES11 中,为了解决以上问题,引入了 nullish 合并运算符。 nullish 合并运算符只在变量值为 null 或 undefined 时返回右侧的值,其他情况返回左侧的值。
let x = null ?? 'Hello'; // 'Hello' let y = undefined ?? 'World'; // 'World'
对于 null 或 undefined 的变量值,无论左侧使用何种运算符,都会返回右侧的值。这样就能够正确地处理空值,避免了上述的问题。
typeof 运算符和 nullish 合并运算符的配合使用
在计算变量值时,需要知道变量的类型。 这种情况下,使用 typeof 运算符可以获得变量的类型信息。
在使用 nullish 合并运算符时,需要特别注意使用 typeof 运算符进行判断,以避免类型错误。
let obj = { name: 'Alice' }; let x = obj?.age ?? 'unknown'; // 'unknown'
在上述代码中,obj 对象没有 age 属性。如果使用 obj.age,将会报错。 在此处使用 ?. 运算符,代表如果对象存在 age 属性,就返回该属性值;如果不存在,就忽略该属性。 结果得到 undefined 值,这时就需要使用 nullish 合并运算符,使用默认值 'unknown'。
在使用 typeof 运算符判断类型时,需要注意:
- typeof null 的值为 'object',是一种特殊情况。
- 在 JavaScript 中,NaN 类型可以被视为 number 类型,需要特别处理。
- 在其他语言(如 TypeScript)中,也需要注意 null 和 undefined 类型的区别。
let num = NaN; let x = typeof num === 'number' && !isNaN(num) ? num : 0; // 0
在上述代码中,判断 num 是否为 number 类型,并且 num 不是 NaN 值。如果符合条件,将 num 的值赋给 x,否则使用默认值 0。
总结
nullish 合并运算符能够避免常规运算符的问题,处理 null 和 undefined 值; 使用 typeof 运算符能够得到变量的类型信息,可以和 nullish 合并运算符搭配使用; 注意 null 和 undefined 类型的区别,避免类型错误。 如此使用 nullish 合并运算符将变得更加简单和有效。
示例代码:
-- -------------------- ---- ------- --- ---- - ----- --- --- - ---------- --- ------- - ---------- --- ------ - - ----- ------- -- --- --- - ---- ---------------- -- --------- -- --------- --------------- -- ---- -- -- ----------------------- -- ----------- -- --------- ------------------ --- --- -------- -- ----------- - --- - --- -- -
上述代码中,使用了 nullish 合并运算符和 typeof 运算符,能够正确地处理变量值和类型信息。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64f97e5ef6b2d6eab30fd5af