Menurut Anda, "Fitur Tersembunyi" apa yang harus diketahui oleh setiap programmer?
Setelah melihat kualitas yang sangat baik dari jawaban untuk pertanyaan-pertanyaan berikut, saya pikir sudah waktunya untuk meminta JavaScript.
- Fitur Tersembunyi dari HTML
- Fitur Tersembunyi dari CSS
- Fitur Tersembunyi dari PHP
- Fitur Tersembunyi dari ASP.NET
- Fitur Tersembunyi C #
- Fitur Tersembunyi di Jawa
- Fitur Tersembunyi Python
Meskipun JavaScript bisa dibilang adalah bahasa Sisi Klien yang paling penting saat ini (tanyakan saja pada Google), mengejutkan betapa sedikit pengembang web yang paling menghargai betapa kuatnya sebenarnya.
javascript
hidden-features
Binoj Antony
sumber
sumber
Jawaban:
Anda tidak perlu menentukan parameter apa pun untuk suatu fungsi. Anda bisa menggunakan
arguments
objek seperti array fungsi .sumber
arguments
objek membuat panggilan fungsi jauh lebih lambat - misalnya. jika (salah) argumen; akan melukai perf.arguments.callee
itu sudah usang.Saya bisa mengutip sebagian besar buku hebat Douglas Crockford, JavaScript: The Good Parts .
Tapi saya akan mengambil satu untuk Anda, selalu gunakan
===
dan!==
bukan==
dan!=
==
tidak transitif. Jika Anda menggunakannya===
akan memberikan false untuk semua pernyataan ini seperti yang diharapkan.sumber
==
adalah'\n\t\r ' == 0
=>true
...: DFungsi adalah warga negara kelas satu dalam JavaScript:
Teknik pemrograman fungsional dapat digunakan untuk menulis javascript elegan .
Khususnya, fungsi dapat dikirimkan sebagai parameter, misalnya Array.filter () menerima panggilan balik:
Anda juga dapat mendeklarasikan fungsi "pribadi" yang hanya ada dalam lingkup fungsi tertentu:
sumber
new Function()
sama jahatnya denganeval
. Jangan gunakan.Anda dapat menggunakan di operator untuk memeriksa apakah kunci ada dalam suatu objek:
Jika Anda menemukan objek literal terlalu buruk, Anda dapat menggabungkannya dengan tip fungsi tanpa parameter:
sumber
Menetapkan nilai default ke variabel
Anda bisa menggunakan logika atau operator
||
dalam ekspresi penugasan untuk memberikan nilai default:The
a
variabel akan mendapatkan nilaic
hanya jikab
adalah falsy (jika adalahnull
,false
,undefined
,0
,empty string
, atauNaN
), jika tidaka
akan mendapatkan nilaib
.Ini sering berguna dalam fungsi, ketika Anda ingin memberikan nilai default untuk argumen jika tidak disediakan:
Contoh fallback IE dalam event handler:
Fitur bahasa berikut telah bersama kami sejak lama, semua implementasi JavaScript mendukungnya, tetapi mereka tidak menjadi bagian dari spesifikasi sampai ECMAScript Edisi 5 :
The
debugger
pernyataanDijelaskan dalam: § 12.15 Pernyataan debugger
Pernyataan ini memungkinkan Anda untuk meletakkan breakpoints secara terprogram dalam kode Anda hanya dengan:
Jika debugger ada atau aktif, itu akan membuatnya segera rusak, tepat di baris itu.
Jika tidak, jika debugger tidak ada atau aktif pernyataan ini tidak memiliki efek yang dapat diamati.
Multiline String literals
Dijelaskan dalam: § 7.8.4 String Literals
Anda harus berhati-hati karena karakter di sebelah
\
harus menjadi terminator garis, jika Anda memiliki spasi setelah\
misalnya, kode akan terlihat persis sama, tetapi akan menaikkan aSyntaxError
.sumber
JavaScript tidak memiliki ruang lingkup blok (tetapi ia memiliki penutupan jadi mari kita sebut itu genap?).
sumber
Anda dapat mengakses properti obyek dengan
[]
bukannya.
Ini memungkinkan Anda mencari properti yang cocok dengan variabel.
Anda juga dapat menggunakan ini untuk mendapatkan / mengatur properti objek yang namanya bukan pengenal hukum.
Beberapa orang tidak mengetahui hal ini dan akhirnya menggunakan eval () seperti ini, yang merupakan ide yang sangat buruk :
Ini lebih sulit untuk dibaca, lebih sulit untuk menemukan kesalahan dalam (tidak dapat menggunakan jslint), lebih lambat untuk dieksekusi, dan dapat menyebabkan eksploitasi XSS.
sumber
foo.bar
, menurut spesifikasi itu, berperilaku sepertifoo["bar"]
. juga perhatikan bahwa semuanya adalah properti string. bahkan ketika Anda melakukan akses array,,array[4]
4 dikonversi ke string (sekali lagi, setidaknya menurut ECMAScript v3 spec)Jika Anda mencari Google untuk referensi JavaScript yang layak pada topik tertentu, sertakan kata kunci "mdc" dalam permintaan Anda dan hasil pertama Anda akan berasal dari Pusat Pengembang Mozilla. Saya tidak membawa referensi atau buku luring apa pun. Saya selalu menggunakan trik kata kunci "mdc" untuk langsung mendapatkan apa yang saya cari. Sebagai contoh:
Google: javascript array sort mdc
(dalam kebanyakan kasus Anda dapat menghilangkan "javascript")
Pembaruan: Pusat Pengembang Mozilla telah diubah namanya menjadi Jaringan Pengembang Mozilla . Trik kata kunci "mdc" masih berfungsi, tetapi segera kita mungkin harus mulai menggunakan "mdn" .
sumber
Mungkin sedikit jelas bagi beberapa ...
Instal Firebug dan gunakan console.log ("hello"). Jauh lebih baik daripada menggunakan peringatan acak (); yang saya ingat pernah saya lakukan beberapa tahun yang lalu.
sumber
Metode Pribadi
Objek dapat memiliki metode pribadi.
sumber
Juga disebutkan dalam "Javascript: The Good Parts" Crockford:
parseInt()
berbahaya. Jika Anda memberikannya string tanpa memberi tahu basis yang tepat, itu dapat mengembalikan angka yang tidak terduga. MisalnyaparseInt('010')
mengembalikan 8, bukan 10. Melewati basis ke parseInt membuatnya berfungsi dengan benar:sumber
Math.floor
atauNumber
?10 === Math.floor("010"); 10 === Number("010");
mengapung:42 === Math.floor("42.69"); 42.69 === Number("42.69");
parseInt
Fungsi tidak berbahaya itu dapat dengan mudah dibuat untuk melakukan sesuatu yang tidak begitu berbahaya.__parseInt = parseInt; parseInt = function (str, base) { if (!base) throw new Error(69, "All your base belong to us"); return __parseInt(str, base); }
Fungsi adalah objek dan karenanya dapat memiliki properti.
sumber
Saya harus mengatakan fungsi self-executing.
Karena Javascript tidak memiliki ruang lingkup blok , Anda dapat menggunakan fungsi self-executing jika Anda ingin mendefinisikan variabel lokal:
Di sini,
myvar
apakah tidak mengganggu atau mencemari lingkup global, dan menghilang ketika fungsi berakhir.sumber
.js
file saya dalam fungsi self-executing anonim dan melampirkan apa pun yang saya inginkan dapat diakses secara global di dalamnya kewindow
objek. Mencegah polusi namespace global.Ketahui berapa banyak parameter yang diharapkan oleh suatu fungsi
Ketahui berapa banyak parameter yang diterima oleh fungsi
sumber
function.length
.Berikut ini beberapa hal menarik:
NaN
dengan apa pun (datarNaN
) selalu salah, termasuk==
,<
dan>
.NaN
Singkatan dari Not a Number tetapi jika Anda meminta jenis itu sebenarnya mengembalikan nomor.Array.sort
dapat mengambil fungsi pembanding dan dipanggil oleh driver quicksort-like (tergantung pada implementasi).$0
,$1
,$2
anggota pada regex.null
tidak seperti yang lain. Ini bukan objek, boolean, angka, string, atau pun bukanundefined
. Agak seperti "pengganti"undefined
. (Catatan:typeof null == "object"
)this
menghasilkan objek [Global] yang tidak dapat disebutkan namanya.var
, alih-alih hanya mengandalkan deklarasi variabel secara otomatis, memberikan peluang nyata pada runtime untuk mengoptimalkan akses ke variabel tersebut.with
membangun akan menghancurkan optimzations sepertibreak
. Loop dapat diberi label dan digunakan sebagai targetcontinue
.undefined
. (tergantung pada implementasi)if (new Boolean(false)) {...}
akan mengeksekusi{...}
blok[sedikit diperbarui dalam menanggapi komentar yang baik; silakan lihat komentar]
sumber
typeof null
mengembalikan "objek".undefined
, tapi itu hanya nilai default yang Anda dapatkan ketika mencari indeks yang tidak ada. Jika Anda memeriksa [2000], itu juga akan terjadiundefined
, tetapi itu tidak berarti Anda telah mengalokasikan memori untuk itu. Di IE8, beberapa array padat, dan beberapa jarang, tergantung pada bagaimana perasaan mesin JScript pada saat itu. Baca lebih lanjut di sini: blogs.msdn.com/jscript/archive/2008/04/08/...Saya tahu saya terlambat ke pesta, tapi saya tidak bisa percaya
+
kegunaan operator belum disebutkan di luar "mengubah apa pun menjadi angka". Mungkin itu seberapa baik fitur tersembunyi itu?Tentu saja, Anda dapat melakukan semua ini menggunakan
Number()
, tetapi+
operator jauh lebih cantik!Anda juga dapat menentukan nilai pengembalian numerik untuk objek dengan mengganti
valueOf()
metode prototipe . Konversi angka apa pun yang dilakukan pada objek itu tidak akan menghasilkanNaN
, tetapi nilai pengembalianvalueOf()
metode:sumber
0xFF
dll., Tidak perlu+"0xFF"
.0xFF
, banyak cara yang sama Anda dapat menulis1
bukan+true
. Saya menyarankan agar Anda dapat menggunakannya+("0x"+somevar)
sebagai alternatifparseInt(somevar, 16)
, jika Anda mau." Metode ekstensi dalam JavaScript " melalui properti prototipe.
Ini akan menambahkan
contains
metode ke semuaArray
objek. Anda dapat memanggil metode ini menggunakan sintaks inisumber
Untuk menghapus properti dari objek dengan benar, Anda harus menghapus properti alih-alih hanya mengaturnya menjadi tidak terdefinisi :
Prop2 properti masih akan menjadi bagian dari iterasi. Jika Anda ingin sepenuhnya menghilangkan prop2 , Anda sebaiknya melakukan:
Prop2 properti tidak akan lagi muncul saat Anda mengulangi properti.
sumber
with
.Ini jarang digunakan, dan terus terang, jarang bermanfaat ... Tapi, dalam keadaan terbatas, memang ada kegunaannya.
Misalnya: objek literal cukup berguna untuk mengatur properti dengan cepat pada objek baru . Tetapi bagaimana jika Anda perlu mengubah setengah dari properti pada objek yang ada?
Alan Storm menunjukkan bahwa ini bisa agak berbahaya: jika objek yang digunakan sebagai konteks tidak memiliki salah satu properti yang ditugaskan, itu akan diselesaikan dalam lingkup luar, mungkin membuat atau menimpa variabel global. Ini sangat berbahaya jika Anda terbiasa menulis kode untuk bekerja dengan objek di mana properti dengan nilai default atau kosong dibiarkan tidak terdefinisi:
Oleh karena itu, mungkin ide yang baik untuk menghindari penggunaan
with
pernyataan untuk penugasan tersebut.Lihat juga: Apakah ada kegunaan sah untuk pernyataan "dengan" JavaScript?
sumber
Metode (atau fungsi) dapat dipanggil pada objek yang bukan tipe yang dirancang untuk bekerja dengannya. Ini bagus untuk memanggil metode asli (cepat) pada objek kustom.
Kode ini macet karena
listNodes
bukanArray
Kode ini berfungsi karena
listNodes
mendefinisikan cukup properti mirip array (panjang, [] operator) untuk digunakan olehsort()
.sumber
Warisan prototipe (dipopulerkan oleh Douglas Crockford) sepenuhnya merevolusi cara Anda berpikir tentang banyak hal dalam Javascript.
Itu pembunuh! Sayang sekali hampir tidak ada yang menggunakannya.
Ini memungkinkan Anda untuk "membuat" contoh baru dari objek apa pun, memperluasnya, sambil mempertahankan tautan pewarisan prototipikal (langsung) ke properti lainnya. Contoh:
sumber
Beberapa akan menyebut ini masalah selera, tetapi:
Operator triner dapat dirantai untuk bertindak seperti Skema (kond ...):
dapat ditulis sebagai ...
Ini sangat "fungsional", karena percabangan kode Anda tanpa efek samping. Jadi alih-alih:
Kamu bisa menulis:
Bekerja dengan baik dengan rekursi juga :)
sumber
Angka juga benda. Jadi Anda dapat melakukan hal-hal keren seperti:
sumber
times
yang tidak efisien:Math.floor
dipanggil setiap kali, bukan hanya sekali.Bagaimana dengan penutupan dalam JavaScript (mirip dengan metode anonim di C # v2.0 +). Anda dapat membuat fungsi yang membuat fungsi atau "ekspresi".
Contoh penutupan :
sumber
Anda juga dapat memperluas (mewarisi) kelas dan menimpa properti / metode menggunakan sendok rantai prototipe16 disinggung.
Dalam contoh berikut ini kita membuat Pet kelas dan mendefinisikan beberapa properti. Kami juga mengganti metode .toString () yang diwarisi dari Object.
Setelah ini kita membuat kelas Dog yang memperluas Pet dan menimpa metode .toString () lagi-lagi mengubah perilaku itu (polimorfisme). Selain itu kami menambahkan beberapa properti lainnya ke kelas anak.
Setelah ini, kami memeriksa rantai pewarisan untuk menunjukkan bahwa Anjing masih berjenis Anjing, berjenis Pet, dan berjenis Obyek.
Kedua jawaban untuk pertanyaan ini adalah kode yang dimodifikasi dari artikel MSDN yang bagus oleh Ray Djajadinata.
sumber
Anda dapat menangkap pengecualian tergantung pada jenisnya. Dikutip dari MDC :
CATATAN: Klausa tangkapan bersyarat adalah ekstensi Netscape (dan karenanya Mozilla / Firefox) yang bukan bagian dari spesifikasi skrip ECMAS dan karenanya tidak dapat diandalkan kecuali pada browser tertentu.
sumber
Dari atas kepala saya...
Fungsi
arguments.callee merujuk ke fungsi yang meng-host variabel "argumen", sehingga dapat digunakan untuk kambuh fungsi anonim:
Itu berguna jika Anda ingin melakukan sesuatu seperti ini:
Benda
Hal yang menarik tentang anggota objek: mereka dapat memiliki string apa pun sebagai nama mereka:
String
String.split dapat menggunakan ekspresi reguler sebagai parameter:
String.replace dapat mengambil ekspresi reguler sebagai parameter pencarian dan fungsi sebagai parameter pengganti:
sumber
arguments.callee
sudah usang dan akan melempar dan pengecualian dalam ECMAScript 5.Anda dapat menggunakan objek alih-alih beralih sebagian besar waktu.
Pembaruan: jika Anda khawatir tentang kasus yang dinilai sebelumnya tidak efisien (mengapa Anda khawatir tentang efisiensi ini sejak awal dalam desain program ??) maka Anda dapat melakukan sesuatu seperti ini:
Ini lebih berat untuk mengetik (atau membaca) daripada switch atau objek, tetapi mempertahankan manfaat menggunakan objek daripada switch, yang dirinci di bagian komentar di bawah ini. Gaya ini juga membuatnya lebih mudah untuk mengubah ini menjadi "kelas" yang tepat setelah cukup dewasa.
update2: dengan ekstensi sintaks yang diusulkan untuk ES.next, ini menjadi
sumber
var arr = []; typeof arr; // object
Pastikan untuk menggunakan metode hasOwnProperty ketika melakukan iterasi melalui properti objek:
Ini dilakukan agar Anda hanya akan mengakses properti langsung dari anObject , dan tidak menggunakan properti yang berada di bawah rantai prototipe.
sumber
Variabel pribadi dengan Antarmuka Umum
Ini menggunakan trik kecil yang rapi dengan definisi fungsi self-calling. Segala sesuatu di dalam objek yang dikembalikan tersedia di antarmuka publik, sementara yang lainnya bersifat pribadi.
sumber