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源码学习javascript(二)
Dec 27 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 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实现两个数组相加的方法
2015/02/17 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
python 切片和range()用法说明
2013/03/24 Python
使用Python生成XML的方法实例
2017/03/21 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
大四学生思想汇报
2014/01/13 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
小学教师师德反思
2014/02/03 职场文书
有趣的广告词
2014/03/18 职场文书
文案策划求职信
2014/04/14 职场文书
教师一帮一活动总结
2014/07/08 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
人生遥控器观后感
2015/06/11 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS