void

之前在看vue3源码过程中，碰到某些分支判断undefined时，会使用key !== void 0的方式进行判断，而不是key !== undefined。那么为什么使用void 0，而不是undefined呢？在回答这个问题前，我们先看下undefined与void：

undefined

MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined

undefined是JavaScript的基本数据类型之一。它是全局对象window的一个属性。自ECMAscript5标准以来undefined是一个不能被配置，不能被重写的属性。也就是说在全局作用域无法更改undefined。

undefined = 'test'
consle.log(undefined) // undefined

但在局部作用域下，undefined是可以被修改的:

(function print() {
  var undefined = 1
  console.log(undefined, typeof undefined) // 1, 'numbder'
})()

在局部作用域中undefined被当做成一个变量，可以对其随意修改。

如果一个函数没有返回值，那么它会返回一个undefined。

function print(x) {
  console.log(x)
}

const res = print(1)

console.log(res) // undefined

void

MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

语法：void expression

void运算符后面的表达式会被执行，并且void总是返回undefined。

console.log(void '') // undefined
console.log(void 0) // undefined
console.log(void true) // undefined
console.log(void {}) // undefined
console.log(void function(){}) // undefined


void function (){
  console.log('test') // 打印test
}()

void (1+1) // undefined
void 1+1 // NaN

void运算符的优先级要高于+，所以在void 1+1中会先计算void 1，返回undefined，然后+1，undefined+1=NaN

void运算符的几种用法：

立即调用的函数表达式：

// 常规的IIFE
(function test() {
  // ...
})()

// 使用void
void function test() {
  
}()

使用void后，function会被识别为函数表达式而不是函数声明语句

Javascript URIs：用以下方式，将a标签点击无响应。

html

<a href="javascript: void(0)">
  DEMO
</a>

在箭头函数中避免泄漏

button.onclick = () => void doSomething();

当doSomething的返回值发生变化后，不会改变onclick的行为。

综上可以看出void 0 相比较undefined的优势：

不必担心undefined被修改。
字符更短，节省字节。
一些压缩工具会将undefined转为void 0，使用void 0会加快压缩速度。

void #

undefined #

void #

void

undefined

void