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 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
javascript中Number的方法小结
Nov 21 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
vue文件运行的方法教学
Feb 12 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 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创建Cookie数组的详解
2013/07/03 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jQuery 选择器理解
2010/03/16 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
javascript制作2048游戏
2015/03/30 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
森马旗舰店双十一营销方案
2014/09/29 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年个人委托书范本
2014/10/13 职场文书
人事任命通知书
2015/04/21 职场文书
介绍信格式样本
2015/05/05 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
车位出租协议书范本
2016/03/19 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL