void 0是什么

场景

当我们在 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。