I Don't Know JS

Appearance

Return to top
On this page

20. void 运算符

定义

void 运算符会对指定的表达式进行求值，然后返回 undefined。语法如下：

js
void expression
// 等效于
void (expression)
1
2
3

例如，void console.log(1+1) 会打印出 2，然后返回 undefined。

应用场景

1. 立即执行函数表达式（IIFE）

立即执行函数有两种声明方式：

js
// 方式1
(function(x) {
  console.log(x)
})('hello')

// 方式2
(function(x) {
  console.log(x)
}('hello'))

// hello 演示传参的方式
1
2
3
4
5
6
7
8
9
10
11

使用 void 也可以声明一个 IIFE：

js
void function(x){
  console.log(x)
}('hello')
1
2
3

TIP

实际上，void 定义立即执行函数的方式是一种 隔绝上下文 的形式，使用 !、!!、~、-、+ 等运算符也可以做到。只是因为 void 返回的永远是 undefined，更加纯粹，表示这个表达式不需要任何返回值。

js
!function(){
  console.log('hello')
}()
1
2
3

2. 去除 a 标签的默认跳转行为

html
<a href="javascript:void(0);">点击不会跳转</a>
1

等同于：

html
<a href="javascript:;">点击不会跳转</a>
1

也可以定义一些其他行为：

html
<a href="javascript:void(document.title='hello world');">点击修改页面 title</a>
1

3. 在箭头函数中避免泄漏

在箭头函数中不使用括号 {} 包裹函数体表示直接返回值，对于一个原本返回 undefined 的函数，有可能某次修改导致其返回了其他值，但我们又不需要这个值，所以可能会引起不可预料的副作用。

使用 void bar() 可以规避这个隐患。

js
const foo = () => void bar()
1

4. 简化 switch-case 表达式

switch 在判断多个 case 的时候要写很多重复的 break，这个时候可以使用 return void state 解决。

常规写法，要写很多 break：

js
switch (expression) {
  case 'value1':
    console.log('value1')
    break
  case 'value2':
    console.log('value2')
    break
  // ...
  default:
    console.log('default value')
    break
}
1
2
3
4
5
6
7
8
9
10
11
12

return void 优化：

js
switch (expression) {
  case 'value1':
    return void console.log('value1')
  case 'value2':
    return void console.log('value2')
  // ...
  default:
    return console.log('default value')
}
1
2
3
4
5
6
7
8
9