快捷導(dǎo)航

JavaScript void 運(yùn)算符詳解

更新時(shí)間：2025年01月15日 10:48:46 作者：北北~Simple

JavaScript中的void運(yùn)算符用于執(zhí)行一個(gè)表達(dá)式但不返回任何值,常用于阻止鏈接的默認(rèn)行為或在不跳轉(zhuǎn)頁(yè)面的情況下觸發(fā)點(diǎn)擊事件,本文介紹JavaScript void 運(yùn)算符相關(guān)操作,感興趣的朋友跟隨小編一起看看吧

JavaScript void 運(yùn)算符

void定義：

void 運(yùn)算符對(duì)給定的表達(dá)式進(jìn)行求值，然后返回undefined。void是一個(gè)一元運(yùn)算符，接受單個(gè)操作數(shù)，可以是任何類型，返回一個(gè) undefined。

void語(yǔ)法：

void 在表達(dá)式的左邊，void 右邊的表達(dá)式可以是帶括號(hào)形式（例如：void(0)），也可以是不帶括號(hào)的形式（例如：void 0）。

void作用：

當(dāng)我們只需要評(píng)估一個(gè)表達(dá)式而不是返回其值時(shí)，void關(guān)鍵字的重要性就發(fā)揮出來(lái)了。這意味著，通過(guò)使用它，我們可以阻止瀏覽器顯示表達(dá)式執(zhí)行的結(jié)果。

我們?cè)谧柚筧標(biāo)簽的默認(rèn)行為時(shí)候就使用到void

<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a>
<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
  這個(gè)鏈接點(diǎn)擊之后不會(huì)做任何事情，如果去掉 void()，
  點(diǎn)擊之后整個(gè)頁(yè)面會(huì)被替換成一個(gè)字符 0。
</a>

立即調(diào)用的函數(shù)表達(dá)式
在使用立即執(zhí)行的函數(shù)表達(dá)式時(shí)，可以使用void運(yùn)算符讓js引擎吧一個(gè)function關(guān)鍵字識(shí)別成函數(shù)表達(dá)式而不是函數(shù)聲明
無(wú)

有void:

在一些箭頭函數(shù)中，若此函數(shù)沒(méi)有對(duì)應(yīng)的返回值，可能會(huì)造成一些不可預(yù)估的問(wèn)題，安全起見，對(duì)沒(méi)有返回的函數(shù)，可以在前面加上void

var fos = () => {
  return void bar()
}
fos()

為什么要使用void

void和undefined有什么區(qū)別：
undefined屬于基礎(chǔ)類型且還是全局類型，全局類型還可以被更改、被賦值。
void屬于運(yùn)算符，運(yùn)算符只能被求值計(jì)算，不能被賦值更改。
所以在安全層面上來(lái)說(shuō) void比undefined更安全。所以在源碼中一般都是使用void xx這種方式來(lái)獲取undefined，比直接使用undefined來(lái)的更加安全可靠。
如：

export default function isUndefined(input) {
    return input === void 0;
}

JavaScript:void(0) 用法及常見問(wèn)題解析

javascript:void(0); 是一種在JavaScript和網(wǎng)頁(yè)開發(fā)中經(jīng)常使用的技術(shù)，尤其在處理鏈接的行為時(shí)。本文將深入探討 javascript:void(0); 的用法，以及在使用過(guò)程中可能遇到的常見問(wèn)題和解決方法。

什么是 javascript:void(0);？

javascript:void(0); 是一個(gè)JavaScript表達(dá)式，用于防止鏈接在被點(diǎn)擊時(shí)執(zhí)行其默認(rèn)行為（即導(dǎo)航到一個(gè)新頁(yè)面）。void 是一個(gè)運(yùn)算符，用于執(zhí)行一個(gè)表達(dá)式但不返回任何值。
為什么使用 javascript:void(0);？

在HTML中，<a> 標(biāo)簽通常用于創(chuàng)建鏈接。如果不希望點(diǎn)擊鏈接時(shí)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面或重新加載當(dāng)前頁(yè)面，可以使用 javascript:void(0);。這樣，鏈接會(huì)保持在當(dāng)前頁(yè)面，同時(shí)可以通過(guò)JavaScript添加其他功能，如觸發(fā)彈窗、開啟模態(tài)框等。

使用示例

以下是一個(gè)簡(jiǎn)單的示例，展示如何使用 javascript:void(0); 來(lái)防止鏈接默認(rèn)行為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript:void(0) 示例</title>
</head>
<body>
    <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="alert('Hello, world!')">點(diǎn)擊我</a>
    <script>
        // JavaScript 代碼可以放在這里
    </script>
</body>
</html>

在這個(gè)例子中，點(diǎn)擊鏈接會(huì)彈出一個(gè)對(duì)話框，而不是跳轉(zhuǎn)到另一個(gè)頁(yè)面或重新加載當(dāng)前頁(yè)面。

常見問(wèn)題及解決方法

使用 javascript:void(0); 與 # 的區(qū)別

javascript:void(0); 完全阻止鏈接的默認(rèn)行為，而 # 會(huì)改變URL（添加 # 到URL末尾），可能導(dǎo)致頁(yè)面滾動(dòng)到頂部。
在實(shí)際應(yīng)用中，推薦使用 javascript:void(0); 來(lái)避免這種行為，尤其是在單頁(yè)應(yīng)用（SPA）中，這可以防止不必要的滾動(dòng)行為和歷史記錄變動(dòng)。

無(wú)法觸發(fā)鏈接的點(diǎn)擊事件

如果發(fā)現(xiàn) javascript:void(0); 阻止了鏈接的點(diǎn)擊事件，確保JavaScript事件處理器正確綁定。在現(xiàn)代JavaScript開發(fā)中，推薦使用事件監(jiān)聽器來(lái)代替 onclick 屬性，例如：

<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="myLink">點(diǎn)擊我</a>
<script>
    document.getElementById('myLink').addEventListener('click', function() {
        alert('Hello, world!');
    });
</script>

無(wú)法通過(guò)鍵盤訪問(wèn)

javascript:void(0); 鏈接可能會(huì)導(dǎo)致無(wú)法通過(guò)鍵盤訪問(wèn)，這對(duì)于保持網(wǎng)站的無(wú)障礙性是一個(gè)問(wèn)題。為了改進(jìn)無(wú)障礙性，確保鏈接或按鈕可以通過(guò)鍵盤（通常是 Tab 鍵和 Enter 鍵）訪問(wèn)，并適當(dāng)使用 role 和 tabindex 屬性。

結(jié)論

javascript:void(0); 是一個(gè)有用的技巧，可以在不跳轉(zhuǎn)頁(yè)面的情況下觸發(fā)鏈接的點(diǎn)擊事件。然而，在使用時(shí)需要注意提高網(wǎng)站的無(wú)障礙性，并確保不影響用戶體驗(yàn)。理解 javascript:void(0); 的行為和限制可以幫助開發(fā)者更有效地使用這一技術(shù)。

到此這篇關(guān)于JavaScript void 運(yùn)算符的文章就介紹到這了,更多相關(guān)JavaScript void 運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: