JavaScript 里 ~ 的神奇用法

FreeZinG 发布于2019-08-21 10:30 / 863人阅读

这几天看koa源码的时候，经常看到if(~notfound.indexOf(err.code)){ doSomeing... }这种在一个表达式前面加~号的，今天就来扒一扒这已黑魔法。

~ 取反操作符

不熟悉原码，反码，补码的小伙伴可以先看一下这篇文章原码、反码、补码，计算机中负数的表示
在javascript中，假设有一个变量var a = 1, 那么~a + a = -1, 也就是说现在~a ＝ -2

~ 在条件判断中的用法

先上一段代码

var arr = ["zank", "ywwhack"]
if(~arr.indexOf("zank")){
    console.log("found");
}else{
    console.log("not found");
}

这段代码最后会输出found，说明~arr.indexOf("zank")等价于arr.indexOf("zank")>-1

还记得刚才的~a+a = -1么，其实用的就是这个原理。arr.indexOf()调用后，如果没找到会返回-1，否则返回一个大于-1的整数。

假设a = arr.indexOf()，那么如果arr中存在所查找的元素时，a=-1，那么~a=0，上面代码可以改写如下：

var arr = ["zank", "ywwhack"],
    a = arr.indexOf("zank"), //a = 0
    exist = ~a; // exist = -1, 
//只有当a = -1时，即arr中不存在查找的元素,exist=0,其余的exist都为负值
if(exist){
    console.log("found");
}else{
    console.log("not found");
}

idc机房托管专线服务神奇的网站 javascript用法一个神奇的网站 javascript常见用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85667.html

你不知道的Chrome DevTools（1）：神奇的console

摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。在代码中使用的最简单的用法就是写个在控制台打印一行消息。跟的区别在于会对输出的对象进行展开。用于显示一组的控制台输出，要搭配来使用。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12...

KevinYan 2019-08-19 14:34 评论0 收藏0
快速理解JavaScript中apply()和call()的用法和用途

摘要：在学习之前，我们必须对的作用和使用方法有所了解，可以参考我前一篇文章快速理解中的用法与陷阱。和的作用十分相似，只是参数类型上的差别，以适应不同的使用场景。在学习apply()之前，我们必须对this的作用和使用方法有所了解，可以参考我前一篇文章《快速理解JavaScript中this的用法与陷阱》。当然如果你已经熟悉this的相关知识，那么请直接往下看。 call()和apply()...

chenjiang3 2019-08-19 17:49 评论0 收藏0
神奇的选择器 :focus-within

摘要：的伪类选择器和伪元素选择器，让有了更为强大的功能。划重点，它或它的后代获得焦点。另外，划重点，这个伪类是仍处于实验室的方案。最后感谢耐心读完。CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒...

clasnake 2019-04-23 13:30 评论0 收藏0
Webpack基本功能理解以及使用

摘要：在这个过程中，会用到一些解析工具用来预处理一些模块以及拓展语言例如这些工具的配置使用都是在中完成的。属性，表示进行转换时，应该使用哪个。插件接口功能极其强大，可以用来处理各种各样的任务。对于前端工程化，webpack一个神奇的工具，既然是个神奇的工具。那我们保留我们的好奇心，来聊一聊它，首先我们要搞清楚webpack到底是用来解决什么问题的，然后我们来看看它到底是怎么做的，最后来看看...

KnewOne 2019-08-26 10:09 评论0 收藏0
js中reduce的神奇用法

摘要：最近经常在项目中经常看到别人用处理数据，很是牛掰，很梦幻，不如自己琢磨琢磨。初始值或者计算结束后的返回值。当前元素所属的数组对象。传递给函数的初始值，相当于的初始值。 showImg(https://user-gold-cdn.xitu.io/2018/9/4/165a52f4bf93fbf4?w=6000&h=3000&f=jpeg&s=3043490); 最近经常在项目中经常看到别...

岳光 2019-08-23 11:43 评论0 收藏0