场景
当我们在 ts
中使用可选链时,会发现,最后的编译代码可能如下所示
const a = {
name: 'fnn',
age: 18
};
const b = a?.age
// 编译后如下
const b = a === null || a === void 0 ? void 0 : a.age;
export {};
这是我们发现 a?.age
这个判断会生成 a === null || a === void 0
那么 void 0
是什么呢
MDN
给出的解释是,对给定的表达式进行求值,然后返回 undefined
。
如下代码全部都返回 undefined
void 1;
void console.log('expression evaluated');
void function iife() {
console.log('iife is executed');
}();
void function test() {
console.log('test function executed');
};
有什么作用
void
运算符通常只用于获取undefined
的原始值,一般使用void(0)
(等同于void 0
)- 这个运算符允许在表达式执行完成时,然后返回
undefined
值。 ES5
之前undefined
是可以被修改的,因此undefined
的值可能是不准确的
JavaScript URI
当用户点击一个以 javascript:
开头的 URI
时,它会执行 URI
中的代码,然后用返回的值替换页面内容,除非返回的值是 undefined
。void
运算符可用于返回 undefined
<a href="javascript:void(0);">
这个链接点击之后不会做任何事情
</a>
<a href="javascript:void(document.body.style.backgroundColor='green');">
点击这个链接会让页面背景变成绿色。
</a>
箭头函数使用
箭头函数标准中,允许在函数体不使用括号来直接返回值。如果右侧调用了一个原本没有返回值的函数,其返回值改变后,则会导致非预期的副作用。
当函数返回值不会被使用到的时候,应该使用 void
运算符,来确保 API
改变时,并不会改变箭头函数的行为。
button.onclick = () => void doSomething();
这确保了当 doSomething
的返回值从 undefined
变为 true
的时候,不会改变代码的行为,因为 void
始终返回 undefined
。