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学习网址备忘
May 29 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
JS简单计算器实例
Jan 20 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
用原生js做单页应用
Jan 17 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
微信小程序中显示倒计时代码实例
May 09 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自动加载机制的深入分析
2013/06/08 PHP
php调用c接口无错版介绍
2014/03/11 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
Move.js入门
2017/02/08 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
详解Python学习之安装pandas
2019/04/16 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
推荐信格式范文
2014/05/09 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
节水倡议书
2015/01/19 职场文书
员工家属慰问信
2015/03/24 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL