Javascript中霸道的void

269 阅读2分钟

微信公众号:暮北林
今天记录一下Javascript void操作符

void的定义/描述

对给定的表达式进行求值,然后返回 undefined。

语法

void expression // viod 跟一个表达式
void (expression)
//两种写法都可以 表达式不加括号也可以正常运行 推荐使用加括号的

功能

一: 表达式转换

void function test() {
  console.log(111)
}()
// 111

解析:

  • void加函数声明
  • 因为表达式才能被执行
  • 可以正确打印111 说明void可以强制把后面的语法转化为表达式

二:对表达式求值并返回undefined

var a = 0, b = 3, c = 20, d = 5;
d = void (a++, b+=3, c*=20);
console.log(a, b, c, d);
// 1 6 400 undefined

解析:

  • 逗号运算符从左往右依次计算返回最后一个计算值
  • 但是上述代码d为 undefined
  • 说明void的很霸道啊 强制返回undefined

三:JavaScript URIs

<a href="javascript:void(0);">
  这个链接点击之后不会做任何事情,如果去掉 void(),
  点击之后整个页面会被替换成一个字符 0。
</a>
<a href="javascript:void(document.body.style.backgroundColor='green');">
  点击这个链接会让页面背景变成绿色。
</a>

解析:

  • 当用户点击一个以 javascript: URI 时,它会执行URI中的代码,然后用返回的值替换页面内容,除非返回的值是undefined。void运算符可用于返回undefined
  • javascript:; 是利用伪协议来执行Javascript代码
  • MDN解释会让页面渲染一个0字符串 测试后Chrome/Firefox都没有具体现象
  • 目的还是阻止了a标签的默认事件 既不让页面渲染其他东西也不进行跳转

javascript: void(0);与href="#"的区别

<a href="#">#</a> href可以指向一个锚点链接
<a href="javascript:void(0);"> 浏览器不会做出任何反应
<p>
  <a href="#">#</a>
</p>
<p>
 <a href="##">##</a>
</p>
<p>
  <a href="###">###</a>
/p>
<p>
  <a href="####">####</a>
</p>
<p>
  <a href="#####">#####</a>
</p>
<script type="text/javascript">
   var n = 0 ;
   window.onhashchange = function(){
      alert(++n) ;
   }
</script>
```&emsp;
解析:
- 测试不管是#个数&emsp;都会触发hashchange事件
- 点击herf="#n" URL/地址栏会改变&emsp;n表示有几个#&emsp;

### 有兴趣还有更多的href
```html
<a href="#"></a>
<a href="#nogo"></a>
<a href="##"></a>
<a href="###"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:;"></a>
<a href="javascript:"></a>

参考链接

developer.mozilla.org/zh-CN/docs/…
www.cnblogs.com/Qian123/p/5…
www.runoob.com/js/js-void.…

我的公众号