JavaScript中的＆=運算符可減少布爾值

Question

我正在嘗試使用慣用的C樣式編寫高效的函數，並且我對正確性性能感到好奇。

我有一個函數，它接收類字符串列表，它的作用是根據類字符串列表使匹配節點的DOM層次結構向上移動。 僅當所有類字符串均與元素的className屬性匹配時，檢查才能通過。

所以...

function nearestParent(elem, clasz, stopat) {
  // stopat can be used to stop the search short. For speed.
  // make sure you do not use jquery elements
  if (typeof clasz === 'string') { clasz = [clasz]; }
  do {
    elem = elem.parentNode;
    for(var i=0,l=clasz.length,pass=true, cn=elem.className;i<l;++i) {
      pass &= ~cn.indexOf(clasz[i]);
    }
    if(pass) return elem;
  } while (elem && elem != stopat);
}

您在此處看到的for循環基本上是使用indexOf檢查字符串是否匹配。 但是我看到的陷阱是，如果indexOf返回的值是奇數，則pass被設置為錯誤的值： ~3 & 1 = 0 。

因此，似乎正確的實現是pass &= cn.indexOf(clasz[i]) != -1; 或pass &= !!~cn.indexOf(clasz[i]); ...我想知道哪種方式最快？

Answer 1

我在Google的Chrome團隊工作。 我不直接在JavaScript引擎上工作，但是我對DOM是如何實現的非常了解。

我懷疑x &= y != -1和x &= !!~y 〜y之類的差異會嚴重影響此循環的性能。 y != -1可能更好。 以下內容可能更重要：

• 如果pass為false，則提早退出，從而執行較少的循環迭代。
• 查看其他DOM API是否更有效。 例如，使用Element.classList.contains代替indexOf來測試元素是否具有特定的類名。 或者根據您要定位的瀏覽器，構造一個CSS選擇器，然后使用Element.matches測試每個元素是否與選擇器匹配。
• 使用探查器（Chrome瀏覽器內置了探查器）來衡量腳本並直接衡量速度快慢。

Answer 2

&=運算符是按位和運算符。 它將兩個操作數都轉換為32位整數，並對它們進行按位運算。

您寧願使用&&運算符，這是邏輯和運算符：

pass = pass && cn.indexOf(clasz[i]) != -1;

&&會進行短路評估，因此一旦pass變為假，它將停止評估第二個操作數。

Answer 3

您可以使用console.time，也可以僅在數百次迭代中比較兩個Date前后。

盡管您還應該考慮浪費時間的可能性，否則會導致可讀性下降。