在最近发布的 ECMAScript 2020(ES11)中,添加了一个新的运算符——"nullish 合并操作符"(??),这个新的运算符可以很好地解决 JavaScript 语言中存在的 null 或者 undefined 值的问题,同时可以提高代码的可读性和简洁性。在本文中,我们将详细介绍 nullish 合并操作符的使用及其示例。
nullish 合并操作符的使用
在 JavaScript 中,如果一个变量的值为 null 或 undefined,它在条件判断中会被视为 false。这可能会导致一些意外的行为。例如,如果使用 || 运算符来设置默认值,当变量的值为 null 或 undefined 时,它可能会选择第二个值,而不是默认值。举个例子:
----- --- - ---- -- ---------- -- --------- ----- --- - --------- -- ---------- -- ---------
这是因为 || 运算符在遇到一个 “假值” 时会选择后面的值。而 "nullish 合并操作符" 则会在编写默认值时更加安全和直观,因为只有在变量的值为 null 或 undefined 时才会使用默认值。例如:
----- --- - ---- -- ---------- -- --------- ----- --- - --------- -- ---------- -- --------- ----- --- - - -- --- -- -
上面的代码中,?? 运算符会先检查变量的值是否为 null 或 undefined,如果是,则选择后面的值,如果不是,则选择变量的值。与此相反,|| 运算符会在变量的值为 false 时选择后面的值。
实例:使用 nullish 合并操作符设置默认值
现在来看一个示例,它展示了如何使用 nullish 合并操作符来设置默认值。假设我们正在编写一个函数,读取一个数组中的特定索引。如果数组索引不存在或值为 null 或 undefined,则返回默认值。
-------- ------------- ------ ------------- - ------ ---------- -- ------------- - ----- --- - --- -- ----- -- ----------- ------------------------- -- ------------ -- --------- ------------------------- -- ------------ -- --------- ------------------------- -- ------------ -- - ------------------------- -- ------------ -- -
上面的代码中,getValue 函数使用了 nullish 合并操作符来确定值是否为 null 或 undefined,如果是,则返回 defaultValue,否则返回 arr[index]。
实例:使用 nullish 合并操作符合并对象
另一个示例是 nullish 合并操作符在合并对象时的使用。假设我们需要将两个对象合并,如果属性值为 null 或 undefined,则使用默认值。以下代码演示了这个过程:
----- ---- - - -- -- -- ----- -- --------- -- ----- ---- - - -- -- -- -- -- --------- -- ----- ------ - - -- ------ -- ------- -- ------ -- ------- -- ------ -- ------- -- ------ -- ------- -- -------------------- -- - -- -- -- -- -- -- -- --------- -
上面的代码中,result 对象通过使用 nullish 合并操作符来设置 obj1 和 obj2 的默认值,这样做将更加安全和直观,而不会出现意外结果。
总结
在本文中,我们介绍了 ECMAScript 2020(ES11)中的 nullish 合并操作符,它可以简化代码,提高可读性和安全性。通过了解简单的示例,我们可以开始尝试在我们的项目中使用这个新的运算符,以更好地管理 null 和 undefined 的值,并以更直观和安全的方式设置默认值。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65b86895add4f0e0ff0f4555