在前端开发中,有时会遇到需要将某个变量的值设置为默认值的情况。以前的做法是使用逻辑运算符 ||
,但是这种方法存在一些不足之处,例如当变量的值为 false
、0
或 ''
时,也会被认为是不存在的值,从而导致默认值被赋值给变量。为了解决这个问题,ES11 引入了一种新的操作符——nullish coalescing 操作符(??
),本文将详细介绍如何使用这个操作符优化代码逻辑。
nullish coalescing 操作符的使用
nullish coalescing 操作符是一个二元运算符,它用于判断一个表达式是否为 null 或 undefined,如果是,则返回指定的默认值。示例代码如下:
const foo = null ?? 'default'; // 'default' const bar = undefined ?? 'default'; // 'default' const baz = 0 ?? 'default'; // 0 const qux = '' ?? 'default'; // ''
可以看到,??
操作符的作用是如果左侧表达式的值为 null
或 undefined
,则返回右侧指定的默认值,否则返回左侧表达式的值。这种行为与逻辑运算符 ||
有所不同,||
会将左侧表达式的值转换为布尔值,如果左侧表达式的值可以转换为 false
的值,则返回右侧的默认值。
使用 nullish coalescing 操作符优化代码逻辑
使用 nullish coalescing 操作符可以使代码更加简洁、易读,避免因为一些隐式的类型转换带来的不必要的错误。下面将通过示例代码来演示如何使用 nullish coalescing 操作符优化代码逻辑。
示例一
-- -------------------- ---- ------- -- ---- -------- -------- -- - - - - -- ---------- -------------- --- - -- ---- -- -------- -------- -- - - --- ---------- -------------- --- - -------------- ---- -- ----- ------- -------------- ---- -- -----
在传统的写法中,当 y 的值为 '' 时,y 的值会被转化为 false,从而导致默认值被赋值给 y,而在 ES11 中,使用 nullish coalescing 操作符可以避免这个问题。
示例二
-- -------------------- ---- ------- -- ---- -------- -------- -- - - - - --- --------- - --------- - -- -------------- --- - -- ---- -- -------- -------- -- - - --- ---------- -------------- --- - -------------- ----------- -- ----- ------- -------------- ----------- -- ----- -------
在传统的写法中,需要手动判断 y 的值是否为 undefined,并且这种写法也存在一些不足之处,例如 y 的值为 null 时,这个判断就会失效。而在 ES11 中,使用 nullish coalescing 操作符则可以处理所有的情况。
结论
使用 nullish coalescing 操作符可以避免一些隐式类型转换的问题,使代码更加简洁、易读、易于维护。但是需要注意,这个操作符只能处理 null 或 undefined,如果需要判断一个变量是否存在,还需要使用传统的技巧。同时,也需要注意 ES11 的兼容性问题,因为并不是所有的浏览器都支持 nullish coalescing 操作符。
在实际开发中,我们应该根据具体情况选择适合的写法,尽可能避免代码的隐式类型转换,从而减少代码的错误率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/671c45e79babaf620faff7aa