然冬 ·void
void 運算符 對給定的表達式進行求值，然后返回 undefined。(MDN)
表達式前面如果帶有 void 關鍵字，則表達式的結果就會被忽略，并將 undefined 作為結果。
從業務上來看，void 關鍵字并不常用。
1. 用于調用函數表達式
當想讓一個函數立即實行的時候，需要讓 JavaScript 將一個函數識別為表達式，void 關鍵字就能起到這個作用。
void function() {
alert('馬上執行！沖沖沖！');
}();
但有局限性，如果需要獲取到函數的返回值，就不能使用 void。
var num1 = 1;
var num2 = 2;
var result = void function(number1, number2) {
return [number1 + number2, number1 * number2];
}(num1, num2);
result.forEach(function(res) {
console.log(res);
});
如這個例子，函數返回了兩數之和與兩數之積的結果，但因為 void 關鍵字，實際 result 變量被賦值為 undefined，導致程序無法正常執行。
2. 內聯在 HTML 中，阻止 a 標簽的默認事件
<a> 標簽的 href 屬性，可以用來執行 JavaScript 代碼。
通常可以這么寫：
實例演示
預覽
復制
<a href="javascript: void;">跳轉！</a>
<a href="javascript: void 0;">跳轉！</a>
<a href="javascript: void (0);">跳轉！</a>
運行案例 點擊 "運行案例" 可查看在線運行效果
這三行代碼的效果是一樣的。
如果 <a> 標簽的 href 屬性是 javascript:表達式;，則會執行表達式的內容，并將頁面的內容設置為表達式的結果，如果表達式的結果是 undefined，則什么都不做。
根據這個規則，void 就起到了作用，但其實不寫表達式，依然能達到這個效果。
這樣的效果和上面使用 void 關鍵字的方式是等價的，這也是常用的方式。
但碰到需要使用 <a> 標簽執行函數的時候，void 就變得相對關鍵。
實例演示
預覽
復制
<script>
function log(who) {
console.log('點擊了：' + who);
return who;
}
</script>
<a href="javascript: log('add');">添加</a>
<a href="javascript: log('update');">修改</a>
<a href="javascript: log('delete');">刪除</a>
運行案例 點擊 "運行案例" 可查看在線運行效果
這種情況如果不加 void，頁面內容就會發生改變，因為 log 函數存在非 undefined 的返回值。
實例演示
預覽
復制
<script>
function log(who) {
console.log('點擊了：' + who);
return who;
}
</script>
<a href="javascript: void log('add');">添加</a>
<a href="javascript: void log('update');">修改</a>
<a href="javascript: void log('delete');">刪除</a>
運行案例 點擊 "運行案例" 可查看在線運行效果
加上 void 一樣，結果就符合預期了，具體的添加、刪除操作，再通過綁定對應的事件來實現。
3. 小結
void 的使用場景有限，但在某些情況下可以提高代碼的健壯性，如明確不需要結果的場景下，加上 void 關鍵字，這樣可以避免未來表達式結果的改變帶來的問題。
2025 imooc.com All Rights Reserved |