Question

我正在尝试阅读Zepto.js的源代码。功能matches中有一个我不明白的地方：

zepto.matches = function(element, selector) {
    if (!selector || !element || element.nodeType !== 1) return false
    var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector ||
                          element.oMatchesSelector || element.matchesSelector
    if (matchesSelector) return matchesSelector.call(element, selector)
    var match, parent = element.parentNode, temp = !parent
    if (temp) (parent = tempParent).appendChild(element)

    //Here is my question. This line used the `~`
    match = ~zepto.qsa(parent, selector).indexOf(element)
    temp && tempParent.removeChild(element)
    return match
}

函数matches用于确定元素是否与提供的选择器匹配。它应该返回一个布尔值。

zepto.qsa()是Zepto的CSS选择器实现，它使用document.querySelectorAll和其他一些优化。

因此。以下代码中~的目的是什么？

match = ~zepto.qsa(parent, selector).indexOf(element)

我知道~表示Bitwise NOT。

（根据我自己的测试）：

~ -1 === 0

~ 0 === -1

~ 1 === -2

但我仍然不明白这个设计的用途。

有人可以解释一下吗？

Answer 1

正在使用bitwise NOT运算符反转indexOf()函数的结果。

我不熟悉zepto.js，但我可以猜测代码在做什么。首先，它调用zepto.qsa()方法并传递父对象和选择器。此方法必须返回一个数组，因为它然后调用indexOf()来获取元素的索引（我假设该元素是“匹配的”）。

如果在集合中找不到该元素，则Array.indexOf()方法返回-1。正如你已经看到的那样，按下NOT on -1会给你零，相当于false。 Any other value that could come out would be equivalent to true.

更一般地说，这意味着您可以在indexOf()上使用按位NOT 获取一个布尔值，指示搜索的元素是否存在于收藏与否。

Answer 2

嗯..这是一个按位NOT，所以你可以在使用位时使用它。

对于实际应用，当你通常没有发现自己使用位时，这里有一个小技巧：

 if (~arr.indexOf(val)) doStuff();

 //instead of

 if (arr.indexOf(val) > -1) doStuff();

- 编辑 -

我意识到我没有看到您要求~使用indexOf的解释。简单地说，~-1评估为0。使用if语句时，0为false值。这是写arr.indexOf(val) > -1的简写方式。

在JavaScript中使用〜的目的是什么？

2 个答案: