然冬 ·void
void 運算符 對給定的表達式進行求值，然后返回 undefined。(MDN)
表達式前面如果帶有 void 關(guān)鍵字，則表達式的結(jié)果就會被忽略，并將 undefined 作為結(jié)果。
從業(yè)務(wù)上來看，void 關(guān)鍵字并不常用。
1. 用于調(diào)用函數(shù)表達式
當想讓一個函數(shù)立即實行的時候，需要讓 JavaScript 將一個函數(shù)識別為表達式，void 關(guān)鍵字就能起到這個作用。
void function() {
alert('馬上執(zhí)行！沖沖沖！');
}();
但有局限性，如果需要獲取到函數(shù)的返回值，就不能使用 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);
});
如這個例子，函數(shù)返回了兩數(shù)之和與兩數(shù)之積的結(jié)果，但因為 void 關(guān)鍵字，實際 result 變量被賦值為 undefined，導(dǎo)致程序無法正常執(zhí)行。
2. 內(nèi)聯(lián)在 HTML 中，阻止 a 標簽的默認事件
<a> 標簽的 href 屬性，可以用來執(zhí)行 JavaScript 代碼。
通?？梢赃@么寫：
<a href="javascript: void;">跳轉(zhuǎn)！</a>
<a href="javascript: void 0;">跳轉(zhuǎn)！</a>
<a href="javascript: void (0);">跳轉(zhuǎn)！</a>
這三行代碼的效果是一樣的。
如果 <a> 標簽的 href 屬性是 javascript:表達式;，則會執(zhí)行表達式的內(nèi)容，并將頁面的內(nèi)容設(shè)置為表達式的結(jié)果，如果表達式的結(jié)果是 undefined，則什么都不做。
根據(jù)這個規(guī)則，void 就起到了作用，但其實不寫表達式，依然能達到這個效果。
這樣的效果和上面使用 void 關(guān)鍵字的方式是等價的，這也是常用的方式。
但碰到需要使用 <a> 標簽執(zhí)行函數(shù)的時候，void 就變得相對關(guān)鍵。
<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，頁面內(nèi)容就會發(fā)生改變，因為 log 函數(shù)存在非 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 一樣，結(jié)果就符合預(yù)期了，具體的添加、刪除操作，再通過綁定對應(yīng)的事件來實現(xiàn)。
3. 小結(jié)
void 的使用場景有限，但在某些情況下可以提高代碼的健壯性，如明確不需要結(jié)果的場景下，加上 void 關(guān)鍵字，這樣可以避免未來表達式結(jié)果的改變帶來的問題。
2025 imooc.com All Rights Reserved |