javascript按位非运算符的使用方法_基础知识

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

复制代码 代码如下:

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】通过修改后的测试,我们可以发现,“按位非”这中写法也许并非是效率最高的,表现最好的居然是我以前常用的写法,采用比较运算符。这确实让我很吃惊。有时候,人往往容易被常识,表象所迷惑,但亲自去尝试后,或许会有不一样的发现或得出其他的结果。今天,我算吸取教训了。
在评论中,同学们都比较反对这种非常见的写法,毕竟这些技巧可能会给阅读代码的同学造成困扰。如果不知道原理的话,甚至让人费解。或许,直接用一些简单的逻辑和常见的运算符,会是更好的选择?你们觉得呢?
因此平时写代码的时候,用哪种写法都可以。但是希望我们能将这些技巧记住,关键时刻或许就能派上用场。

时间: 2024-09-20 13:24:48

javascript按位非运算符的使用方法_基础知识的相关文章

在JavaScript的正则表达式中使用exec()方法_基础知识

 exec方法为正则表达式匹配的文本搜索字符串.如果找到匹配,则返回结果数组; 否则,返回null.语法 RegExpObject.exec( string ); 下面是参数的详细信息:     string : 要搜索的字符串 返回值: 如果找到一个匹配,如果不为空,则返回匹配的文本. 例子: <html> <head> <title>JavaScript RegExp exec Method</title> </head> <body&

谈谈JavaScript中的几种借用方法_基础知识

前言 通过call().apply()和bind()方法,我们可轻易地借用其它对象的方法,而无须从这些对象中继承它. 在JavaScript中借用方法 在JavaScript中,有时可以重用其它对象的函数或方法,而不一定非得是对象本身或原型上定义的.通过 call().apply() 和 bind() 方法,我们可轻易地借用其它对象的方法,而无须继承这些对象.这是专业 JavaScript 开发者常用的手段. 原型方法 在 JavaScript 中,除了不可更改的原始数据类型,如 string.

JavaScript中length属性的使用方法_基础知识

 此属性返回字符串中的字符数. 语法 string.length 下面是参数的详细信息:     A string 返回值: 返回字符串中的字符数. 例子: <html> <head> <title>JavaScript String length Property</title> </head> <body> <script type="text/javascript"> var str = new

在JavaScript中使用NaN值的方法_基础知识

 不带引号的字面常量NaN是一个特殊的值,表示不是非数字.由于NaN总是比较不等的情况,以任何数,包括NaN,它通常是用于指示应该返回一个有效的数的函数的错误条件. 注意:使用isNaN()全局函数来查看是否值是NaN值.语法 您可以使用以下语法访问属性: var val = Number.NaN; 示例 : 在这里,dayOfMonth分配NaN,如果是大于31,并显示一条消息,表明有效范围: <html> <head> <script type="text/ja

详解JavaScript中|单竖杠运算符的使用方法_基础知识

js运算符单竖杠"|"的作用 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|0)//0 console.log(1.1|0)//1 console.log(3.65555|0)//3 console.

简单介绍JavaScript中字符串创建的基本方法_基础知识

创建一个字符串有几种方法.最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myStr = "Hello, String!";       可以用双引号或单引号将字符串包含,但要注意,作为界定字符串的一对引号必须是相同的,不能混用.       像var myString = "Fluffy is a pretty cat.'; 这样的声明就是非法的.       允许使用两种引号,使得某些操作变得简单,比如将一种嵌入另外一种: document.w

深入了解JavaScript中的Symbol的使用方法_基础知识

Symbol 是什么? Symbols 不是图标,也不是指在代码中可以使用小图片: 也不是指代其他一些东西的语法.那么,Symbol 到究竟是什么呢?七种数据类型 JavaScript 在 1997 年被标准化时,就有 6 种数据类型,直到 ES6 出现之前,程序中的变量一定是以下 6 种数据类型之一:     Undefined     Null     Boolean     Number     String     Object 每种数据类型都是一系列值的组合,前面 5 种数据类型值的数

JavaScript中字符串拼接的基本方法_基础知识

非常简单,就用一个"+"将两个字符串"相加": var longString = "One piece " + "plus one more piece.";       要将多个字符串累积为一个字符串,还可以使用"+="操作符: var result = ""; result += "My name is Anders" result += " and m

javascript异步编程的4种方法_基础知识

你可能知道,Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推.这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务