javascript按位非运算符的使用方法


Posted in Javascript onNovember 14, 2013

~:按位非操作符由一个波浪线(~)表示,执行按位非的结果就是返回数值的反码。

var num1 = 3;    // 我的幸运数字是3
var num2 = ~(num1);
console.log(num2)  //  "-4"
var num3 = -3;  
var num4 = ~(num3);
console.log(num4)  //  "2"
console.log(~(0))  //  "-1"

没错,现在我们知道了~运算符的原理了。开心吗?。。。不开心,虽然这一章,我看过好多次。。。因为我从来就没用过,实在是惭愧啊。大家觉得这个运算符可以用在什么地方呢?恩。。。沉思一下,放一段同事的代码:
if (~item[search_key].toLowerCase().indexOf(query)) {
                        _results.push(item);
 }

代码:
if( str.indexOf(query) != -1 )  or  if( str.indexOf(query) >= 0)

原理分析:
通过str.indexOf(query)最后得出的值,无外乎不过两种:
1. str中包含query字符串,则值是0或正整数,此时:!!(~str.indexOf(query)) === true(或者这样转换 Boolean(~str.indexOf(query)) === true)
2. srt中不包含query字符串,则值为-1,此时:!!(~str.indexOf(query)) === false
因此通过加上一个~就能很好的对indexOf的查询结果进行判断了。清爽无比,从此再也没有头屑的烦恼了。。哈哈!
最后我们来分析一下效率吧,印象中位运算的效率应该比较运算符高。来段代码:
var str = "hutaoer go go go!!!!! My lucky number is 33!!";
    var query = 33;
    var timeStart1 = new Date() - 0;
    for(var i = 0; i < 100000000; i++) {
        ~str.indexOf(query)
    }
    var timeEnd1 = new Date() - 0;
    console.log('~ cost time:' + (timeEnd1 - timeStart1)); 
    // ~ cost time:9954  循环次数:10000000 
    // ~ cost time:104  循环次数: 100000
    var timeStart2 = new Date() - 0;
    for(var j = 0; j < 100000000; j++) {
        str.indexOf(query) >= 0
    }
    var timeEnd2 = new Date() - 0;
    console.log('>= cost time:' + (timeEnd2 - timeStart2)); 
   // >= cost time:10120  循环次数:10000000

程序更新:原来的测试代码在分割线上面不变。代码如下:
    var str = "hutaoer go go go!!!!! My lucky number is 33!!";
    var query = 33;
    var timeStart1 = new Date() - 0;
    for(var i = 0; i < 1000000; i++) {
        ~str.indexOf(query)
    }
    var timeEnd1 = new Date() - 0;
    console.log('~ cost time:' + (timeEnd1 - timeStart1));
    //  循环1000000次  127ms
    var timeStart2 = new Date() - 0;
    for(var j = 0; j < 1000000; j++) {
        str.indexOf(query) >= 0
    }
    var timeEnd2 = new Date() - 0;
    console.log('>= cost time:' + (timeEnd2 - timeStart2));
    // 循环1000000次 101ms
    var timeStart3 = new Date() - 0;
    for(var k = 0; k < 1000000; k++) {
        Boolean(~str.indexOf(query))
    }
    var timeEnd3 = new Date() - 0;
    console.log('add Boolean cost time:' + (timeEnd3 - timeStart3));
    // 循环1000000次 129ms
    var timeStart4 = new Date() - 0;
    for(var k = 0; k < 1000000; k++) {
        !!(~str.indexOf(query))
    }
    var timeEnd4 = new Date() - 0;
    console.log('add !! cost time:' + (timeEnd4 - timeStart4));
    // 循环10000000次 103ms
   

其实,对于一次运算本身来说,相差无几,只是在循环次数过大,比如超过了10000000次,效率才会有一些差距。
【更新 2013.10.27 17:28】通过修改后的测试,我们可以发现,“按位非”这中写法也许并非是效率最高的,表现最好的居然是我以前常用的写法,采用比较运算符。这确实让我很吃惊。有时候,人往往容易被常识,表象所迷惑,但亲自去尝试后,或许会有不一样的发现或得出其他的结果。今天,我算吸取教训了。
在评论中,同学们都比较反对这种非常见的写法,毕竟这些技巧可能会给阅读代码的同学造成困扰。如果不知道原理的话,甚至让人费解。或许,直接用一些简单的逻辑和常见的运算符,会是更好的选择?你们觉得呢?
因此平时写代码的时候,用哪种写法都可以。但是希望我们能将这些技巧记住,关键时刻或许就能派上用场。
Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 #Javascript
js取消单选按钮选中示例代码
Nov 14 #Javascript
js实现目录定位正文示例
Nov 14 #Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 #Javascript
javascript间隔刷新的简单实例
Nov 14 #Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 #Javascript
js中prototype用法详细介绍
Nov 14 #Javascript
You might like
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
JavaScript 绘制饼图的示例
2021/02/19 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
通过Pandas读取大文件的实例
2018/06/07 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
趣味运动会开幕词
2015/01/28 职场文书
党员读书活动心得体会
2016/01/14 职场文书