函数前的感叹号有什么作用？

技术背景

在 JavaScript 中，函数有声明和表达式两种形式。函数声明是定义函数的一种常见方式，但它不能直接调用，需要通过函数名来调用。而函数表达式可以立即调用，但在语法上与函数声明有所不同。使用感叹号 ! 可以将函数声明转换为函数表达式，从而实现立即调用的效果。

实现步骤

函数声明与调用

函数声明没有分号，需要通过函数名调用才能执行：

function foo() {}
// 调用函数
foo();

使用感叹号转换为函数表达式并调用

在函数前加上感叹号，将其转换为函数表达式，然后在末尾加上 () 即可立即调用函数：

!function foo() {}();

错误示例

直接在函数声明后加 () 会导致语法错误，因为不能在函数声明后直接跟参数：

function foo() {}(); // 语法错误

核心代码

常见的立即执行函数表达式写法

(function(){})();

使用感叹号的立即执行函数表达式

!function (){}();

对比节省字节的示例

原本的立即执行函数表达式写法：

(function (){}());

使用感叹号的写法：

!function (){}();

这里使用感叹号比使用括号 () 节省了一个字节。

感叹号使函数返回布尔值

!function bool() { return false; }(); // true
!function bool() { return true; }(); // false

最佳实践

代码压缩场景

在代码压缩时，为了节省文件大小，可以使用感叹号来实现立即执行函数表达式，节省字节。

避免语法错误

在需要立即调用函数时，使用感叹号将函数声明转换为函数表达式，避免直接在函数声明后加 () 导致的语法错误。

常见问题

为什么使用感叹号会返回布尔值？

! 是逻辑非运算符，它会将函数的返回值取反，从而返回一个布尔值。如果函数没有返回值，其返回值为 undefined，!undefined 为 true。

除了感叹号，还有哪些运算符可以实现类似效果？

+、-、~、void 等运算符也可以将函数声明转换为函数表达式并实现立即调用，但它们的返回值处理方式与感叹号不同。例如：

abcval = !function abc(){return true;}(); // abcval 等于 false
bcaval = +function bca(){return true;}(); // bcaval 等于 1
zyxval = -function zyx(){return true;}(); // zyxval 等于 -1
xyzval = ~function xyz(){return true;}(); 

为什么不能直接在函数声明后加 () 调用？

因为 JavaScript 语法规定，不能在函数声明后直接跟参数，这样会导致语法错误。需要将函数声明转换为函数表达式才能立即调用。