JavaScript mendeteksi nilai asli, nilai referensi, dan atribut

Dalam JavaScript, kita sering melihat kode seperti ini: perbandingan variabel dengan nol (penggunaan ini sangat bermasalah), digunakan untuk menentukan apakah suatu variabel diberikan nilai yang masuk akal. Misalnya:

 var controller = {process: function (item) {if (item! == null) {// Metode penulisan buruk item.sort (); items.foreach (function (item) {// Jalankan beberapa logika});}}}

Dalam kode ini, metode proses () jelas mengharapkan item menjadi array, karena kami melihat item memiliki sort () dan foreach (). Tujuan kode ini sangat jelas: jika item parameter bukan nomor grup, maka operasi berikutnya akan dihentikan. Masalah dengan metode penulisan ini adalah bahwa perbandingan dengan NULL tidak dapat benar -benar mencegah kesalahan. Nilai item bisa 1, string, atau bahkan objek apa pun. Nilai -nilai ini tidak sama dengan null, yang pada gilirannya akan menyebabkan kesalahan ketika metode proses () dieksekusi untuk mengurutkan ().

Membandingkan dengan NULL saja tidak memberikan informasi yang cukup untuk menentukan apakah eksekusi kode selanjutnya benar -benar aman. Untungnya, JavaScript memberi kita banyak cara untuk mendeteksi nilai sebenarnya dari suatu variabel.

Mendeteksi nilai asli

Ada 5 tipe primitif (juga dikenal sebagai tipe data sederhana) dalam JavaScript: String, Number, Boolean, Undefined, dan Null. Jika Anda ingin nilai menjadi string, angka, boolean, atau tidak terdefinisi, opsi terbaik adalah menggunakan operator tipeof, yang mengembalikan string yang mewakili tipe.

Untuk string, typeOf mengembalikan "string".

Untuk angka, TypeOf mengembalikan "Nomor".

Untuk Boolean, TypeOf mengembalikan "Boolean".

Untuk tidak terdefinisi, TypeOf mengembalikan "tidak ditentukan".

Sintaks dasar tipeof adalah: variabel tipeof, Anda juga dapat menggunakan tipeof (variabel), meskipun ini adalah sintaks legal javascript, yang membuat tipef terlihat seperti fungsi daripada operator. Mengingat hal ini, kami sarankan menulis tanpa tanda kurung.

Menggunakan TypeOf untuk mendeteksi 4 tipe primitif ini sangat aman. Mari kita lihat contoh -contoh berikut.

 // Deteksi "string" if (typeof name === "string") {OtherName = name.substring (3);} // deteksi "nomor" if (typeOf count === "nomor") {updateCount (count);} // deteksi "boolean" if (typeof found === "boolean" & ifin "{" found {"found loolean" {"if if ife (typeof found ===" (typeof myapp === "tidak terdefinisi") {myapp = {// kode lain};}

Operator TypeOF unik karena tidak akan melaporkan kesalahan saat digunakan dengan variabel yang tidak dideklarasikan. Variabel dan variabel yang tidak ditentukan dengan nilai yang tidak ditentukan keduanya akan mengembalikan "tidak ditentukan" melalui tipeof.

Tipe primitif terakhir null, melalui tipeof, akan mengembalikan "objek", yang terlihat aneh dan dianggap sebagai bug serius dalam spesifikasi standar, jadi ketika pemrograman, Anda harus mencegah penggunaan tipef untuk mendeteksi tipe nol.

 console.log (tipe null); // "objek"

Cukup membandingkan dengan null biasanya tidak mengandung informasi yang cukup untuk menentukan apakah jenis nilai legal, jadi null umumnya tidak digunakan dalam pernyataan deteksi.

Tetapi ada pengecualian, jika nilai yang diharapkan benar -benar nol, Anda dapat secara langsung membandingkan dengan nol. Misalnya:

 // Jika Anda perlu mendeteksi null, gunakan metode ini var element = document.geteLementById ("my-div"); if (element! == null) {element.classname = "found";}

Jika elemen DOM tidak ada, nilai yang diperoleh oleh Document.getElementById () adalah nol. Metode ini mengembalikan node atau mengembalikan nol. Karena NULL adalah output yang dapat diperkirakan saat ini, hasil pengembalian dapat dideteksi menggunakan operator identitas === atau operator non-identitas! ==.

Selain string, angka, boolean, tidak terdefinisi, dan objek yang disebutkan di atas, nilai pengembalian operator tipeof juga memiliki fungsi. Dari sudut pandang teknis, fungsi juga merupakan objek dalam JavaScript, bukan tipe data. Namun, fungsi memang memiliki beberapa properti khusus, sehingga perlu untuk membedakan fungsi dari objek lain dengan tipe operator. Fitur ini akan digunakan dalam fungsi deteksi nanti.

Mendeteksi nilai referensi

Dalam JavaScript, kecuali untuk nilai asli, semua nilai referensi (juga disebut objek). Jenis referensi yang umum digunakan adalah: objek, array, tanggal dan regexp. Jenis referensi ini adalah objek bawaan di JavaScript. Jenis operator mengembalikan "objek" saat menilai jenis referensi ini.

 console.log (typeof {}); // console.log "objek" (typeof []); // console.log "objek" (typeof new date ()); // console.log "objek" (typeof baru regexp ()); // console.log "objek" (typeof baru regexp ()); // "objek"

Cara terbaik untuk mendeteksi tipe nilai yang direferensikan adalah dengan menggunakan instance dari operator. Sintaks dasar dari instance dari adalah:

 Value Instanceof Constructor // Detect Date if (value instance dari tanggal) {console.log (value.getlyear);} // detect errorif (nilai contoh kesalahan) {value throw;} // deteksi ekspresi reguler jika (value instance dari regexp) {if (value.test (lainvalue)) {console.log ("matches) {if value.

Fitur yang menarik dari Instanceof adalah tidak hanya mendeteksi konstruktor yang membangun objek ini, tetapi juga mendeteksi rantai prototipe. Rantai prototipe berisi banyak informasi, termasuk pola warisan yang digunakan untuk mendefinisikan objek. Misalnya, secara default, setiap objek mewarisi dari objek, sehingga nilai instance objek dari setiap objek mengembalikan Ture. Misalnya:

 var sekarang = tanggal baru (); console.log (sekarang instance dari objek); // The natureConsole.log (sekarang Tanggal instance); // NatureInstanceof Operator juga dapat mendeteksi tipe khusus, seperti: Function Person (Name) {this.name = name;} var me = orang baru ("nicholas"); console.log (saya contoh objek); // the natureConsole.log (saya contoh orang); // Nature

Jenis orang dibuat dalam kode sampel ini. Variabel saya adalah contoh orang, jadi saya contoh orang itu benar. Seperti disebutkan di atas, semua objek dianggap sebagai contoh objek, jadi saya contoh objek juga merupakan suatu waktu.

Saat mendeteksi tipe bawaan dan kustom dalam JavaScript, cara terbaik untuk melakukan ini adalah dengan menggunakan instance dari operator, yang merupakan satu-satunya cara untuk melakukannya.

Tapi ada batasan yang serius. Dengan asumsi bahwa kedua bingkai browser (bingkai) memiliki orang konstruktor, dan orang yang dibingkai oleh orang itu dalam bingkai A dilewatkan ke dalam bingkai B, hasil berikut adalah:

Console.log (Frameapersoninstance dari Frameaperson) // Ture

Console.log (Frameapersoninstance Instanceof Framebperson) // Salah

Meskipun definisi kedua orang itu persis sama, mereka dianggap berbeda jenis dalam bingkai yang berbeda. Ada dua jenis bawaan yang sangat penting yang juga memiliki masalah ini: array dan fungsi, jadi mendeteksinya umumnya tidak menggunakan instanceof.

Fungsi deteksi

Secara teknis, fungsi dalam JavaScript adalah tipe referensi, dan ada juga fungsi konstruktor. Setiap fungsi adalah contoh, misalnya:

 function myfunc () {} // Metode penulisan yang buruk Console.log (MyFunc instanceof function); // BENAR

Namun, metode ini tidak dapat digunakan di seluruh bingkai, karena setiap frame memiliki konstruktor fungsinya sendiri. Untungnya, tipe operator juga dapat digunakan untuk fungsi, mengembalikan "fungsi".

 function myfunc () {} // Metode penulisan yang baik Console.log (typeof myfunc === "fungsi"); // BENAR

Cara terbaik untuk mendeteksi suatu fungsi adalah dengan menggunakan TypeOF karena dapat digunakan di seluruh bingkai.

Ada batasan untuk menggunakan TypeOf untuk mendeteksi fungsi. Dalam IE 8 dan sebelumnya IE browser, TypeOF digunakan untuk mendeteksi bahwa fungsi dalam node dom semuanya mengembalikan "objek" alih -alih "fungsi". Misalnya:

 // ieconsole.log (typeof document.createElement); // console.log "objek" (typeof document.getElementById); // "objek" console.log (typeOf document.getElementByTagname); // "objek" console.log (typeOf document.getElementByTagname); // "objek"

Fenomena aneh ini terjadi karena browser memiliki perbedaan implementasi DOM. Singkatnya, versi IE sebelumnya ini tidak mengimplementasikan DOM sebagai metode JavaScript bawaan, menghasilkan operator tipe built-in yang mengidentifikasi fungsi-fungsi ini sebagai objek. Karena DOM didefinisikan dengan jelas, mengetahui bahwa ada anggota objek berarti bahwa itu adalah metode, pengembang sering menggunakan operator untuk mendeteksi metode DOM, seperti:

 // Mendeteksi metode dom if ("queryselectorall" di dokumen) {var gambar = document.queryselectorAll ("img");}

Kode ini memeriksa apakah QuerySelectorAll didefinisikan dalam dokumen, dan jika demikian, gunakan metode ini. Meskipun bukan metode yang ideal, ini adalah cara paling aman untuk mendeteksi apakah metode DOM ada di IE 8 dan browser sebelumnya. Dalam semua kasus lain, tipe Operator adalah pilihan terbaik untuk mendeteksi fungsi JavaScript.

Mendeteksi array

Salah satu masalah lintas domain tertua di JavaScript adalah lulus array bolak-balik di antara bingkai. Pengembang segera menemukan bahwa contoh array tidak dapat mengembalikan hasil yang benar dalam skenario ini. Seperti disebutkan di atas, setiap bingkai memiliki konstruktor array sendiri, jadi instance dalam satu bingkai tidak akan dikenali dalam bingkai lain.

Ada banyak penelitian tentang cara mendeteksi jenis array di JavaScript, dan akhirnya Kangax memberikan solusi yang elegan:

 fungsi isArray (value) {return object.prototype.toString.call (value) === "[array objek]";}

Kangax menemukan bahwa memanggil metode built-in toString () Value mengembalikan hasil string standar di semua browser. Untuk array, string yang dikembalikan adalah "[objek array]", dan tidak perlu mempertimbangkan bingkai mana yang dibangun. Metode ini seringkali sangat berguna saat mengidentifikasi objek bawaan, tetapi jangan gunakan metode ini untuk objek khusus.

Ecmascript5 secara resmi memperkenalkan array.isarray () ke JavaScript. Satu -satunya tujuan adalah untuk secara akurat mendeteksi apakah nilai adalah array. Seperti fungsi Kangax, array.isArray () juga dapat mendeteksi nilai yang dilewati bingkai, begitu banyak pustaka kelas JavaScript saat ini menerapkan metode ini dengan cara yang sama.

 fungsi isArray (value) {if (typeof array.isArray === "function") {return array.isArray (value);} else {return object.prototype.toString.call (value) === "[array objek]";}}

IE 9+, Firefox 4+, Safari 5+, Opera 10.5+, dan Chrome semuanya menerapkan metode array.isarray ().

Mendeteksi properti

Skenario lain di mana null (dan tidak terdefinisi) adalah ketika mendeteksi apakah ada atribut dalam suatu objek, seperti:

 // Penulisan Buruk: Deteksi Nilai Salah If (objek [PropertieName]) {// Beberapa kode} // Penulisan yang buruk: Bandingkan dengan NULL if (objek [PropertieName]! = NULL) {// Beberapa kode} // Penulisan Buruk: Bandingkan dengan IF yang tidak terdefinisi (objek [PropertiDyName]! = Tidak terdefinisi) {// Beberapa kode}

Setiap penilaian dalam kode di atas sebenarnya memeriksa nilai atribut dengan nama yang diberikan, daripada menilai apakah atribut yang disebutkan oleh nama yang diberikan ada. Dalam penilaian pertama, hasilnya akan keliru ketika nilai properti adalah nilai yang salah, seperti: 0, "" (string kosong), false, nol dan tidak terdefinisi, setelah semua, ini adalah nilai hukum dari properti.

Cara terbaik untuk menentukan apakah ada atribut adalah dengan menggunakan operator. Operator dalam menilai apakah properti itu ada tanpa membaca nilai properti. Jika properti dari objek instance ada atau mewarisi dari prototipe objek, operator IN akan mengembalikan true. Misalnya:

 var object = {count: 0, terkait: null}; // tulisan bagus if ("count" di objek) {// kode di sini akan dieksekusi} // penulisan buruk: deteksi nilai palsu jika (objek ["count"]) {// kode di sini tidak akan dieksekusi} // tulisan yang baik jika ("terkait" di objek) {// kode di sini akan dieksekusi {non -write. {// Kode di sini tidak akan dieksekusi}

Jika Anda hanya ingin memeriksa apakah properti tertentu dari objek instance ada, gunakan metode hasownproperty (). Semua objek JavaScript yang diwarisi dari objek memiliki metode ini. Jika properti ini ada dalam contoh, ia mengembalikan true (jika properti ini hanya ada dalam prototipe, ia mengembalikan false). Perlu dicatat bahwa dalam IE 8 dan versi sebelumnya dari IE, objek DOM tidak mewarisi dari objek, jadi metode ini tidak termasuk. Artinya, Anda harus memeriksa apakah metode HASOWNPROPERTY () objek DOM ada sebelum menyebutnya.

 // Ini adalah cara yang baik untuk menulis if (object.hasownproperty ("terkait")) {// jalankan kode di sini} // Jika Anda tidak yakin apakah itu objek dom, kemudian tulis jika ("hasownproperty" di objek && hasownproperty ("terkait")) {// jalankan kode di sini}

Karena ada IE 8 dan versi IE sebelumnya, ketika menilai apakah atribut dari objek instance ada, saya lebih suka menggunakan operator. HasownProperty () hanya akan digunakan saat menilai properti instan.

Terlepas dari kapan Anda perlu mendeteksi keberadaan properti, gunakan operator atau hasownproperty (). Melakukan ini dapat menghindari banyak bug.

Di atas adalah deteksi JavaScript dari nilai -nilai asli, nilai referensi, dan atribut yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!