Co robi tylda, gdy poprzedza wyrażenie?

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

Widziałem to w odpowiedzi i nigdy wcześniej tego nie widziałem.

Co to znaczy?

~jest bitowym operatorem, który odwraca wszystkie bity w swoim operandzie.

Na przykład, jeśli twój numer to 1, jego binarna reprezentacja liczby zmiennoprzecinkowej IEEE 754 (jak JavaScript traktuje liczby) byłaby ...

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

~Konwertuje więc operand na 32-bitową liczbę całkowitą (robią to operatory bitowe w JavaScript) ...

0000 0000 0000 0000 0000 0000 0000 0001

^{Gdyby była liczbą ujemną, byłaby zapisana w uzupełnieniu 2: odwróć wszystkie bity i dodaj 1.}

... a następnie odwraca wszystkie swoje części ...

1111 1111 1111 1111 1111 1111 1111 1110

Więc po co z tego pożytek? Kiedy można go kiedykolwiek użyć?

Ma kilka zastosowań. Jeśli piszesz rzeczy niskiego poziomu, jest to przydatne. Jeśli profilowałeś swoją aplikację i znalazłeś wąskie gardło, możesz zwiększyć jej wydajność, stosując bitowe sztuczki (jako jedno z możliwych narzędzi w znacznie większej torbie).

Jest to także (ogólnie) niejasny trik , aby włączyć indexOf()„y znalezione wartości zwracanej do truthy (robiąc Nie znaleziono jak falsy ) i ludzie często używają go do jej skutkiem ubocznym obcinania numery do 32 bitów (i upuszczając swoje miejsce dziesiętne przez podwojenie go, efektywnie tak samo jak Math.floor()dla liczb dodatnich).

Mówię niejasno, ponieważ nie jest od razu oczywiste, do czego jest używany. Zasadniczo chcesz, aby Twój kod komunikował się wyraźnie z innymi czytającymi go osobami. Chociaż używanie ~może wyglądać fajnie , jest na ogół zbyt sprytne dla własnego dobra. :)

Jest również mniej aktualne, ponieważ JavaScript ma Array.prototype.includes()i String.prototype.includes(). Zwracają one wartość logiczną. Jeśli platforma docelowa to obsługuje, powinieneś to preferować do testowania na obecność wartości w łańcuchu lub tablicy.

Używanie go przed indexOf()wyrażeniem skutecznie daje wynik prawdziwości / fałszowania zamiast indeksu numerycznego, który jest bezpośrednio zwracany.

Jeśli wartość jest równa -1, a ~-1to 0dlatego, że -1to łańcuch wszystkich bitów 1. Każda wartość większa lub równa zero da wynik niezerowy. A zatem,

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

spowoduje uruchomienie ifkodu, gdy „coś” znajdzie się w „someString”. Jeśli spróbujesz użyć .indexOf()bezpośrednio jako wartość logiczną, to nie zadziała, ponieważ czasami zwraca zero (gdy „coś” znajduje się na początku łańcucha).

Oczywiście to też działa:

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

i jest znacznie mniej tajemniczy.

Czasami zobaczysz to również:

var i = ~~something;

~Dwukrotne użycie operatora jest szybkim sposobem przekonwertowania łańcucha na 32-bitową liczbę całkowitą. Pierwszy ~dokonuje konwersji, a drugi ~odwraca bity. Oczywiście, jeśli operator zostanie zastosowany do czegoś, czego nie można przekonwertować na liczbę, otrzymasz NaNw rezultacie. ( edytuj - tak naprawdę to drugie ~jest stosowane jako pierwsze, ale masz pomysł.)

~Jest bitowe NOT Operator , ~xjest mniej więcej taka sama jak -(x+1). W pewnym sensie łatwiej to zrozumieć. Więc:

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

Zastanów się -(x+1). -1może wykonać tę operację, aby utworzyć 0.

Innymi słowy, ~użycie z zakresem wartości liczbowych spowoduje wygenerowanie wartości fałszowania (przymusu do falseod 0) tylko dla -1wartości wejściowej, w przeciwnym razie dla każdej innej wartości prawdziwej.

Jak wiemy, -1jest powszechnie nazywany wartością wartownika . Jest on używany do wielu funkcji, które zwracają >= 0wartości do sukcesu i -1do awarii w języku C. Która ta sama zasada zwrotu wartości indexOf()w JavaScript.

W ten sposób często sprawdza się obecność / brak podłańcucha w innym ciągu

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
}

Łatwiej byłoby to jednak zrobić, ~jak poniżej

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
}

Nie znasz JS: Typy i gramatyka autorstwa Kyle'a Simpsona

~indexOf(item) pojawia się dość często, a odpowiedzi tutaj są świetne, ale może niektórzy ludzie muszą po prostu wiedzieć, jak go używać i „pomijać” teorię:

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

Dla tych, którzy rozważają użycie tyldy, aby stworzyć prawdziwą wartość z indexOfwyniku, jest ona bardziej wyraźna i ma mniej magii, aby zamiast tego użyć tej includesmetodyString .

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

Pamiętaj, że jest to nowa standardowa metoda od ES 2015, więc nie będzie działać na starszych przeglądarkach. W przypadkach, w których ma to znaczenie, rozważ użycie String.prototype.includes polifill .

Ta funkcja jest również dostępna dla tablic używających tej samej składni :

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

Oto Array.prototype.inc. Zawiera polifill, jeśli potrzebujesz starszej obsługi przeglądarki.