微信公众号:暮北林
今天记录一下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>
``` 
解析:
- 测试不管是#个数 都会触发hashchange事件
- 点击herf="#n" URL/地址栏会改变 n表示有几个# 
### 有兴趣还有更多的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.…