当代数在表达式之前时,代字号会做什么？

Question

var attr = ~'input,textarea'.indexOf( target.tagName.toLowerCase() )
           ? 'value'
           : 'innerHTML'

我在一个答案中看到了它,我以前从未见过它.

这是什么意思？

Answer 1

~是一个按位运算符,它会翻转其操作数中的所有位.

例如,如果您的数字是1,它的IEEE 754浮点数的二进制表示(JavaScript如何处理数字)将是......

0011 1111 1111 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

因此~将其操作数转换为32位整数(JavaScript中的按位运算符)...

0000 0000 0000 0000 0000 0000 0000 0001

^{如果是负数,则将其存储在2的补码中:反转所有位并加1.}

......然后翻转所有的东西......

1111 1111 1111 1111 1111 1111 1111 1110

那么它的用途是什么呢？什么时候可以使用它？

它有很多用途.如果你正在编写低级别的东西,它很方便.如果您对应用程序进行了分析并找到了瓶颈,那么可以通过使用按位技巧(在更大的包中作为一种可能的工具)来提高性能.

这也是一个(一般)不清楚绝招打开indexOf()的发现返回值放入truthy(同时使未找到为falsy)人们通常会增加一倍它用它截断数字为32位(和丢弃其小数代替它的副作用,与Math.floor()正数有效相同).

我说不清楚,因为它的用途并不是很明显.通常,您希望您的代码能够清楚地与其他人阅读.虽然使用~可能看起来很酷,但它通常对自己的好处太聪明了.:)

它现在也不太相关的是,JavaScript有Array.prototype.includes()和String.prototype.includes().这些返回一个布尔值.如果您的目标平台支持它,您应该更喜欢这个来测试字符串或数组中是否存在值.

Answer 2

在indexOf()表达式之前使用它有效地为您提供了一个truthy/falsy结果,而不是直接返回的数字索引.

如果返回值-1,则~-1是0因为-1为所有1位的字符串.任何大于或等于零的值都将给出非零结果.从而,

if (~someString.indexOf(something)) {
}

if当"something"在"someString"中时,将导致代码运行.如果你试图.indexOf()直接使用布尔值,那么这将无法工作,因为有时它返回零(当"某事物"在字符串的开头).

当然,这也有效:

if (someString.indexOf(something) >= 0) {
}

而且它不那么神秘.

有时候你也会看到这个:

var i = ~~something;

~像这样使用运算符两次是将字符串转换为32位整数的快速方法.第一个~进行转换,第二个转换~回位.当然,如果操作符应用于无法转换为数字的内容,则会得到NaN结果.(编辑 - 实际上它~是第一个应用的第一个,但你明白了.)

Answer 3

该~是按位NOT运算符,~x是大致相同的-(x+1).它更容易理解.所以:

~2;    // -(2+1) ==> -3

考虑-(x+1).-1可以执行该操作来生成一个0.

换句话说,~与一系列数值一起使用将仅对输入值产生false(强制0来自-1)-1值,否则产生任何其他>= 0值.

众所周知,-1通常称为哨兵值.它用于返回许多功能indexOf()值的成功和~对失败的~语言.其中~xJavaScript 的返回值规则相同.

以这种方式检查-(x+1)另一个的存在/不存在是常见的-(x+1)

var a = "Hello Baby";

if (a.indexOf("Ba") >= 0) {
    // found it
}
if (a.indexOf("Ba") != -1) { 
    // found it
}

if (a.indexOf("aB") < 0) { 
    // not found
}
if (a.indexOf( "aB" ) == -1) { 
    // not found
}

但是,通过-1以下方式更容易实现

var a = "Hello Baby";

~a.indexOf("Ba");         // -7   -> truthy
if (~a.indexOf("Ba")) {   // true
    // found it
}

~a.indexOf("aB");         // 0    -> falsy
!~a.indexOf("aB");        // true
if (!~a.indexOf( "aB" )) {  // true
    // not found
}

你不懂JS:Kyle Simpson的类型和语法

Answer 4

~indexOf(item) 经常出现,这里的答案很棒,但也许有些人只需要知道如何使用它并"跳过"理论:

   if (~list.indexOf(item)) {
     // item in list
   } else {
     // item *not* in list
   }

Answer 5

对于那些考虑使用波浪形技巧从结果中创建一个真值的人来说indexOf,它更明确,并且更少使用该includes方法String.

'hello world'.includes('hello') //=> true
'hello world'.includes('kittens') //=> false

请注意,这是ES 2015中的一种新标准方法,因此它不适用于旧版浏览器.如果重要,请考虑使用String.prototype.includes polyfill.

此功能也适用于使用相同语法的阵列:

['apples', 'oranges', 'cherries'].includes('apples') //=> true
['apples', 'oranges', 'cherries'].includes('unicorns') //=> false

如果您需要较旧的浏览器支持,这是Array.prototype.includes polyfill.