Apa yang dilakukan tilde ketika mendahului ekspresi?

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

Saya melihatnya dalam sebuah jawaban, dan saya belum pernah melihatnya sebelumnya.

Apa artinya?

~adalah operator bitwise yang membalik semua bit di operan.

Misalnya, jika nomor Anda adalah 1, representasi biner dari float IEEE 754 (bagaimana JavaScript memperlakukan angka) akan ...

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

Jadi ~konversikan operan ke integer 32 bit (operator bitwise dalam JavaScript melakukan itu) ...

0000 0000 0000 0000 0000 0000 0000 0001

^{Jika itu adalah angka negatif, itu akan disimpan dalam komplemen 2's: membalikkan semua bit dan menambahkan 1.}

... dan kemudian membalik semua bagiannya ...

1111 1111 1111 1111 1111 1111 1111 1110

Jadi apa gunanya itu? Kapan seseorang bisa menggunakannya?

Ini memiliki beberapa kegunaan. Jika Anda menulis hal-hal tingkat rendah, ini berguna. Jika Anda membuat profil aplikasi Anda dan menemukan hambatan, itu bisa dibuat lebih berkinerja dengan menggunakan trik bitwise (sebagai salah satu alat yang mungkin dalam tas yang jauh lebih besar).

Ini juga merupakan (umumnya) tidak jelas trik untuk mengubah indexOf()'s ditemukan nilai kembali ke truthy (sementara membuat tidak ditemukan sebagai falsy ) dan orang sering menggunakannya untuk efek samping dari truncating nomor ke 32 bit (dan menjatuhkan tempat desimal sebesar dua kali lipat itu, efektif sama dengan Math.floor()untuk angka positif).

Saya katakan tidak jelas karena tidak jelas apa gunanya. Secara umum, Anda ingin kode Anda berkomunikasi dengan jelas kepada orang lain yang membacanya. Meskipun menggunakan ~mungkin terlihat keren , umumnya terlalu pintar untuk kebaikannya sendiri. :)

Ini juga kurang relevan sekarang karena JavaScript telah Array.prototype.includes()dan String.prototype.includes(). Ini mengembalikan nilai boolean. Jika platform target Anda mendukungnya, Anda harus memilih ini untuk menguji keberadaan nilai dalam string atau array.

Menggunakannya sebelum indexOf()ekspresi secara efektif memberi Anda hasil yang benar / salah, bukan indeks numerik yang langsung dikembalikan.

Jika nilai kembali -1, maka ~-1adalah 0karena -1adalah string dari semua 1 bit. Nilai apa pun yang lebih besar dari atau sama dengan nol akan memberikan hasil yang tidak nol. Jadi,

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

akan menyebabkan ifkode berjalan ketika "sesuatu" ada di "someString". Jika Anda mencoba menggunakan .indexOf()sebagai boolean secara langsung, maka itu tidak akan berhasil karena kadang-kadang ia mengembalikan nol (ketika "sesuatu" berada di awal string).

Tentu saja, ini juga berfungsi:

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

dan itu jauh kurang misterius.

Terkadang Anda juga akan melihat ini:

var i = ~~something;

Menggunakan ~operator dua kali seperti itu adalah cara cepat untuk mengubah string ke integer 32-bit. Yang pertama ~melakukan konversi, dan yang kedua ~membalik bit kembali. Tentu saja jika operator diterapkan pada sesuatu yang tidak dapat dikonversi ke angka, Anda dapatkan NaNhasilnya. ( sunting - sebenarnya ini yang kedua ~diterapkan pertama kali, tetapi Anda mendapatkan idenya.)

Ini ~adalah Bitwise NOT Operator , ~xkira-kira sama dengan -(x+1). Lebih mudah dimengerti, semacam. Begitu:

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

Pertimbangkan -(x+1). -1dapat melakukan operasi itu untuk menghasilkan a 0.

Dengan kata lain, ~digunakan dengan kisaran nilai angka akan menghasilkan nilai falsy (memaksa falsedari 0) hanya untuk nilai -1input, jika tidak, nilai kebenaran lainnya.

Seperti yang kita ketahui, -1biasanya disebut nilai sentinel . Hal ini digunakan untuk banyak fungsi yang mengembalikan >= 0nilai-nilai untuk sukses dan -1untuk kegagalan dalam bahasa C. Yang mana nilai aturan pengembalian yang sama indexOf()dalam JavaScript.

Adalah umum untuk memeriksa ada / tidaknya substring di string lain dengan cara ini

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
}

Namun, akan lebih mudah untuk melakukannya ~seperti di bawah ini

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
}

Anda Tidak Tahu JS: Type & Grammar oleh Kyle Simpson

~indexOf(item) muncul cukup sering, dan jawabannya di sini luar biasa, tetapi mungkin beberapa orang hanya perlu tahu cara menggunakannya dan "melewatkan" teorinya:

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

Bagi mereka yang mempertimbangkan menggunakan trik tilde untuk menciptakan nilai kebenaran dari suatu indexOfhasil, itu lebih eksplisit dan memiliki lebih sedikit keajaiban untuk alih-alih menggunakan includesmetode iniString .

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

Perhatikan bahwa ini adalah metode standar baru pada ES 2015 sehingga tidak akan berfungsi pada browser lama. Dalam kasus di mana itu penting, pertimbangkan untuk menggunakan String.prototype.include polyfill .

Fitur ini juga tersedia untuk array menggunakan sintaks yang sama :

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

Berikut adalah Array.prototype.include polyfill jika Anda memerlukan dukungan browser yang lebih lama.