记录一下空值合并操作符 ??(Nullish coalescing operator) 及 可选链操作符 ?. (Optional chaining)
// 空值合并操作符 ?? (Nullish coalescing operator)
// 只有当左侧为null和undefined时,才会返回右侧的数
const foo001 = null ?? 'default string';
console.log(foo001);
// expected output: "default string"
const foo002 = undefined ?? 'default string';
console.log(foo002);
// expected output: "default string"
const foo003 = 0 ?? 42;
console.log(foo003);
// expected output: 0
/*
注意:
?? 运算符不能与 AND 或 OR 运算符共用
(来自 MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing)
*/
// null || undefined ?? "foo"; // 抛出 SyntaxError
// true || undefined ?? "foo"; // 抛出 SyntaxError
// ↑ 上面两行的写法也会被eslint校验报错 '||' and '??' operations cannot be mixed without parentheses
// 但是,如果使用括号来显式表明运算优先级,是没有问题的:
(null || undefined) ?? "foo"; // 返回 "foo"
/*
此外:
与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值(false)时返回右侧操作数。
比如为假值(例如,'' 或 0)时。
见下面的例子。
*/
const foo004 = '' || 'default string';
console.log(foo004);
// expected output: "default string"
const foo005 = '' ?? 'default string';
console.log(foo005);
// expected output: ""
const foo006 = 0 || 42;
console.log(foo006);
// expected output: 42
const foo007 = 0 ?? 42;
console.log(foo007);
// expected output: 0
// 可选链操作符 ?. (Optional chaining)
// 可选链操作符 ?. 允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。
// "?."操作符的功能类似于 "."链式操作符,不同之处在于,如果引用的属性不存在时 (null 或者 undefined) ,不会引发错误,而是返回 undefined。
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined
console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined
完结。
同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/guggdutsegxzqrgl
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。